What are the social networks you engaged in? Facebook, Twitter, Google+, LinkedIn, Pinterest are popular networks you may have heard of and already engaged in. Out of all social networks, Facebook has major share among other social networks due to immense popularity they have gained over last couple of years and still progressing. So if you are trying to promote your products, services or whatever content online, Facebook is a place where news does spread fast among millions of users. Also user recommendations or likes are helpful for their friends to find your products, services or site pages. So would you like if your content, product or services get recommended and shared on Facebook to grab more attention?
Facebook like button is a social plugin offered by Facebook for users to recommend or like content on a blog or website while they are on your site. It's a kind of sign which depicts recommendation. It recommends content or website for other users and shared on particular user's Facebook news feed with a link back to that particular page. So it helps to spread your content or website with users' friends and subscribers while being recommended. One user can't recommend same content twice and one like represents a recommendation of an user. So there's a lower possibility to fake recommendations or number of likes too.
As you gain more user likes or recommendations on your website, either it convince users to visit your website or your future users to read your content, buy your products or grab your services too. But the only disadvantage with Facebook like button is, in case if you wanna migrate to another domain after implementing like button, the old likes won't be survive on new domain and you can't restore them back. However if you provide quality product, content or service, it doesn't matter. You can re-gain your likes back.
As you gain more user likes or recommendations on your website, either it convince users to visit your website or your future users to read your content, buy your products or grab your services too. But the only disadvantage with Facebook like button is, in case if you wanna migrate to another domain after implementing like button, the old likes won't be survive on new domain and you can't restore them back. However if you provide quality product, content or service, it doesn't matter. You can re-gain your likes back.
Before You Go:
* If you are a Blogger users and wanna implement Facebook like button for your posts, read Add Facebook Like Button for Blogger Posts.
* Read How to Implement Facebook JavaScript SDK on Your Website and implement suitable JavaScript SDK version for you, unless if you have already implemented Facebook JavaScript SDK on your website.
* If you are a Facebook member, you can see insights for your posts being liked and shared on Facebook and you can customize image and snippet posted on user's wall whenever they like via Facebook Like button. If you wanna grab those features, implement Facebook Open Graph Protocol on your website.
* If you are a Blogger users and wanna implement Facebook like button for your posts, read Add Facebook Like Button for Blogger Posts.
* Read How to Implement Facebook JavaScript SDK on Your Website and implement suitable JavaScript SDK version for you, unless if you have already implemented Facebook JavaScript SDK on your website.
* If you are a Facebook member, you can see insights for your posts being liked and shared on Facebook and you can customize image and snippet posted on user's wall whenever they like via Facebook Like button. If you wanna grab those features, implement Facebook Open Graph Protocol on your website.
Steps:
You just need to add one of below code snippets to a place where you wanna show off like button on your website. You can use XFBML or HTML5 markups.
Note: If you are planning to use XFBML markup of this plugin, then it may not support earlier versions of Internet Explorer. In order to enhance compatibility with older Internet Explorer versions, add below XML namespace to your root HTML tag.
xmlns:fb="http://ogp.me/ns/fb#"
i.e: <html b:version='2' ..... xmlns:fb="http://ogp.me/ns/fb#">
Standard Layout Style
<fb:like href='[Page URL]' colorscheme='light' action= 'like' font='[Font Family]' share='true' show_faces='false' width='450'/>
HTML5 Markup
<div class='fb-like' data-href='[Page URL]' data-share='true' data-width='450' data-show-faces='false' data-action='like' data-colorscheme='light' data-font='[Font Family]'></div>
Box Count Layout Style
XFBML Markup
<fb:like href='[Page URL]' colorscheme='light' action= 'like' font='[Font Family]' share='true' show_faces='false' layout='box_count' width='450'/>
HTML5 Markup
<div class='fb-like' data-href='[Page URL]' data-share='true' data-layout='box_count' data-width='450' data-show-faces='false' data-action='like' data-colorscheme='light' data-font='[Font Family]'></div>
Button Count Layout Style
XFBML Markup
<fb:like href='[Page URL]' colorscheme='light' action= 'like' font='[Font Family]' share='true' show_faces='false' layout='button_count' width='450'/>
HTML5 Markup
<div class='fb-like' data-href='[Page URL]' data-share='true' data-layout='button_count' data-width='450' data-show-faces='false' data-action='like' data-colorscheme='light' data-font='[Font Family]'></div>
Color Indication Information:
- Page URL
URL of the page you wanna refer via Facebook like button. If you wanna let button to refer current page where button is on, just remove this with its attribute href or data-href from the code snippet.
i.e:
<fb:like
<div class='fb-like'
- Color Scheme of Button
Change this value to dark if you wanna change the color scheme of button into dark.
- Like Button Text/Action
Change this value to recommend if you need the button text to be appeared as Recommend.
- Share Button
You can specify false if you don't wanna have Share button displayed along with Like button.
- Profile Pictures below Button
If you wanna show profile pictures, then set this value true. It will display friends of user who liked it, below the like button.
- Width Acquired by Plugin
Specify the value in pixels if you wanna change the width acquired by Like button plugin.
- Font Family
Specify font family you wanna use with Like button here.
i.e: font="arial" or data-font="arial"
More Information:
* You can find more insights for your posts being shared on Facebook via Share button at Facebook Insights page.
* If you are planning to implement multiple Facebook Like buttons on same page, make sure to add xid attribute with the unique value for each button.
For example, if you planning on adding two Facebook Like buttons,
1st button : <fb:like xid='1000' ...
2nd button : <fb:like xid='1001' ...
* You can find more insights for your posts being shared on Facebook via Share button at Facebook Insights page.
* If you are planning to implement multiple Facebook Like buttons on same page, make sure to add xid attribute with the unique value for each button.
For example, if you planning on adding two Facebook Like buttons,
1st button : <fb:like xid='1000' ...
2nd button : <fb:like xid='1001' ...
Enjoy :-)
nice tips bro.!! I will try it for my blog, very helpfull information for me, thanks
You're welcome mate :) Thanks for stopping by and commenting...
Cheers...
it works but why is there's already number of like even it doesn't have.the number of likes was also the number of people who like my facebook fan page.
i already copy and paste the basic javascript sdk and the html5 markup of standard layout style but the above happened.why is it?
When you on homepage, it shows likes for your homepage/blog URL :) When you go into a post, you will see likes corresponding to that post dear. As you have a Blogger blog, you have to follow instructions here as i mentioned in Before You Go section ~ Add Facebook Like Button for Blogger Posts.
Cheers...
Hi, I'm creating a website for a friend's business and wanting to insert a like button for his professional facebook Page. When I test it using your code nothing comes up, does it need to be a live website in order for it to work? I suspect it has something to do with the URL, when I'm on his Page its http://www.facebook.com/wingsongent?fref=ts
Even when I take off the ?fref=ts it still doesn't work. I inserted the Basic JavaScript SDK right after the Body tag like you suggested and inserted the like button code:
Any suggestions?
Hi Colgan,
Facebook page URL is alright and better use without ?fref=t. Anyway your website should be able to communicate online with Facebook servers in order to populate Facebook like button mate. Else it won't work though you have codings placed there.
Anyway is your website currently restrict from public? I mean, no access to anyone, but you? If so, reason could be that :)
If your website can be accessible to anyone, just leave your website URL so I'll look into it and see if I can give feedback for you.
Cheers...