Abelski Facebook Plugins Demo Page

This web page includes simple demonstration for using the facebook social plugins. Each plugin is demonstrated using two different approaches. The first is the simple HTML iFrame option. The scond is the XFBML option. Some of the facebook social plugins can be embedded using XFBML only.

You can find slides and video clips that provide more information about how you can use the facebook plugins at www.abelski.com.

More information about professional training for facebook applications development can be found at www.xperato.com.

In order to use XFBML we must first import the Facebook JavaScript SDK. We can do it using the following code:

<div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true}); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; document.getElementById('fb-root').appendChild(e); }()); </script>

Facebook Like Button

The like button allows users to share pages from our web site back to their Facebook profile. Pressing the like button the user will be directed to his facebook account and will be allowed to add a textual remark together with URL addres.

The XFBML Way

The HTML Way

Recommendations

The recommendations plugin shows recommendations made by other users for the domain the recommendations plugin refers to. By default, the recommendation plugin refers to the domain to which the web page belongs.

The XFBML Way

The HTML Way

Login Button

The login button plugin shows a button that users can click to login into your web site using the facebook platform, together with profile photos of those user's friends who have already signed up to your web site. Getting the login button is feasible using XFBML only.

The XFBML Way

Comments

The comments plugin allows the user to post comments to his wall about the content of the URL address the comments plugin refers to. Getting the comments button is feasible using XFBML only.

The XFBML Way

Facepile

The facepile plugin shows the profile pictures of the user's friends who have already signed up to our web site. Getting the comments button is feasible using XFBML only.

The XFBML Way

Like Box

The like box plugin refers a specific facebook page. In order to use this plugin we should first set up a facebook page. The like box allows users to see how many users already like the page, who from their friends like the page, read the recent posts of that page and post on their wall a message saying they like that page. Getting the like box is feasible using XFBML or HTML.

The XFBML Way

The HTML Way

Activity Feed

The activity feed displays the most interesting recent activity taking place on the web site it refers to. The activity this plugin displays include stories such as when users like specific content on the web site and when users share content from the web site on their wall. If the user is logged into facebook the activity feed will be personalized and will highlight content coming from his friends. We can set the recommendations param to true and get the plugin split in half, showing friends activity on top and recommendations on the bottom. Each activity feed refers a specific web site. It doesn't have to be your own web site. The activity feed cannot aggregate content coming from multiple domains and/or from multiple sub somains, even if they belong to the same domain. We can get the activity feed on our web site either using XFBML or HTML. Both options are available.

The XFBML Way

The HTML Way

Live Stream

The live stream plugin allows users that visit your web site to share activity and comments in real time. We can use live stream for real time events such as speeches, webcasts, webinars and even massively multiplayer games.