Custom Facebook Fan Box Widget

Demo Download

ATTENTION!

09/01: Due to some changes recently done by Facebook (robots.txt and pipelining) this plugin is not functional anymore.


06/23 5:06PM: Looks like Facebook is going to keep “Disallow: /” in the robots.txt file. I came up with another plugin which will require some additional setup and PHP support on the server. Stay tuned, I will post update in few days. Yeah, forgot to mention, no more YQL – just your server and Facebook, FTW.


06/14 10:11AM: Facebook blocked all scraping engines (including YQL) yesterday using their robots.txt by making:

User-agent: *
Disallow: /

Bret Taylor, CTO of Facebook, released the statement on this here: http://news.ycombinator.com/item?id=1439695. Facebook, why would you do that?



06/14 9:52AM: The plugin stopped working again. YQL problems – Requesting a robots.txt restricted URL… Will investigate.


06/14 04:43PM: WE DID IT! IT WORKS NOW! PLUGIN IS FUNCTIONAL AGAIN AS WELL AS A STANDARD WIDGET

06/14 12:43PM: FACEBOOK DEVELOPERS PAGE FOR LIKE BOX WIDGET HAS AN UPDATED TEXT FOR WIDGET “See how many users already like this page, and which of their friends like it too” SOUNDS LIKE THE WIDGET BOX GONE FOREVER AND WILL BE WORKING WITH THE PREVIOUS FUNCTIONALITY ONLY TO SEE YOUR FACEBOOK FRIENDS WHO LIKED THE SAME OBJECT…

06/14: FACEBOOK HAS NOT COMMENTED YET ABOUT THIS ISSUE. I HAVE FILED A BUG REPORT HERE. WRITE YOUR COMMENTS THERE.

FACEBOOK CURRENTLY HAS SOME ISSUES WITH THEIR ‘NORMAL’ WIDGETS; THEREFORE, THIS PLUGIN DOESN’T WORK NOW. I WILL UPDATE YOU ON THE STATUS WHEN THIS ISSUE WILL BE RESOLVED!

Changelog

v.1.1
+ added a new option likeLink and functionality that allows to specify an element or elements that should perform action of a normal Facebook Like button (Facebook Login -> Like an object) a la Custom Facebook Like button (will be wrapped as a stand-alone plugin too)

v.1.0
Initial release. Base functionality

The Story

A few weeks ago I had the luck to work together on the same project with John Slabyk, Art Director/Creative Director for Barack Obama’s 2008 campaign for the President of the United States. The design mockups that I’ve got from John were pretty much similar to any political website he was designed. Except one thing – Facebook Fans Widget – it wasn’t the same as usually. John used his artistic talent to redraw it a little bit in a good way. Well, the project started in the beginning of the 2010 when Facebook had the fan widget, but now they do “like” buttons, so pretty much all fans are now considered as “likers”, but the idea behind widget functionality still the same as before – show total number of supporters and display a few random fans.

The Widget

The custom widget was not very complicated itself; however, Facebook doesn’t provide the way to modify widget’s look & feel rather than assigning a new CSS file to its iframe code. Some of you may say that they can do the widget modification by using only this CSS file – go ahead, I am not that crazy one.

Initially, I was trying to find some help in the Internet, but I had no success. Facebook doesn’t have a specific RSS feed of your fans/”likers” nor API access to the list of fans (see FQL section for another possible solution). My another attempt to find any other developed site, which was designed by John Slabyk, and already has a developed widget, but this cheating also wasn’t crowned with success. I had no choice other than developing the widget on my own.

Developing

To create a custom Facebook widget you’ll need the following things:

  1. Facebook API key – obtain one here
  2. Fan page ID – this is your page ID that you can get from page URL, e.g. http://www.facebook.com/pages/Andrew-Cuomo/38453090414
  3. jQuery 1.4.2 – download the script at http://code.jquery.com/jquery-1.4.2.min.js

In this tutorial I’ll show you how to get updated fan feed right into your site using YQL – Yahoo! Query Language is an expressive SQL-like language that lets you query, filter, and join data across Web services and do data scrapping! And it supports xPath too point to a necessary element or group of elements.

As an example, I’d like to use the Facebook page of Andrew Cuomo, current Attorney General of the State of New York (and a potential candidate for the governor seat, go Andrew!)

Step 1 : YQL

To get started go to http://developer.yahoo.com/yql/console/ and paste this query:

SELECT * FROM html WHERE url="http://www.connect.facebook.com/widgets/fan.php?api_key=xxxxxxxxxxxxxxxxxxxx&id=38453090414&connections=20" AND  xpath IN ( "//div[@class='connections_grid clearfix']/div","//span[@class='total']","//span[@class='name']")

Where:

  • xxxxxxxxxxxxxxxxxxxx is your Facebook API key
  • 20 is a number of profiles that we are going to retrieve (Facebook won’t allow you to get more than a hundred)
  • 38453090414 – fan page ID number
  • and the xpath selectors pointed to the container with profiles, span with the total number of likers, and span with the object’s name

