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

Problems generating image for div with embed inside

Ask questions relating to GrabzIt's Web Scraper Tool. Such as how to use the web scraper and API to extract data from web pages, images or PDF documents.

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