So I was doing something for work the other day where I was incorporating some Facebook social plugins. They wanted the Facepile, the Like button, the Activity Feed. All are very easy to implement. They do not require any type of Application for the generic install of the plugin. Facebook makes it even easier for one to add these because on the site, they provide a very nice interface to enter all the data in, and get the code. Those links are below:
Facepile – http://developers.facebook.com/docs/reference/plugins/facepile/
Like Button – http://developers.facebook.com/docs/reference/plugins/like/
Activity Feed – http://developers.facebook.com/docs/reference/plugins/activity/
Each item listed above is easy to integrate, and can be extended in its own way. if all you need is a quick implementation of this, then just go to the Facebook site, enter the data, grab the code and paste on the site. And you are done. Each item is a little different in how you can modify the plugin. A couple of examples I have created are found at:
http://www.hirdweb.com/examples/items.php
Really quick overview of the three:
Facepile
This one does not have a lot of other options available. This will show only your friends who have liked the same page/URL. It will not show all people, only your friends. If you do have an Application registered to Facebook, then you can enter the application ID to show who has connected to the application. The same principles apply, but the message displayed is a little different: “Friend Y has connected to Application Z”.
Like Button
This is the button, not the box, where you can have the Like or Recommend displayed. The nice thing about this button is that it can also be localized by passing the proper language locale set in the code.
<script src="http://connect.facebook.net/de_DE/all.js#xfbml=1"></script> <fb:like href="http://www.facebook.com/pages/Hirdweb/140356864345" layout="button_count" show_faces="true" width="450" action="recommend" font=""></fb:like>
And from my own experience, only one language can be displayed on the page. In the example, I created iframes for each button using the XFBML on each page. And to maximize the effectiveness of the Like button, make sure to complete the Open Graph Tags to help tag the site. In my example, all are pointing to the Hirdweb Facebook Page. Using the Open Graph will also help when the user shares the page, add comments when they like the page, etc. It can also help to grab data on the page, and make sure to read up on the Open Graph API.
Using the XFBML you can also do some other items when a user clicks the button, using the JS API. In my example, I am just using as very simple pop up alert box. To do this, you must be using the Javascript SDK/XFBML implementation of the Like button. This is captured by the Event.subscribe method, passing the param of edge.create.
<script>
FB.Event.subscribe('edge.create', function(response) {
// do something now that they like the page
alert("Thank You for liking this page");
});
</script>
Activity Box
Much like the Facepile, this one is easy to implement, using XFBML or iframe. Like all other social plugins, this one can be modified for the locale if you add the correct language locale in the code.
script src="http://connect.facebook.net/sv_SE/all.js#xfbml=1"
. This plugin also has the ability to track what plugin generated the activity on your site. By adding the ref variable in the FB tag, it will track this.
And just in case you forgot, here is the link to the examples:
http://www.hirdweb.com/examples/items.php