I have a standard facebook plugin on my webpage. But though the size is specified, on various occasions (e.g. the PC is not logged in) the text overflows - ignoring the overflow:hidden. In simple words: it does not what it should do. Here goes the code:
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FKLARTEXT%2F207788969239606%3Fref%3Dhl&send=false&layout=standard&width=250&show_faces=false&font=verdana&colorscheme=light&action=like&height=30" scrolling="no" frameborder="0" style="border:none; align:"middle"; overflow:hidden; width:250px; height:30px;" allowTransparency="true"></iframe>
Any ideas?
Can you point us to some specific examples? There were some bugs recently causing social plugins to bleed over their divs. According to the bug tracker these should be fixed by now:
https://developers.facebook.com/bugs/500201816697073
https://developers.facebook.com/bugs/409142149161197
You can always help yourself by putting the social plugin inside another div with overflow:hidden:
<div style="overflow:hidden;width:300px;height:100px;">
<div class="fb-like" data-href="..."/>
</div>
Related
I have the following code:
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F%3Fref%3Dlogo%23%21%2Fpages%2FCadenamovitel%2F144895632232758%3Fref%3Dsgm&width=230&connections=10&stream=false&header=true&height=587" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:230px; height:587px;" allowTransparency="true"></iframe>
And when I try to navigate to the url that loads the iframe it works well. But when I put this iframe inside my webpage, the content is not loaded, I just get an empty iframe. The wierd thing is that if I change the page referenced by the like box, it shows correctly in my webpage. For example:
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F%3Fref%3Dlogo%23%21%2Fpages%2FMovistar%2F115204311836948%3Fref%3Dsgm&width=230&connections=10&stream=false&header=true&height=587" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:230px; height:587px;" allowTransparency="true"></iframe>
So I think it's a permissions related issue, but I couldn't find the option to allow it.
I found it! It was a demographic and an age rectriction in my page, and it seems that dissables the social plugins unless a facebook session is opened and match that criteria. Removing both restrictions allows the plugin to show correctly!
I have been trying to get a like box on a website that works for more than one browser (chrome) and I can't seem to make it work. I've tried FireFox, Safari, IE and nothing. I could get the default Like Box example to work no problem, but when I use the following code nothing:
<iframe src="https://www.facebook.com/plugins/likebox.php?id=114521595255240&width=292&height=300&show_faces=false&colorscheme=light&stream=true&border_color&header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:300px;" allowTransparency="true"></iframe>
I also tried:
<iframe src="https://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Forlaborersapprenticeship&width=292&height=427&show_faces=false&colorscheme=light&stream=true&border_color&header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:427px;" allowTransparency="true"></iframe>
I tried with http: and https:. I tried with & inplace of &any help would be greatly appreciated.
Thanks
Mike
Try doing this
<div class="fb-like-box"
data-href="https://www.facebook.com/yourfacebookpage"
data-width="462"
data-height="400"
data-show-faces="false"
data-colorscheme="dark"
data-stream="true"
data-border-color="#333333"
data-header="false">
</div>
Make sure the page is live and has content. If there are no active posts, browsers won't have any content to pull and so won't show the like box. Also, try coding the & to the full html code of &, that helped me.
I have the following code to show
<iframe src="http://www.facebook.com/plugins/like.php?href=[mySite]"
scrolling="no" frameborder="0"
style="border:none; width:170px; height:80px"></iframe>
which works great but I wanted to see if i could customize it to:
Not show which one of my friends like it. So instead of saying:
Joe Thompson and 100 other people like this
I just want it to say:
100 people like this
basically I am trying to fit this like button in a small area of real estate on the page adn I want to have more certainly around what will show up
Unfortunately there's no way to https://developers.facebook.com/docs/reference/plugins/like/ change that line of text to read specifically how you want. It can be removed all together yet still show the like count if you change layout to button_count. However with this option, iframe is not available to use, so you'll need to change over to XFBML or HTML5.
you can use this one just change [Enter Your Page URL] with your URL
<iframe src="//www.facebook.com/plugins/like.php?[Enter Your Page URL]&send=false&layout=button_count&width=100&show_faces=false&action=like&colorscheme=light&font=arial&height=21&appId=201523196612824" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
I have tried all three different options facebook lets you use when embedding a facebook like button but when I like a page it appears to have added the +1 but when I refresh the page the 'like' doesn't stay. It also doesn't appear in my timeline.
<div class="sm-facebook">
<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:100px; height:21px;" src="//www.facebook.com/plugins/like.php?href=http://mysite.com/blog/blog-post&send=false&layout=button_count&width=100&show_faces=false&action=like&colorscheme=light&font&height=21&appId=277475035619415"></iframe>
</div>
http://mysite.com/blog/blog-post is an invalid URL. I get nothing. Try it for yourself at https://developers.facebook.com/tools/debug. It has 1 critical, 1 error and multiple warnings. Fix those up and it should work fine.
I would like to integrate FB Fan-Box on my website. Everything works fine, except the height is not correct. For me, the important thing is not displaying the faces, but the stream. When I adjust the height parameter the whole frame gets bigger, but the layer with the stream in it remains still 300px. How can I set this to 900px, since I would like my visitors to see more activities on the stream?!
Here is my code:
<iframe
src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F
%2Fwww.facebook.com%2Fapps%2Fapplication.php%3Fid%3D200876329955648&width=800&
amp;colorscheme=light&show_faces=false&border_color&stream=true&
amp;header=false&height=900"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:800px; height:900px;"
allowTransparency="true"></iframe>
Thanks for the help!!!!
Try the HTML5 version, it may work better:
<div
class="fb-like-box"
data-href="http://www.facebook.com/platform"
data-width="292"
data-height="900"
data-show-faces="false"
data-stream="true"
data-header="false">
</div>
I've verified that it will go to 900 in height showing more stream items.
No it is not for my HTML 5 tag with 2000px
<div class="fb-like-box"
data-width="1100"
data-height="2000"
Facebook generate iframe height correctly, but inside the iframe
it explicitly set div to 300px... This is a very annoying bug
<iframe name="f36c389328" width="1100px" height="2000px"
<html>
..
<div class="phm pluginLikeboxStream" style="height: 300px"> <---
What is a point of having it configurable if it is defaulted to 300px on FB side?