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?

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!