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

Question

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 attribute, 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.

Answer 1

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/

Answer 2

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.