Can I use facepile with a Facebook Page?

Question

So I have a Facebook page setup. And I have an external website that I would like to use facepile on. The idea being that when somebody comes to my external website, they can see which of their Facebook friends has 'liked' the Facebook page.

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

The Facepile plugin displays the Facebook profile photos of people who have connected with your Facebook page or app.

So it looks like I can do it 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's 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 have

<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 code above is always talking about a Facebook app rather than a page. I would love it if somebody could tell me what I'm doing wrong!

UPDATE:

So to clarify:

What I want to do is to have Facepile display how many people liked my Facebook Page on an external website. It seems to me that something in the code that I insert into the external page needs to tell Facepile what Page it needs to get the likes from. And from the comments below it seems you do that in the data-href.

1. If so then what do I put in the app_id?

2. Do I need to register the external page as a facebook app to get the app id?

Auriculate

The code is talking about an application because Facebook wants to know what app is using what features of the SDK. The only place where you need to mention your page is within the context of the plugin. You already have this in the data-href attribute of the plugin's markup. – Minestrone

Secondly, you're not really asking a question here. You also haven't stated that there is any problem :P Is the plugin working? What is it displaying? – Minestrone

So what I think your saying is that I need to register my external page as a facebook app, and then use that registered app in the setup wizard where I get this code from? And then in the markup snippet I reference my Facebook Page and it should all work? – Auriculate

Please see updates for further clarification. This isnt really a "here is an error" problem, its more of a "the steps the documentation says I should take dont make sense to me, and Im pretty sure im missing something important". Combined with facebook told me to come here for support :( – Auriculate

Answer 1

So the answer is yes. You can use FacePile with a FaceBook Page. But you need to do some other things first.

You need to register your external page as a FaceBook App. You can do this here

https://developers.facebook.com/apps

and Create a new app. You need to specify what you want to do with the app, I found it easiest to say I wanted to login with Facebook (Note that this functionality doesnt need to exist on your site, you just need to specify for FaceBook). You add your external site URL under the "Login to Facebook" option in the "Site URL" and voila you have a facebook app at your external website url. You also then have a app id.

So when you go to

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

to get the code snippets you use the Facebook app your just created (there is a drop down box once you click the "get code" button or you can enter the number in the dialog) and the "URL" is the url of the Facebook Page that you want likes from. If you click the Get Code button you will get you some code snippets something like the following:

<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 those on your external page (after substituting the values) and facepile should work!

Hope this helps someone else!

Auriculate