If you are developing a website and you must integrate with social networks sites like Facebook, Twitter and Google plus to reach more people. I strongly believe Facebook is the new virtual world to increase your product sales and generating web traffic. In this post I want to explain a simple tip, that how to integrate Facebook like button in optimizing way for just adding few FBML META tags.

Facebook Timeline Like Button Preview
FBML META tags optimization helps your web page to reach people more meaningful. You can control the Facebook like button system to produce better content.

FBML META Tags
Just include following META tags, you can specify Title, Image, Description and etc.
<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>
<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 Preview with Faces

Button Count
If want to see the button count preview just take a quick look at 9lessons website logo header part.
<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>
No comments:
Post a Comment