CODEWITHSUNDEEP
htmlcssfacebookmagento
user994319
user994319

Reputation: 251

Facebook comment bar hidden behind twitter/google social buttons

Hopping someone can help with this.

When someone clicks 'Like' on one of our product pages the comment section that drops down goes behind the twitter/google social buttons and I can't seem to pin point exactly where the problem lies. I have tried setting overflow to visible/auto and no luck, yet when I change the height it appears ok (although I don't want to change the height but rather it appear over the top).

The code is below around the facebook button:

<div class="product-link">


    <iframe src="http://www.facebook.com/plugins/like.php?href=http://foscam-uk.com/indoor-ip-cameras/foscam-fi8918e-black-wired-ip-camera.html&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&appId=317980981630590"

        scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:auto; width:450px; height:30px">" </iframe>

<a href="https://twitter.com/share" class="twitter-share-button" data-via="FoscamUK">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><g:plusone size="medium"></g:plusone></div>


        </div>

Also a link to a product page (probably a bit more useful) : http://foscam-uk.com/foscam-fi8910w.html

Thanks a lot for your help.

Regards

Upvotes: 0

Views: 348

Answers (1)

C3roe
C3roe

Reputation: 96316

The combination of height and overflow on the iframe does not seem to work as you expected it to.

My suggestion: Embed the iframe into DIV element, and format that DIV element as follows:

<div id="foobar"><iframe …></div>

#foobar {
  height:   30px:
  overflow: hidden;
  position: relative;
  z-index: 1;
}
#foobar:hover {
  overflow: visible;
}

After that, the comment bar should show up over the twitter/g+ buttons.

But the “faces” of users that have already liked your page will then show up over the twitter/g+ buttons. I’d suggest you remove the parameter &show_faces=true from your iframe’s URL, since showing the faces will not really fit into the page layout you’re going for.

Upvotes: 1

Related Questions