Can I use facepile on a Facebook page?

Question

So, I have a page setup on Facebook. And I have an external website where I would like to use facepile. The idea is that when someone comes to my external website, they can see which of their Facebook friends “liked” on the Facebook page.

I went here https://developers.facebook.com/docs/plugins/facepile/ and he says

The Facepile plugin displays Facebook profile photos for people who are associated with your Facebook page or application.

So, it looks like I can do this with my Facebook page.

I found the following code

<script> window.fbAsyncInit = function() { // init the FB JS SDK FB.init({ appId : '12345667809845', // App ID from the app dashboard status : true, // Check Facebook Login status xfbml : true // Look for social plugins on the page }); // Additional initialization code such as adding Event Listeners goes here }; // Load the SDK asynchronously (function(){ // If we've already installed the SDK, we're done if (document.getElementById('facebook-jssdk')) {return;} // Get the first script element, which we'll use to find the parent node var firstScriptElement = document.getElementsByTagName('script')[0]; // Create a new script element and set its id var facebookJS = document.createElement('script'); facebookJS.id = 'facebook-jssdk'; // Set the new script source to the source of the Facebook JS SDK facebookJS.src = '//connect.facebook.net/en_US/all.js'; // Insert the Facebook JS SDK into the DOM firstScriptElement.parentNode.insertBefore(facebookJS, firstScriptElement); }()); </script> 

and then further down i

 <div class="fb-facepile" data-app-id='12345667809845' data-href="http://facebook.com/myfacebookpage" data-action="like" data-max-rows="1" data-colorscheme="light" data-size="medium" data-show-count="true"></div> 

(important URLs and numbers changed to protect the innocent)

As you can see, the above code always talks about the Facebook app, not the page. I would love it if someone could tell me what I'm doing wrong!

UPDATE:

So, to clarify:

What I want to do is show Facepile how many people liked my Facebook page on an external website. It seems to me that something in the code that I embed on the external page needs to tell Facepile on which page he needs to get similar ones. And from the comments below it seems like you are doing this in data-href.

• If so, what do I put in app_id?

• Do I need to register an external page as a facebook application in order to get the application id?

Answer 1

So yes. You can use FacePile on your FaceBook page. But first you need to do something else.

You need to register your external page as a FaceBook application. You can do it here.

https://developers.facebook.com/apps

and create a new application. You need to specify what you want to do with this application, it was easier for me to say that I wanted to log in with Facebook (note that this function should not exist on your site, you just need to specify for FaceBook). You add your external website URL in the “Facebook Login” section of the “Website URL” and you have the facebook application on your external website. You also have an application id.

So when you go to

https://developers.facebook.com/docs/plugins/facepile/

to get the code fragments that you are using the Facebook application you just created (there’s a drop-down box after clicking the “get code” button or you can enter a number in the dialog box), and “URL” is the URL of the Facebook page that you want to love. If you click the "Get Code" button, you will get a few pieces of code like this:

 <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=<YOUR_APP_ID_HERE>"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script','facebook-jssdk')); </script> 

and

 <div class="fb-facepile" data-href="http://facebook.com/<YOUR_PAGE_URL_HERE" data-max-rows="1" data-colorscheme="light" data-size="medium" data-show-count="true"></div> 

Put them on your external page (after substituting the values) and facepile should work!

Hope this helps someone else!