CODEWITHSUNDEEP
cssfacebookfacebook-like
Ev.
Ev.

Reputation: 7589

Facebook Like Button iFrame too wide

I have put an a Facebook like button on my page.

To the right of the like button, is a Tweet button.

I've set the data-width of the like button (with the send button) to 101px, which seems about right.

The problem is that the like button generates an iframe that is 150px wide. This means there are about 49 pixels of the iframe overlapping over my Tweet button.

You can't see this overlap, but it means I can't click on Tweet!

It looks like the iframe is generated with inline styles, so I can't override them with css. I've also tried playing around with the z-index.

Any help would be great!

-Ev

Upvotes: 4

Views: 6855

Answers (5)

Ms. Nobody
Ms. Nobody

Reputation: 1219

Would be nice if u pasted your actual code or link to your site where u have the problem. Might be problem also with the div u are putting those buttons in.

This is example of mine Like button and it doesn't have any iframe. U might be using older version of the sample code or I don't know.

<div class="fb-like" data-href="http://www.website.cz/actualpage.html" data-send="true" data-width="450" data-show-faces="false" data-colorscheme="dark" data-font="trebuchet ms"></div>

As it was already linked in here. Don't forget to generate code from the official FB site - https://developers.facebook.com/docs/reference/plugins/like/ - Where u can also read about the actual tags in the code - set them as u need.

If that div doesn't work for u. Try making a div containing FB like button on left and Tweet on right by using the css float value.

Put both buttons in one div that should be block.

I guess it could look like this:

<div class="share">
 <div class="fb">/fb like code/</div>
 <div class="twitter">/twitter button code/</div>
</div>

CSS:

.share {
display: block;
}

.fb{
width: 101px;
float: left;
}

.twitter{
width: yourwidthpx;
float: right;
}

Anyway I think your problem is just that u use an iframe, which is not needed. Best would be if u paste your code so others can provide better help.

Upvotes: 0

Angela Giese
Angela Giese

Reputation: 77

I noticed there is an attribute on the like button that specifies how wide it should be. I set mine to 125 (I'm using the button count layout option) and it helps with floating the Tweet button and other sharing beside it. You can also specify the width when creating the button on the Facebook developers page.

<div class="fb-like" data-send="false" data-layout="button_count" data-width="125" data-show-faces="false" data-action="recommend"></div>

I used to use the overflow:hidden trick but now the like button has a little popup/tooltip that lets the user type in a comment to go with the like, and the overflow:hidden cuts that off so it's awkward and often unusable.

Upvotes: 1

Treb
Treb

Reputation: 395

Or put this JavaScript below the iframe. Because not much trumps an inline style you might as well change it once it's loaded.

<script> document.getElementById("iFRAME").style.width = "101px"; </script>

You'll need to find out the id of the iFrame

Upvotes: 1

Floyd Wilburn
Floyd Wilburn

Reputation: 1842

You can also wrap the like button in a div styled with width:101px and overflow:hidden, I believe that will do what you want.

Upvotes: 0

Rong Yong
Rong Yong

Reputation: 11

I think you find out the solution. what I did is wraping facebook button into and putting twitter button into then give twitter button a bigger z-index value. --html--

<body>
...
<div id="facebook_like">
  iframe code pasted here
</div>
<div id="twitter_share">
  iframe code pasted here
</div>
...
</body>

--css--

 #facebook_like{
z-index:0;
postion:absolute;
right:...;
}
 #twitter_share{
z-index:1;
postion:absolute;
right:...;
}

Upvotes: 0

Related Questions