We use JSON in this example because JSON is natively supported by jQuery; therefore, switch to JSON and click on TEST button. Also, delete cbfunc – callback function. If everything went fine, you should see the results below the query.

We need a URL below the results. In the example it is http://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20html%20WHERE%20url%3D%22http%3A%2F%2Fwww.connect.facebook.com%2Fwidgets%2Ffan.php%3Fapi_key%3D63cad7511106c1311ad6ac333805732f1%26id%3D38453090414%26connections%3D20%22%20AND%20%20xpath%20IN%20(%20%22%2F%2Fdiv%5B%40class%3D’connections_grid%20clearfix’%5D%2Fdiv%22%2C%22%2F%2Fspan%5B%40class%3D’total’%5D%22%2C%22%2F%2Fspan%5B%40class%3D’name’%5D%22)&format=json&callback=

Yahoo server returns a JSON string which looks like:

{
 "query": {
  "count": "22",
  "created": "2010-05-01T04:19:22Z",
  "lang": "en-US",
  "results": {
   "div": [
    {
     "class": "grid_item",
     "a": {
      "href": "http://www.facebook.com/delfim.heusler",
      "target": "_blank",
      "img": {
       "class": "img",
       "src": "http://profile.ak.fbcdn.net/hprofile-ak-sf2p/hs621.snc3/27337_750284100_5398_q.jpg"
      }
     },
     "div": {
      "class": "name",
      "p": "Delfim"
     }
    },

   ...

    {
     "class": "grid_item",
     "a": {
      "href": "http://www.facebook.com/chuck.lesnick1",
      "target": "_blank",
      "img": {
       "class": "img",
       "src": "http://profile.ak.fbcdn.net/hprofile-ak-sf2p/hs273.snc3/23223_1626042678_8613_q.jpg"
      }
     },
     "div": {
      "class": "name",
      "p": "Chuck"
     }
    }
   ],
   "span": [
    {
     "class": "total",
     "content": "2,099"
    },
    {
     "class": "name",
     "content": "Andrew Cuomo"
    }
   ]
  }
 }
};

Step 2 : jQuery plugin

The plugin has a few different options:

Key Default Description
showTotalNumber true Whether or not show the total number of the fans
fans 40 Number of fans’ pictures to display
api ’63cad7511106c1311ad6ac333805732f1′ Facebook API key (suddenly, Facebook returns the widget even without this key, but they probably track and can block you if you don’t use one)
objectID ’38453090414′ The most important option. Facebook object ID that you want to use.
likeLink ‘a.facebookPlus’ selector for an element or elements that will be used as a new ‘like’ button

Step 3 : How to use

First of all, since it is a jQuery plugin, you want to include the jQuery itself to your webpage if it hasn’t been included yet.

Add the following CSS code to your CSS stylesheet:

#facebook-widget {background:#f1f1f1; text-align: center; margin:10px; width:212px}
#facebook-widget .widget-inner {padding:0 24px}
#facebook-widget h2 {padding:0 0 10px; color:#003E84; font-weight:bold; font-size:12px }
#facebook-widget .facebookPlus {padding:0 0 0px; display: block}
#facebook-widget .number-friends {color:#7F8184; font:normal 11px Arial; text-align: center; padding:5px 0}
#facebook-widget ul#fans {padding:0 0 5px; margin:0; overflow: hidden; height: 100%}
#facebook-widget ul#fans li {width:52px; height:52px; float:left; margin:0 7px 6px 0; background:#fff; display:block }
#facebook-widget img {border:0}
#facebook-widget ul#fans li:nth-child(3n) {margin:0 0px 6px 0}

Include the plug-in and its initialization to your HTML code:

<script src="jquery.facebookWidget.js" type="text/javascript">
<script>
jQuery(function(){
  jQuery("#facebook-widget div.widget-inner").facebookWidget({
     fans: 9, 
     showTotalNumber: true, 
     objectID: '38453090414',
     likeLink : "a.facebookPlus"
  })
});
<script/>

Add this HTML markup to your page:


You may also want to change links and text in the markup if you aren’t working for the Andrew Cuomo campaign :]

FQL

After developing this plug-in I started looking another ways to achieve the same result but using Facebook native options. Google search pointed me to the very interesting manual for FQL – Facebook Query Language and particularly the Like table. Although FQL seems to be a more stable solution than YQL query to a widget, it requires more programming time because of required oAuth authentication and other tricks, but I’ll definitely dig more into FQL in future.

P.S.

Final version of the Cuomo campaign website won’t have this particular plug-in; however, it uses pretty much the same concept on the server level. I built the site using Zissou, a custom modification of the world-beater CMS Webiva by Pascal Rettig and his team. This CMS supports caching JSON and XML feeds for up to 20 minutes, and this functionality is important for this type of project. Due to high popularity of Cuomo’s site, we could easily reach limit of 1,000 YQL calls per hour; therefore I have implemented my idea in Zissou-native environment. Yeah, forgot to mention that the solution above depends on the Facebook team actions – they may change robots.txt to block Yahoo!Pipes scraper or change markup of the widget, so xpath selector becomes obsolete. Keep an eye on your widget and if something will be wrong, leave a comment here.

