Question

I use this code to add a Tweet button to my website :

<script type="text/javascript">
    // <![CDATA[
    document.write('<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-url="<?php echo $this->getUrl('') ?>">Tweet</a>');
    // ]]>
</script>
<script type="text/javascript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

The button works fine, but the problem is it adds two Iframes to my website source code right after the body start tag. Those Iframes has a width property of 10px that causing my website to be wider and have a scroll bar.

How can I fix this?

Answer 1

I would imagine absolutely positioning those iframes would do the trick. Going by the IDs in Christopher’s answer, you could try this:

#twttrHubFrameSecure,
#twttrHubFrame {
    position: absolute;
    top: 0;
    left: 0;
}

You might want to try putting them bottom right (or elsewhere) if you find they’re getting in the way of something.