Home » Odeon Blogs » Liviu, Agile Bear »

Facebook Like button

27 Apr 4

Facebook Like button

Facebook launched social plugins you can add to your site with just a few lines of HTML code. You can customize how much details should it display and the layout style from their interface.

This is how the code generated looks like:

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdevelopers.facebook.com%2F&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>

It is enough to get you started adding the plugin to your page.

Iframe Properties

All the details you select in that form are found in the src attribute of the iframe tag and you can change them directly from here, even the URL to like by changing:

href=http%3A%2F%2Fdevelopers.facebook.com%2F

to your URL:

href={{ hostname|iriencode }}

Separate Like button for each page

Creating a separate like button for each page will result in changing the same src attribute to something like:

href={{ hostname|iriencode }}{{ request.path_info|iriencode }}

Complete iframe code:

<iframe src="http://www.facebook.com/plugins/like.php?href={{ hostname|iriencode }}{{ request.path_info|iriencode }}&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>

How would this reflect on the Facebook profile?

The plugin will use the page's title tag to print it in the feed list like:

Liviu likes Article Title on Title Tag.

Customizing the FB feed

What if you want to use a different title for the page? It's easy, Facebook also provides custom meta tags for this:

* og:title - The title of your page; if not specified, the title element will be used.
* og:site_name - The name of your web site, e.g., "CNN" or "IMDb".
* og:image - The URL of the best picture for this page. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1.<meta property="og:title" content="Article Title"/>
<meta property="og:site_name" content="Your Site"/>
<meta property="og:image" content="http://path/to/image"/>

Adding the og:site_name meta tag also changes the feed to:

Liviu likes Article Title on Your Site.

The "Your Site" link is the domain where that page is hosted. Also, adding the og:site_name tag will affect direct link shares on FB site.

Using Facebook's Javascript SDK

If you already added Facebook's javascript SDK, you can use the XFBML tag

<fb:like href="{{ hostname|iriencode }}{{ request.path_info|iriencode }}" layout="standard" show_faces="true" width="300" action="like"></fb:like>

Category: Django

Discussion

James O'Donnel on May 02, 2010 - 2:03 said:

Don't you need Facebook Connect already implemented on the site before adding the Like button?
Liviu Chiributa on May 03, 2010 - 1:11 said:

Nope, like you can see I added it on my blog page too.
sweeti on Dec 15, 2010 - 7:36 said:

Hi,

How do I implement Face book Like Button in Android application.

pls help me in this regard.

thanks
Horia Dragomir on Dec 15, 2010 - 8:03 said:

sweeti, the like button lives in a webpage, so you need a WebView first, then you can just follow these instructions for the underlying webpage.

Facebook Like button