Monday, 19 November 2012

Integrating Facebook Like Button [Easy Way]

Social networking sites and their craze is on. These social networking sites like Facebook, Twitter or Google Plus can help you to increase the traffic and sales of your products. I strongly believe that Facebook can help you to increase the traffic of your site or a blog.



















In this post I want to give some simple tips about optimizing way of adding Facebook Like button to your website with few easy FBML META tags.

Facebook Timeline Like Button Preview

FBML META tags helps you to reach to more people in an effective way. You can control the Facebook like button to produce better content
















FBML META TAGS

Just include following meta tags and you can also specify title, description and so on.


<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<title>Product Name</title>
<meta property="og:title" content="Product Name"/>
<meta property="og:type" content="Shopping"/>
<meta property="og:url" content="http://www.website.com/product/75"/>
<meta property="og:image" content="http://www.website.com/product.jpg"/>
<meta property="og:site_name" content="WEBSITE"/>
<meta property="og:description" content="Product Description "/>
....
</head>
<body>
<h1>Product Name</h1>

<iframe scrolling="no" frameborder="0" allowtransparency="allowTransparency" width="280" height="65" src="http://www.facebook.com/widgets/like.php?width=280&show_faces=1&layout=standard&href=http://www.website.com/product/75"></iframe>


</body>

</html>

Facebook Like Button with Count:

If you want to see the button count just add the following meta tags: 

<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http://www.website.com/product/75&send=false&layout=button_count&width=85&show_faces=false&action=like&colorscheme=light&height=21'></iframe>