Tags: , ,

 
 
 

21 Comments

  1. Vijay2010-05-09 07:47:05

    You saved my life. I am also working on a fans site and facebook changed it overnight. Really greatful for this.

     
  2. Serj2010-05-29 02:16:02

    But.....you are losing the "Like" button functionality....the only thing this does is load the pics/title of your "Fans" Can this be modified to keep the Like button functionality...the point for me is them being able to like my company without having to leave my site......

     
  3. David2010-06-07 15:35:17

    Awesome, thanks dude.

     
  4. Christian Louboutin Shoes2010-06-09 04:13:46

    Was an interesting article, thank you..

     
  5. Andrei Zharau2010-06-09 07:22:35

    Hi Serj. Thank you for your feedback. It was very helpful to make a new version with functionality that you've described. Download zip archive with the plugin again, and post here any comments you may have.

     
  6. George2010-06-10 04:30:31

    Hi Andrei,
    This is a very beautful plugin. In the last 2 days a played with it and everything work well. However, today the plugin doesn't show the fan pics. I'd looked at your demo again , but it doens't show neither.

    Is this a facebook or yql error?

     
  7. Andrei Zharau2010-06-10 07:27:39

    Hi George,
    Thank you for heads up. It looks like a Facebook error, because standard like-box widgets stopped working too. They do not show a list of likers, only number and a like link. I hope that Facebook will fix this error soon without anu other side changes. I am currently working on integration jQuery and Facebook Javascript SDK, so very soon YQL step will be gone, but for now we should rely on both: Facebook and Yahoo.

     
  8. Andrei Zharau2010-06-14 20:54:11

    As of Monday June 14th 9:52PM, it seems like Facebook has fixed the bug with widget. The plugin is functional again!

     
  9. kaiko2010-06-17 20:37:17

    Andrei -

    Do you know if the API key generated for an 'admin' of a page is still valid.
    I am an admin on someone's page, but because I log into the page with my own personal login I am afraid that the API key gereated will be of my personal account - not the page I am trying to use this widget for?

    As long as I have the ID as the page - it should work, right?

     
  10. Andrei Zharau2010-06-17 21:20:18

    Kayko, I believe that the widget will work regardless of that specificity in API keys. I use it without any problems on multiple sites for different pages with the same API key that you should see as a default one in the plugin's code.
    Exactly, you need only page ID number. Facebook is well known for their dirty tricks with "privacy", so I think that very soon they will realize that many scripts like this plugin work without API authentication and close this hole. Hope it will help.

     
  11. kaiko2010-06-17 22:44:02

    Thanks so much for your response.

    I'll stay posted on your site for any possible Facebook 'shut downs'.

    ;)

     
  12. People Strange2010-06-19 00:15:56

    My friend, this is awesome... really like it, but again not work for me... fck! FB!

     
  13. People Strange2010-06-24 10:22:51

    Excelent!! I waiting for the new version dude! Regards

     
  14. Jack Starr2010-07-05 05:07:00

    Nice share...thanks dude,,

     
  15. Chriistelle2010-08-14 06:00:31

    Hi! Thank you so much for this post. Sounds nice, but don't work for me. Probably an other Facebook error.

     
  16. ganool2010-08-16 23:19:30

    how to customize background and text color?

     
  17. Albertux72010-09-20 15:49:28

    Hi very nice, but it's possible to create a custom facebook connect button?

     
  18. Andrei Zharau2010-09-21 21:32:17

    Sorry, but due to some changes recently done by Facebook (robots.txt and pipelining) this plugin is not functional anymore.

     
  19. Greg2010-11-10 07:38:14

    I'm looking for someone to code/design a custom like box.

     
  20. labi2011-03-26 09:22:46

    HOW CAN I ADD THIS GREAT WIDGET TO BLOGGER BLOGSPOT PLEASE MAKE IT FOR BLOGGER THANK YOU IN ADVANCED ANDREI :)

     
  21. labi2011-03-26 09:30:43

    I HOPE YOU MAKE A TUTORIAL HOW TO ADD THIS AMAZING WIDGET TO BLOGGER THANS AGAIN FOR YOUR TIME MISTER ANDREI.

     

Leave a Reply





 

0 Trackbacks

Trackback URL for this post:
http://o2v.net/blog/custom-facebook-fan-like-widget/trackback

0 Pings

Latest Blog Posts (read all)

  • JavaScript Promise

    Tweet Here is a quick JavaScript Promise implementation: https://github.com/natalan/Promise It comes with all features of jQuery Deferred (waterfall, parallel, or immediate ), but has much smaller footprint (~1Kb minified and gZipped). Fully tested and...

  • My another blog

    Tweet I have stopped writing my link round-ups shortly after I started them. There is a reason for – I’d like to separate the content that I create out of content that was created by someone else. About a month ago, I’ve started my another...

  • Links Roundup #2

    Tweet This week was very productive on different updates in the Web world. The most noticeable were: False Simplicity by Dmitry Fadeyev tells us about very common design mistake of using icon-only navigation approach. In Top 10 Handy Web Typography...