Tools to Capture and Convert the Web
GrabzIt's Online Community

Problems generating image for div with embed inside

Ask questions on how to capture or convert web pages or HTML into images, CSV, PDF or DOCX documents as well on how to convert videos into animated GIF's using our API.

Hello,

I'm a paying customer trying to get a screen shot of a <div> element containing a tweet embed overlayed with a watermark. Problem is I get a screenshot of only the watermark. Here is my code... what am I doing wrong?

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<style>


#tweet {
position:relative;
z-index: 1 !important;
width: 500px !important;
margin-left: -8px;
margin-top: -10px;
}

.watermark {
position: absolute;
top:60px;
left:100px;
z-index: 10 !important;
display: <?php if($_GET['watermark'] == 0){ $watermark = "none"; } elseif($_GET['watermark'] == 1){ $watermark = ""; } echo $watermark; ?>;
}

#tweet iframe {
border: none !important;
box-shadow: none !important;
}

.copywrite p {
position: absolute;
left:0;
margin-top: -9px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size: 12px;
color:#a2a6a8;
}
</style>

<title>Tweet Screen Shot Feeder</title>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.7/grabzit.min.js"></script>
</head>

<body>

<div class="tweet-wrapper" id="content">
<div id="tweet" tweetID="<?php echo $_GET["tweetid"];?>"></div>
<!-- <div id="tweet" tweetID="1223594060818059264"></div> -->

<img src="images/watermark.png" class="watermark"/>
</div>
<div class="copywrite">
<p>Tweet screen shot by <strong>https://sane.social</strong> © on <?php echo date("M. d, Y") . "<br>";?></p>
</div>

<script sync src="https://platform.twitter.com/widgets.js"></script>

<script>
window.onload = (function(){

var tweet = document.getElementById("tweet");
var id = tweet.getAttribute("tweetID");

twttr.widgets.createTweet(
id, tweet, {

conversation : 'none', // or all
cards : 'visible', // or visible
theme : 'light' // or dark
})

.then (function (el) {
el.contentDocument.querySelector(".footer").style.display = "none";
});

});
</script>

<div id="tweetshot"></div>
<script type="text/javascript">
GrabzIt("XXXX=").ConvertPage(window.location.href, {"target": "#content", "bheight": -1, "height": -1, "width": -1}).AddTo("tweetshot");
</script>

</body>
</html>

Asked by GrabzIt Support on the 2nd of March 2020

I don't think this is an issue with GrabzIt but with the security of Twitters API. It probably doesn't like being used inside a temporary HTML page. Instead you should change your code to use the URL instead:

.ConvertURL(location.href, {"target": "#content", "bheight": -1, "height": -1, "width": -1}).AddTo("tweetshot");

Answered by GrabzIt Support on the 2nd of March 2020