sundh.com » Facebook

How to add Facebook like buttons to your tab

Ellen — Tue, 04 Jan 2011 16:06:32 +0000

Since late last year it is now possible to add Facebook Like buttons to Static FBML tab on your Facebook page. You can add as many as you like as long as the have a unique “xid” parameter for each like button. “returnurl” is the parameter for the URL you want users to like. The code for one like button looks like this:

// Code for my Like button

Showing only the Like button

Style sheet at the top has been added to hide elements which is included in the fb:comments set, this set displays Facebook’s comments functionality by default. Make sure to place the css above your FBML tags.

“.comment_body” displays the comments.

“.subtitle_left” displays a small Facebook icon with the text “Facebook social plugin” below the Like button.

Post to Facebook with Javascript SDK

Ellen — Tue, 21 Dec 2010 12:55:12 +0000

Posting a message to someones wall can contain the following parameters:

var my_message = ‘This is just a test!’;

var url = ‘http://www.sundh.com/’;

var title = ‘This is the name of my post’;

var desc = ‘Optional description of my link’;

var picUrl = ‘http://www.sundh.com/blog/images/led.jpg’;

To post the following to my wall this javascript code is executed:

FB.api(‘/me/feed’, ‘post’, {message:my_message,link:url,name:title,picture:picUrl,description:desc },

function(response) {

if (!response || response.error) {

alert(‘Error occured’);

} else {

alert(‘Post ID: ‘ + response.id);

}

});

If I decided to not define the parameter “description” the post will grab the text appearing on the URL.

Youtube clip

Posting a YouTube clip to someone’s wall requires a little bit different code in order to be able to play the YouTube clip within Facebook. Note that the URL to the YouTube clip is different from the URL shown in the browser when you watch the clip. Instead of “http://www.youtube.com/watch?v=VIDEO_ID”, it is set to “http://www.youtube.com/v/VIDEO_ID”. The thumbnail of the YouTube clips is easly retreived by accesing the URL “http://img.youtube.com/vi/VIDEO_ID/0.jpg”.

var my_message = ‘My message here’;

var url = ‘http://www.youtube.com/v/VIDEO_ID’;

var title = ‘Title of YouTube clip’;

var desc = ‘Description of YouTube clip’;

var picUrl = ‘http://img.youtube.com/vi/VIDEO_ID/0.jpg’;

The trick that makes the YouTube clip embeddable on Facebook is to add the parameter “source” in you API call to Facebook. The source is the same as the URL to the video clip.

FB.api(‘/me/feed’, ‘post’, {message:my_message,link:url,name:title,picture:picUrl,source:url,description:desc }, function(response) {

      if (!response || response.error) {

        alert(‘Error occured’);

      } else {

        alert(‘Post ID: ‘ + response.id);

      }

    });

The result looks like this:

Like button on dynamic urls

Ellen — Wed, 01 Dec 2010 10:02:26 +0000

I mentioned in the previous post how to sort your the number of likes of different URLS. In some cases you might wanna sort urls of the same domain to see the post popular post, the most popular product in your web shop or what have you. In order to have several Like buttons on one page each Like button needs to point to a unique URL, in many cases this is a dynamic URL generated to display the unique content.

For Facebook to recognize the dynamic page as a unique page it helps to set their meta tags:

<meta property="og:title" content="My dynamic title"/>

<meta property="og:type" content="article"/>

<meta property="og:url" content="http://www.mydomain.com/page.php?id=my_dynamic_url"/>

<meta property="og:image" content="http://www.mydomain.com/unique_image_for_the_url.jpg"/>

<meta property="og:site_name" content="My site name"/>

<meta property="og:description"content="My unique description for the dynamic url"/>

Proof test your URLs here: Facebook URL Linter

Get likes on urls from Facebook

Ellen — Tue, 30 Nov 2010 17:01:20 +0000

Sometimes you might wanna list things on your site order by the popularity on Facebook. It can also be a handy tool compare your different sites Facebook likes and get social stats from it. Facebook offer a very handy service to check this without being logged in to Facebook in any way. Check the service we use here. Facebook will retreive all Facebook likes, share count and total counts of these. For each link, it will display:

<link_stat>

<url>http://www.google.com

<share_count>295804share_count>

<like_count>153002like_count>

<comment_count>177545comment_count>

<total_count>626351total_count>

<click_count>265614click_count>

<normalized_url>http://www.google.com/

<comments_fbid>381702034999comments_fbid>

link_stat>

Get total likes on urls

With a loop in php we can get the information we need:

function getLikes($arr){
$urls="";
      // Add urls to check for likes

      for($i = 0;$i < count($arr);$i++) {

            if($urls != "") $urls .= ",";

            $urls .= $arr[$i];

      }
      // Retreive info from Facebook

      $facebookapi = "http://api.facebook.com/restserver.php?method=links.getStats&urls=" . $urls;

      $xml = simplexml_load_file($facebookapi);
      $likes = array();

      // Loop through the result and populate an array with the likes

      for ($i = 0;$i  < count($arr);$i++) {             

            $url = $xml->link_stat[$i]->url;

            $counts = (int)$xml->link_stat[$i]->like_count;

            $likes[] = array("likes" => $counts, "url" => $url);

      }
      return $likes;
}
// Array with links to the URLs we want to get number of likes from

$array = array("http://www.google.com","http://www.apple.com","http://www.facebook.com");

$likes = getLikes($array);
foreach ($likes as $key => $val) {

      echo $key . " => " . $val["url"] . " => " . $val["likes"] . "
";

}

Sorting the likes

After retrieving the likes, the array can be sorted by most popular url.

$likes= array_sort($likes,"likes", SORT_DESC);
foreach ($likes as $key => $val) {

      echo $key . " => " . $val["url"] . " => " . $val["likes"] . "
";

}

Download source

Add Facebook Connect to your blog comments

Ellen — Tue, 15 Dec 2009 10:09:08 +0000

This neat video explains how you can add Facebook Connect to your blog and let users add comments by logging into Facebook Connect! No server-side scripting needed!

Hooked on Café World?

Ellen — Tue, 08 Dec 2009 15:06:13 +0000

New to Café World? It is one of many games made by Zynga. The game can only be played on Facebook and you can invite your friends on Facebook. From today the game hs more users than Twitter and the number of users have rapidly increased over a week. Read more about it here!
http://www.insidesocialgames.com/2009/10/08/zyngas-cafe-world-goes-from-0-to-8-6-million-users-in-a-week-with-big-implications/

My cafe:

Café

Prefill Facebook private messages

Ellen — Sat, 24 Oct 2009 13:02:13 +0000

I just found this neat little feature on Facebook which allows you to send prefilled messages to a person on Facebook.

Fill in:

id (must be the number id)
subject (string)
message (string)

The whole link looks like this:

http://www.facebook.com/inbox/?compose&id=652519918&message=I%20am%20writing%20to%20you..&subject=Just%20checked%20your%20blog!