开发者

How to change height of activity stream for Facebook Like Box social plugin

i am using like box of facebook, the default size of the like box with stream only is 395px as in the code below,

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=200&amp;colorscheme=light&amp;show_faces=false&amp;stream=true&amp;header=false&amp;height=395" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:395px;" allowTransparency="true"></iframe>

But my required height is 200 px, but when i set the height attr开发者_如何转开发ibute, footer of the social plugin goes up(mean height got set). But the Problem is that when i scroll the page, i cannot see the scroll bar after the adjusted height.


You can NOT apply CSS to HTML that is loaded in an iframe, unless you have control over the page loaded in the iframe.

In this case FACEBOOK only let you change these Attributes:

href, width, height, colorscheme, show_faces, stream, header, border_color, force_wall.

The height: Is the height of whole box in pixels. The default height varies based on number of faces to display, and whether the stream is displayed. With the stream displayed, and 10 faces the default height is 556px. With no faces, and no stream the default height is 63px.

http://developers.facebook.com/docs/reference/plugins/like-box/


Use the following code that uses a div instead of an iframe to setup the Facebook Like Social Plugin.

<script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=##ENTERAPPID##";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

<div class="fb-like-box" data-href="https://www.facebook.com/##FACEBOOKPAGE##" data-width="570px" data-height="750px" data-colorscheme="light" data-show-faces="false" data-header="true" data-stream="true" data-show-border="true"></div>

Replace anything within the HASH TAGS ## with your Facebook account information. To adjust the height change the data-height attribute.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