I usually write in Romanian, but I am gonna write this post in English as it may have a broader public than the Romanian people.
As cool as the Facebook Like button may be for a regullar user, it is just as much or even more suckier for developers. I spent the last few days almost entirely on making Facebook like button work. Why did I have to spend that much time? Well, apparantely the multibillion company, just can’t hire someone to write a proper documentation for a, 21px by 80px, 500 lines of code, blue button and they also can’t afford a tester with its sole mission to click like buttons all day long.
Here are my discoveries:
1. The size of the Like button
If you try to change the height of the Like button, you will probably try to override some styling embeded in the iframe.
.fb_iframe_widget iframe{
height:20px !important;
}
or
.fb_ltr{
height: 20px !important;
}
These won’t work. The flyout which let users to comment when they like something won’t be visible if you modify the height of the button. This also applies to the Send button
1.1 The size of FConnect button can be changed adding this to your css file
#RES_ID_fb_login_image {
height: 20px;
}
2. The locale
If you want facebook to display the Send button in your language, and the Send word in your language is longer than 4 letters, than you’re not enough important for facebook so that they would automatically change the width of the button for you. But you may add this to your styling:
.fb_ltr{
/*height: 20px !important;*/
min-width:60px !important;
}
To change the locale you have to change the en_us in http://connect.facebook.net/en_US/all.js with your locale, in my case it would be http://connect.facebook.net/ro_RO/all.js
A list of locales supported by Facebook.
3. The position of the FB Buttons
If you want to display multiple social buttons on one line, you have to write something like this in your css styling:
#fb-root{
display:inline-block;
}
and also
.fb_iframe_widget iframe{
margin:1px !important;
top:-1px !important;
}
Now that you have some nice-looking-good-positioned like buttons you’d probably think you’ve done the job. Not yet!
4. Make Like buttons work
Warning: Whatever you do, DON’T like and unlike your pages. This would cause a Confirm link to appear whenever you try to “like”. I know this is not developer friendly at all, but this is the way facebook works…
After you add meta tags with all the info on every page you want to be liked, you have to lint the page before your page can actually be liked.
A good Open Graph reference can be found at The Open Graph Protocol Website
Here is The Facebook Linter. This tool doesn’t usually work, but keep trying, maybe you’ll get lucky.
The Google+ button has been so much easier to install. I think I’ll switch to this social platform. Ooh… wait, I already did that.
Add me to your Google Plus circles, this is my Google plus profile page https://plus.google.com/110014879955305002051/posts
PS: This post has been written months ago and I didn’t fully checked it again now.