Add facebook fan picture on website

Social Media
1

Hello all

I want to add facebook fan picture on my website, but the code what i am getting form various site, that only showing picture when i login to my account but when i logout, then it showing only like button, not showing picture.

I want to show just like http://www.espncricinfo.com/. In bottom and right panel there is fan pic of this page.

Please help with solution.

2

ESPN is using the “Like button” plugin from Facebook. You can find it here: http://developers.facebook.com/docs/plugins/.

3

thank you brother, but i need not only like button, but also fan pic.

4

Have you looked at the link I gave you?

The plugin, “Like button”, displays not only a like button but also a few profile pictures from your fans. Thats what you’re looking for, correct?

5

Haha I think he don’t check the Link. Here’s the more detailed link. http://developers.facebook.com/docs/reference/plugins/like-box/ your fan page picture and likers picture was presented in that plugin.

6

Thanks brother TheRaptor and mackyanderson

But bed news is that i am really not understanding this one

I have used code that i have given bellow:

<div id=“fb-root”></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ’ ', // App ID
channelUrl : ‘WWW.YOUR_DOMAIN.COM/channel.html’, // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});

// Additional initialization code here

};

// Load the SDK Asynchronously
(function(d){
var js, id = ‘facebook-jssdk’, ref = d.getElementsByTagName(‘script’)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(‘script’); js.id = id; js.async = true;
js.src = “//connect.facebook.net/en_US/all.js”;
ref.parentNode.insertBefore(js, ref);
}(document));
</script>

here what will be app id and channelUrl, i don’t know.

Then i used this code

<div id=“fb-root”></div>
<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=391521254221781”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

And after that

<div class=“fb-like-box” data-href=“http://www.facebook.com/takecareoflife” data-width=“292” data-show-faces=“true” data-stream=“true” data-header=“true”></div>

all code i used under body section

what is my mistake

7

If you didn’t fill in the variables it won’t work. Without knowing your app / site, facebook can’t tell who is a fan to show anything back.

If you don’t have an app and are installing code that uses one, you will need to create one (for free) at www.facebook.com/developers although most plugins do not require this.

Although in your second code snippet you are showing the appID 391521254221781

8

thanks Ted S.

what will be channelUrl
and
what is wrong with my code

Now my code is

<body>
<div id=“fb-root”></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ‘391521254221781’, // App ID
channelUrl : ‘WWW.YOUR_DOMAIN.COM/channel.html’, // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});

// Additional initialization code here
};

// Load the SDK Asynchronously
(function(d){
var js, id = ‘facebook-jssdk’, ref = d.getElementsByTagName(‘script’)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(‘script’); js.id = id; js.async = true;
js.src = “//connect.facebook.net/en_US/all.js”;
ref.parentNode.insertBefore(js, ref);
}(document));
</script>

<div id=“fb-root”></div>
<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=391521254221781”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

<div class=“fb-like-box” data-href=“http://www.facebook.com/takecareoflife” data-width=“292” data-show-faces=“true” data-stream=“true” data-header=“true”></div>

</body>

9

Your best bet is to read the documentation on the page. This will answer 90% of your questions and if you have some specific needs you can ask them. Replying for every detail is simply not an effective use of your time.

10

according there instruction i used everything.

i think in this forum i can get solution why my code not working

11

The instructions ask for a channel url. Without that you have not completed customizing the code.

Details for that file are posted on the page.