How To Add Facebook Facepile Plugin To Any Webpage

Have you been to someone’s site and seen a section with your friends’ Facebook profile pictures? The Facepile plugin may have been responsible.

In this tutorial, we will show you how to add the “friends like” portion of this social plugin to html pages and in WordPress

You will need:

- A Facebook Account
- HTML Website or self hosted WordPress, installed
- HTML editor (only for HTML pages)
- Access to Theme Templates or Widgets (WordPress only)
- Active App ID (optional)

Note: If your site uses html pages, you’ll need an html/text editor such as CoffeeCup HTML editor or Notepad ++ (Microsoft OS). For WordPress, you will need a widget ready theme.

Step 1: Decide where to put the Facepile images.

Facepile is a versatile social plugin that you can add almost anywhere on your site. Depending on how many images you want to show, the best placement option may be in your sidebar.

To make things easier, we’ll show you to display your “Facebook Page likes” or “website likes”.

Step 2: Create your Facepile code.

Begin by going to the Facepile plugin page. In the code generator, you will create your “likes” code. You may choose to enter a Facebook page or a page on your website.

For a Facebook page:

- Add the Facebook page URL
- Add the width of the plugin
- Add the number of rows
- Click the “Get Code” button

Note: Facebook pages that don’t have a custom page URL, as seen above, will look something like http://facebook.com/pages/your-page-name/numbers.

For a website page:

- Add the website page URL
- Add the width of the plugin
- Add the number of rows
- Click the “Get Code” button

Note: If you will be adding the Facepile plugin to the sidebar, you may want to increase the number of rows.

When adding Facepile to the main content area of your page, for instance under a post, you may want to increase the width and keep the number of rows low.

Copy and paste your code choice into a text file for later use. Both codes produce the same results – the images of the viewer’s friends who have liked your page. Click “Okay.”

If you are a bit more tech savvy and already have in place the additional codes required, you may choose to show the viewer’s friends who have signed up for or connected with your page by using your app id and this example code.

Copy and paste the code of your choice into a text file for later use.

Note: According to the Facepile note, this parameter is only available in the iframe version of the Facepile. If you are using the XFBML version of the plugin, specify your application id when you initialize the JavaScript library.

Step 3: Add the code to your HTML page or sidebar.

In our first example, we add the iframe code to an html page after a post. Notice that we have increased the plugin’s width from 300 pixels to 500 pixels to coordinate with the body’s larger width.

We have also added a break before and after to allow for spacing.

To do this, simply open your page in the HTML editor and scroll to the area below your content. Insert the iframe code. Save your page and upload it to your website.

Make sure you view the website and test the plugin to make sure that it’s working correctly.

Step 4: Add the facepile code to your WordPress sidebar.

To add the code to your WordPress sidebar, you will need to add the iframe code into a widget or in the theme. We will be adding it to a widget.

Simply login to your dashboard and select “Widgets” found in the Appearance section of your admin toolbar.

Open your sidebar on the right and drag the text or php widget into the appropriate area. Open the new widget in the sidebar and add your iframe code.

Click on the “Save” button.

Check your Facepile plugin by opening a page in a new tab. When seeing the plugin from a viewer’s perspective, you may need to alter the sidebar width or row number.

Just go back to your widget and edit the width (in two places) and/or the number of rows. If it appears correctly, click “Save”, “Close”, and log out.

Now when viewers see their friends “like” your page, they will be tempted to “like” it too!

facepilefacepile examplefacebook facepilefacepile facebookhow to use facepilefacepile pluginfacebook facepile examplefacepile for wordpressfacebook facepile examplesfacepile urlwordpress facepile pluginhow to install facepilefacebook facepile not workingfacebook facepile for wordpressfacebook facepile tutorialfacepile samplehow to add facebook stream to bloggerhow to add facepile to bloggerhow to add facepile to websitetutorial facepilefacepile widget wordpressfacepile app idfacepile tutorialdisplay friends facebook friends on wordpressfacepile examplesadding facebook facepilehtml for facebook login widget in indiahow to ad a live facebook streem in bloggerwordpress facebook facepilefacepile wordpresshow to set up facebook social widgts wordpresswordpress facepilefacebook like widget sidebar on websitehow to put facebook social plugin on your sitehow to add face book friend list in wordpress sidebarhow to insert facepilehow to install facebook like button to my wordpress websitehow to put facepile on my pagehow to show facebook faces in wordpresshow to install facebook like box on websitehow to put facepile on my web sitehow to put plugins in my bloghow to insert facebook face pile in bloghow to insert facebook like in our homehow to setup facepilehow to set up facebook stream widget wordpresshow to insert facebook wiget into wordpress site?how to install a plr to my web sitehow to install facebook facepilehow to install facepile pluginhow to set facepile in my pagehow to put facebook pluginhow to put facebook comments on blogspothow to put a facebook plugin on websitehow to put a click like to see facebook profilehow to plugin facebook facepilehow to make facepile in websitehow to put facebook friend on my websitehow to make facebook like box with faces like wordpress on blogspothow to put facepile on bloggerhow to integrate facipilehow to put facepile on facebook pagehow to integrate facepile plugin in my blogspot websitehow to make facebook plugin in website add as friendhow to integrate facepilehow to integrate facebook like button wordpresshow to install my facebook information on blogspothow to install facepile plugin on my facebook pagehow to put facebook freind in wordpresshow do i display just the text in the facepilehow to add a facepile on your facebook pagehow to add a find us on facebook button and codehow to add facebook facepile for wordpresshow to add facebook facepile for wordpress 2011how do i add facepile to my wordpress sitehow to add facebook facepile to web pagehow to add facebook facepile to wordpresshow to add facebook plugin to our pagehow to add facebook profile on bloggerhow to add facebook profile to bloggerhow to add a facepile of your pagehow to add a facebook stream to my wordpress website simple facebook connecthow do i edit html on facebook to install pluginhow do i insert facepilehow do i put the facebook facepileHow do i see my facebook friends on my wordpress websitehow do i us facepile to show all people that like my website?how do you use the facebook facepile?how does facepile workhow insert facebook friends list in php htmlhow to add a facebook plugin in htmlhow to add a facebook stream to my wordpress websitehow to add facebook social widget to websitehow to add facepilehow to embed facebook stream to wordpres pagehow to embed facepilehow to embed iframe in facebook statushow to embed like box on website that shows the number of likeshow to facebook pile wordpresshow to facebook stream on my web page

Related posts:

How To Add Facebook Comments To Any WebpageHow To Add A Facebook Like BoxHow To Add Facebook Activity FeedHow To Add A Facebook Recommendation BoxHow To Add Facebook Like Button

View the original article here