While searching for a solution that would let me add the "Like" button plus the ability to leave a comment on the "Liked" item (see picture on the left), I finally found the solution that I share bellow. Just follow exactly the next instructions and that's it.
Technique 1
With this technique, you'll get a like button where someone can add a comment to the liked item. Instead, if you want to have this like button and a comment form, see bellow the technique 2.
Note: If you prefer not using the Facebook API, just have a look here.
First, set up a new application:
1. Go to: http://www.facebook.com/developers
2. Click on the + Set Up New Application button (at the top right of the page)
3. Type your Application Name (example: Mysite-Name Likes) > select Agree > click on Create Application
4. Go to the Connect tab (on the left tabs-list)
5. Enter your site url with an ending slash in Connect URL and click on Save Changes (for example: http://mysitedomainname.com/)
6. You will see your Application ID number (below your app API & Secret)
7. It will take between 2 to 20 minutes until it will be ready to use with.
Second, remove any old Facebook script, for example:
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
<script type="text/javascript">
FB.init("123456789000000000","/xd_receiver.htm");
</script>
Or whatever script code of facebook that you got in your page.
(only remove the JavaScript, not the fb: tags)
The setup steps:
1. Add this attribute to your <html> tag:
xmlns:fb="http://www.facebook.com/2008/fbml"
so in the end your <html> tag will look like this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en" lang="en">
2. Add this code right after the <body> tag:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
Change 'YOUR APP ID' with your application ID number, not the API like was before in the old version.
3. Go here and set all the attributes you want in the demo, then click on 'Get Code' and copy the XFBML version from the popup window.
Remember to add http:// at the beginning of your url.
4. Drop your <fb:like href="http://yourdomainname.com/your-page-name"></fb:like> tag where you want in your page. (but it must to be somewhere after (below it, not need to be right after) the code in step#2, and not before it)
NOTE 1: to use in a blogger blog, the above code should look like:
<fb:like expr:href='data:post.url' ></fb:like>
This allows you to have individual likes for each post.
NOTE 2: If you prefer that your button says "Recommend" instead of "Like", use this code instead (adapted for blogger):
<fb:like action="recommend" expr:href='data:post.url' ></fb:like>
5. Set the Open Graph protocol meta-tags:
you need to add some new facebook meta-data tags called Open Graph
From this page:
To customize how your site shows up when users share your page with the Like button, you can add meta data to your web pages:
• 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.
For example if you are creating a page about the movie 'The Rock' you would include this meta data:
<meta property="og:title" content="The Rock"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
6. Your page must have a document type tag at the most beginning of it (above <html>) if you do not have one:
For HTML add this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
For XHTML add this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Or just this:
<!DOCTYPE html>
DONE!
Technique 2
If you are interested in having the Facebook comments box and the like button (with the option to add a comment to the liked item), use instead the following tutorial (copied from Full: Comments-box + Like-button + Language). You'll get something like this:
First, set up a new application:
1. Go to: http://www.facebook.com/developers
2. Click on the + Set Up New Application button (at the top right of the page)
3. Type your Application Name (example: Mysite-Name Comments) > select Agree > click on Create Application
4. Go to the Connect tab (on the left tabs-list)
5. Enter your site url with an ending slash in Connect URL and click on Save Changes (for example: http://mysitedomainname.com/)
6. You will see your Application ID number (below your app API & Secret)
7. It will take between 2 to 20 minutes until it will be ready to use with.
If you update from the old comments-box version so:
1. Remove:
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
2. Remove:
<script type="text/javascript">
FB.init("123456789000000000","/xd_receiver.htm");
</script>
3. Then you just stay with your <fb:comments> tag, and the xmlns:fb=http://www.facebook.com/2008/fbml.
4. Follow the steps for the new version below!
The new version setup steps:
1. Add this attribute to your <html> tag:
xmlns:fb="http://www.facebook.com/2008/fbml"
so in the end your <html> tag will look like this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en" lang="en">
2. Add this code right after the <body> tag:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
Change 'YOUR APP ID' with your application ID number, not the API like was before in the old version.
3. Drop your <fb:comments xid="xxxx" url="http://yourdomainname.com/your-page-name"></fb:comments> tag where you want in your page.
(but it must to be somewhere after (below it, not need to be right after) the code in step#2, and not before it)
NOTE: to use in a blogger blog, the above code should look like:
<fb:comments xid="xxxx" expr:url='data:post.url' ></fb:comments>
4. THE ATTRIBUTES
Go here and check all the attributes you can use.
XID: You better use the xid attribute:
1. Otherwise if you will make a change to your page url,
then all the comments that where on that page will be gone.
2. This is the only way you can add 2+ coments-boxes on the same page for individual items.
3. This is the only way you can show the same comments-box on 2+ different pages.
Because of all these reasons it's kind of making the XID as a "must" attribute, so go and add it!
URL: You better use the url attribute, otherwise visitors who will click on the link from the post on the facebook live stream, they may be redirected to the wrong page. Let's say if you got a website with 2 pages "home" and "news", then you present the latest news article from the 'news' page on your 'home' page, and you let visitors to comment about that article from the 'home' page too, then if you didn't use the right url with the url attribute, your visitors will be directed to the 'home' page and not to the specific news article page they friend commented on. And just the same thing will happen if a visitor click on the Like button that come with the comments-box. So this attribute helps to set correct the comments-box & the Like button that comes with it.
TITLE: use the title attribute so - when a visitor post a comment and that comment will show up on the visitor facebook profile page, then It will present that the comment posted in the page/article with that title you specified in the attribute.
Set or remove the Like botton:
(that comes with the comments-box above it)
Set the Like button - Open Graph protocol meta-tags:
For making the Like button to present your site content (the one that the visitor liked),
you will need to add some new facebook meta-tags called Open Graph
From this page:
To customize how your site shows up when users share your page with the Like button, you can add meta data to your web pages:
• 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.
For example if you are creating a page about the movie 'The Rock' you would include this meta data:
<meta property="og:title" content="The Rock"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
Remove (Hide):
To hide the Like botton, you will need to add 2 attributes and create a CSS file.
1. simple="1"
2. css="http://yoursitedomainname.com/fb_comments.css"
<fb:comments xid="xxxx" url="http://yourdomainname.com/your-page-name" simple="1" css="http://yoursitedomainname.com/fb_comments.css"></fb:comments>
in the css file add this style code:
div.like {display:none;}
(You can learn more about these and other attributes here)
Everything looks like it's working but when I "like" it I get this error:
"The page at http://www.todaysgiveaway.net/2010/05/abc-neckties-review-and-25-gc-giveaway.html could not be reached."
This is a working page and should be working correctly.
I'd love to get this working properly can you tell me what needs to be fixed? Thank you!
Hi,
I just went to your page. It's funny because in Firefox it works but with Chrome it doesn't. I had a similar problem the first time I tried this and I found out that I hadn't follow exactly the tutorial steps.
So I would suggest that you review the given steps of technique 1 (that's the one I think you have implemented).
Feel free to drop me a line with your progresses.
Cheers,
Jorge
Hey,
Do you know of any way to change the 'Like' button to 'Recommend'
If not, I suppose I'll just have to hide the like button, but since I don't really know anything about CSS or HTML, I might need some more advice on the creation of a CSS file.
Thanks!
Hi Andrew.
I updated the post to answer you that. See note 2 above in technique 1.
Have also a look here if you don't want to use the FB API:
How to Add Facebook's New "Like" Button to Blogger
Sorry... I should've been clearer...
I was asking about changing the 'Like' button to 'Recommend' specifically in the comments box. I'd like to move the comments system on my website (http://news.forensicanthro.eu) over to Facebook, but 'liking' some of the news items on that website might not be too appropriate... 'Recommend' is a much more suitable verb.
Maybe I'm being fussy, but I wouldn't really want "Andrew likes Nameless corpses pile up in Haiti mass graves" on my facebook. :p
If its not possible to change, I might have to hide the 'like' button in the comments plugin the way you describe right at the end of the post... but I've got no idea how to do this. :s
Thanks again,
Andrew
I implemented the above code for the like button with the pop-up comments box. I have the like button working, but I don't see the comments box when I hover over the like button. Is there anything else I need to do to get that box to show up?
-Trish
Great tutorial thanks :-)
I've got the same as Trish though... no comment box seems to show up - I don't think I've missed anything out!
Hi Trish, Hi Neil.
I can assure you that the instructions are ok because these are the ones I followed to set up the FB Like button here.
I had a similar problem at first and I found out that its root was in the in this part
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
I was using the URL for the content as it is. After I started to use a URL of my own, it began to work.
Any way, carefully review the instructions. They are ok.
If you find out the problem is something else, please leave the solution here. Other readers might love it :)
Note: the meta data tags mentioned on point 5 of part 1 must be present in your template code, somewhere between the <head> and the </head> tags.
The are the ones I use (have a look in my blog's source code):
<meta content='Some high tech tips' property='og:title'/>
<meta content='Some high tech tips' property='og:site_name'/>
<meta content='http://kfactor.net/Hitech-tips/template/logo.png' property='og:image'/>
correction:
somewhere between the <head> and the </head> tags.
Hi, I tried your method. But didn't work for me :(
I first made an application. Added the code after the "head" tag. And it gives me error, a JavaScript error. "document.getElementById('fb-root') is null". So, I manually, added the JavaScript into that. Now, when I try to put this:
It shows no result! :(
Please help me out.
-Yash
Hi Yash, it looks the javascript isn't corrected loaded. Did you put it at the right place? Mail me your template if you want me to have a look (send me the complete xml, as shown here http://hitech-tips.blogspot.com/2010/05/template-actions-download-backup-edit.html )
fliscorno at gamail dot com
Jorge
Hey guys - I can't get it to load for the life of me. I have the iframe version up on now http://benjihana.com/sports/big-12-falls-fans-win/, but whenever I attempt to use the fbml version, nothing shows up. It has a blank line there, but nothing else. Help please :)
http://benjihana.com/sports/big-12-falls-fans-win/
Hello, thanks for the detailed documentation. I wish facebook documentation itself would be so accurate and up-to-date.
Anyway, I wonder if I can get what the visitor/user liked. The like button has a xid attribute (which should be a unique something) and that would be enough for me to store this xid and username in my DB.
But when could it be possible to capture this xid after the user has pressed the like button?
Good question Guvenc. I'll give it a look.
very helpful and precise tutorial. i have linked to it in my latest blogpost: Facebook Like button added to webeno.blogspot.com
hello, very nice and helpful tutorial u have given. i followed the instructions exactly and my like button is working on my blogger blog. BUT the problem is that the posts that people like only appear on their FB walls and not in their News Feeds. Why is this happening?
my blog is : http://evilgeniuslabs.blogspot.com
on some facebook forum i read that it can be because of the meta tags
i have put these tags just before the </head> tag in my blogger template:
<meta content='' property='og:title'/>
<meta content='Evil Genius Labs' property='og:site_name'/>
<meta content='' property='og:image'/>
when i tried the FB comment box(technique #2) then the comments did appear in the news feed. But the Likes of the like button in technique #1 are not appearing. please help me out
how to find out who click on like?
I did exactly all that you stated before, but I cannot get the individual buttons for each post, I don't know what I'm doing wrong.
Here's my info:
// XFBML declaration
< html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://opengraphprotocol.org/schema/'>
// Opengraph tags (in head)
< meta content='La guía de cine y series' property='og:title'/>
< meta content='blog' property='og:type'/>
< meta content='http://laguiadecineyseries.blogspot.com' property='og:url'/>
< meta content='http://lh5.ggpht.com/_4b9fZK142hk/TFHpg-2YeBI/AAAAAAAAEVM/MXLyeL6dvmk/TV%20512x512.jpg' property='og:image'/>
< meta content='La guía de cine y series' property='og:site_name'/>
< meta content='MY PROFILE ID IS HERE' property='fb:admins'/>
< meta content='MY APP ID IS HERE' property='fb:app_id'/>
< meta content='La guía de cine y series es un blog en español sobre series de TV y películas. Podés encontrar todo tipo de información sobre series de TV y películas: noticias, reviews, previews, trailers, posters y etc.' property='og:description'/>
< meta content='Ciudad Autónoma de Buenos Aires' property='og:locality'/>
< meta content='Ciudad Autónoma de Buenos Aires' property='og:region'/>
< meta content='Argentina' property='og:country-name'/>
< meta content='laguiadecineyseries@gmail.com' property='og:email'/>
// FB Init (in body)
< div id='fb-root'/>
< script>
window.fbAsyncInit = function() {
FB.init({appId: '120047134709610', 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>
// And finally the like button, in the post footer.
< div class='post-footer-line post-footer-line-3'>
< div style="margin-top:10px; margin-left:5px;">
< fb:like action='like' colorscheme='light' expr:href='data:post.url' layout='standard' show_faces='true'/>
< /div>
< /div>
Can any of you guys figure what's wrong with this code?
Thanks a lot
Regards
hi there,
is there a css attribute to apply custom css for the tag?
thanks
css attribute for 'fb:like' tag
Hi, thanx for this great article.
m just having a few difficulties..
1stly,
the open graph tags dont work for my website :( i dont know why :( when hit the like button, it posts on my wall
"Ali likes http://web.com/file.htm on web.com"
2ndly,
i created a comments box but i just cant hide the default like button in it :S i am using Firefox.
what i want is to hide the like box and add a separate one so that i can capture its events.
Thanx,
Ali Ashraf
I use blogspot.com and have added the "LIKE" button to each post. I can see how many people "like" it but I can't see who they are. Is there a way I can see that information?
Katie
fitnessbychoice@gmail.com
You can see only those who liked your post if they are "friends" of you in Facebook.
For those asking for help: I've been a way for some time. If you still need help, contact me at fliscorno at gmail dot com