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?
Related
I'm adding social buttons for every post link in a web site where some post links are shown at once.
The problem is that sometimes some buttons are not shown and keep waiting for a response. I've tried with some browsers and computers and it's happening sometimes with any of them.
I'm adding the buttons like this:
<div class="social">
<div class="twitter">
Twittear
</div> 
<div class="facebook"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&layout=box_count&action=like&colorscheme=light&locale=es_ES" scrolling="no" frameborder="0" style="height:62px; width:74px" allowtransparency="true"></iframe></div>
<g:plusone size="tall" href="<?php the_permalink() ?>"></g:plusone>
</div>
This is the web page: http://nosabesnada.com/ultimas-noticias/
Any idea of why it is sometimes happening and how to solve it?
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 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>
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.
How come the Share and Like button have the same count?
I just implemented the Like button today and should only have around 2-3 likes.
You can see my problem here: http://www.norwegianfashion.no/news/ofw-forbids-fur-on-the-catwalk/
The code I use is this:
<div class="share">
<div class="face_share">
<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class="face_like">
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=button_count&show_faces=false&width=130&action=like&colorscheme=light&font=arial" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:130px; height:20px;"></iframe>
</div>
<div class="twitter">
Tweet<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</div>
Both functions are doing the same thing now:
Share is still an option, however we merged the external count so that
the count represents total
interactions with the URL.
Additionally, ‘like’ still gives you the ability to publish an image
when a comment is added (through the
XFBML version).
Source.