retrieve facebook like box dynamically

StackOverflow https://stackoverflow.com/questions/6304193

Question

I am creating a web app, similar to the like box code from Facebook: http://developers.facebook.com/docs/reference/plugins/like-box/.

When users paste it in web application they should be able to get the like box including feeds if they have selected the stream, while generating the like box code.

I have used following code to do this; but the problem is I am not able to retrieve the pictures of the users who liked the page.

How do I retrieve their profile information?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Facebook Feeds</title>

<script type="text/javascript">
function getPage()
{
    var getCont=document.getElementById("txarea").value;
    document.getElementById("getContent").innerHTML=getCont;
}
</script>
</head>

<body>

<input type="text" id="txarea" />
<input type="button" id="fbBtnClick" value="Click" onclick="getPage();"></input>
<div id="getContent">
</div>

</body>
</html>
Was it helpful?

Solution

So I have tested this out and the following seems to be the problem:

The height of the iframe is being set to 427px by default the pictures are loading but are hidden becuase the height of the iframe is not long enough

By default facebook gives the following:

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

Changing that too:

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

Will show the pictures.. So I think you will have to take input from your users and then change the height then set it.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top