Getting the number of Facebook shares and/or likes of a URL


So…you want to display the number of times your url has been shared/liked on Facebook, but you don’t want to just use the Like Button with the count?  I don’t blame you, while I use the Like button when appropriate (and that IS the easiest way to get that number, it doesn’t help you at all when you want to do something a bit cool with the information, or display it in a unique format.

So, there are 2 ways currently to get an URL’s Facebook Shares.  You can make a query against the Facebook REST API and use the links.getStats method, or you can use the Graph API to make an FQL (Facebook Query Language) call.

The REST API is really easy to use, but unfortunately, it is deprecated, so Facebook could shut it off tomorrow if they wanted to.  Personally, I doubt it gets shut off, but don’t come crying back here if you use it and something stops working because they do.

To make a call using the REST API, using one of my more popular posts as an example, you can make a query to the following URL like so:

http://api.facebook.com/restserver.php?method=links.getStats&urls=http://www.local-pc-guy.com/web-dev/facebook-feed-dialog-vs-share-link-dialog

That will return a block of XML (yes, XML) that looks like this:

<links_getStats_response xmlns="http://api.facebook.com/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://api.facebook.com/1.0/ http://api.facebook.com/1.0/facebook.xsd" list="true">

    <link_stat>
        <url>
            http://www.local-pc-guy.com/web-dev/facebook-feed-dialog-vs-share-link-dialog
        </url>

        <normalized_url>
            http://www.local-pc-guy.com/web-dev/facebook-feed-dialog-vs-share-link-dialog
        </normalized_url>

        <share_count>22</share_count>
        <like_count>51</like_count>
        <comment_count>0</comment_count>
        <total_count>73</total_count>
        <click_count>0</click_count>
        <comments_fbid>468455836580018</comments_fbid>
        <commentsbox_count>0</commentsbox_count>

    </link_stat>

</links_getStats_response>

Then you’d just need to parse that returned XML into a usable format and grab the values that you want.  Generally you are going to want the total_count element, but sometimes you may want to differentiate between Shares and Likes.

Unfortunately, as mentioned, the REST API is deprecated, so if that concerns you, you can use FQL to query Facebook using the Graph API.

You can query the link_stat table with something like the following query:

SELECT 
    url, 
    normalized_url, 
    share_count, 
    like_count, 
    comment_count, 
    total_count, 
    commentsbox_count, 
    comments_fbid, 
    click_count 
FROM 
    link_stat 
WHERE 
    url="http://www.local-pc-guy.com/web-dev/facebook-feed-dialog-vs-share-link-dialog"

You can make a GET request to the Graph API and the Graph API will give you back a JSON response listing the fields you requested.

https://graph.facebook.com/fql?q=[QUERY]
https://graph.facebook.com/fql?q=SELECT url, normalized_url, share_count, like_count, comment_count, total_count, commentsbox_count, comments_fbid, click_count FROM link_stat WHERE url="http://www.local-pc-guy.com/web-dev/facebook-feed-dialog-vs-share-link-dialog"

The returned JSON should look like this, and is very easy to parse for the data you want.

{
   "data": [
      {
         "url": "http://www.local-pc-guy.com/web-dev/facebook-feed-dialog-vs-share-link-dialog",
         "normalized_url": "http://www.local-pc-guy.com/web-dev/facebook-feed-dialog-vs-share-link-dialog",
         "share_count": 22,
         "like_count": 51,
         "comment_count": 0,
         "total_count": 73,
         "commentsbox_count": 0,
         "comments_fbid": 468455836580018,
         "click_count": 0
      }
   ]
}

 

My recommendation is to go ahead and get comfortable with, and use, the FQL query syntax and the Graph API.  That way you are protected against the REST API going away and you get JSON, which is slightly easier to work with than XML.

Enjoy querying against Facebook, FQL is quite powerful and there is quite a bit of information you can get with a bit of digging through the docs.

Error using SquishIt and an Ektron control together


Earlier at work I ran into a conflict between SquishIt (which is a great utility for .Net for concatenating and minifying your CSS and JavaScript files, more info) and an Ektron control (Ajax HTMLEditor) that was included on a .Net ASPX page .  SquishIt was set in the MasterPage, so just removing it for that page wasn’t really an option.

The error I was getting was:

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Read more

Facebook Feed Dialog vs. Share Link Dialog


Facebook has 2 relatively simple ways to let you add share links to your website that you can style to match your website.  I don’t count the Like Button, which although easy to setup, doesn’t allow any customization of the button itself.

After the Like Button was introduced, the Share Link was originally deprecated by Facebook in an attempt to encourage people to use the Like Button or the Feed Dialog.  But, imagine my surprise earlier today, despite often telling people the Share Link using sharer.php was deprecated, to find a full documentation page explaining how to use it.  My best guess is that too many people continued to use it, so Facebook fixed some of the early inconsistent behavior and put up some official documentation for it.

The Feed Dialog was introduced around the same time as the Like Button, and remains a good way to control the specifics of a share post.  It is highly customizable and doesn’t rely on Open Graph tags on a page for it’s information.

Read more

Internet Explorer 9 & 10 CSS bug with overflow-y?


I ran into an interesting problem, maybe a bug, in Internet Explorer 10 (and IE9) today.  Basically, if I had the following styles applied to the HTML tag, and then collapsed sections of the page with JavaScript, the height of the page would not collapse along with the content, ending up with significant white space left at the bottom of the document after collapsing large page sections.  Removing either of the styles fixed the problem, but the combination didn’t work properly.

html { 
    height: 100%;
    overflow-y: scroll;
}

I tried various combinations of styles to fix it, but in the end I had to remove the overflow-y style with JavaScript before expanding or collapsing content, and then reapplying it after the animation is complete.   As the problem didn’t affect standard’s compliant non-IE browsers, I added a class during animation and only applied the style to remove the overflow-y property to IE9 and IE10.

Read more

Removing (Google) CDN version of jQuery from Html5 Boilerplate?


I recently added a pull request to Html5 Boilerplate to remove the use of the Google CDN for loading jQuery.  Little did I know that it would stir up some great debate about whether using a CDN, specifically the Google CDN, was the best practice or if concatenating and minifying your code into a single file is better.

The pull request was based on 2 things, 1 was a conversation Karen Ford (my co-worker) and I had with Alex Sexton at the jQueryTO conference in Toronto. The second was a very data-driven blog post Alex referenced by Steve Webster posted in late 2011 about Caching and the Google AJAX Libraries.  In that post, Steve points out that there is generally very little performance benefit from loading jQuery from the CDN due to the amount of fragmentation that exists in what versions of jQuery are being used in the wild.

Read more