If you are blogger or a website owner and looking for maximum number of visitors to your site you should integrate social network site’s easy sharing buttons into your website. Among these social networking sites Facebook’s social plugins are so effective to achieve nice traffic to your website. In this post i am going explain how to integrate Facebook like button with open graph meta tags.

Facebook allows the developer to customize the page snippet preview on user’s timeline using Open graph meta tags.

Open Graph Tags

Basic Open Graph Tags

Image tag

<meta property="og:image" content="http://codelikeaboss.com/codebosslogo.png">

image tag allow a developer to specify the image to be displayed on the social graph we can specify the image url on this tag

Title

<meta property="og:title" content="Code Like A Boss" />

Sitename

<meta property="og:site_name" content="Code Like A Boss"/>

URL

The canonical url of your web page

<meta property="og:url" content="canonical url">
Type

The web page is classified on graph object by og type

<meta property="og:type" content="article">

Facebook built in objects

  • Article
  • Blog
  • Book
  • Profile
  • Movie
  • TV Episode
  • TV Show
  • Video
  • Website

Include this meta tags inside the head part of your website page

<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="Title of your website">
<meta property="og:type" content="article">
<meta property="og:url" content="Canonical url of your website">
<meta property="og:image" content="Image url">
<meta property="og:site_name" content="Your website name">
<meta property="og:description" content="Page Description ">
</head>
<body>

Javascript

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

And put

<div data-href="YOUR URL HERE" data-send="true" data-width="450" data-show-faces="true"></div>

Put this code where you want to show the like button

Customization of like button

Send Button

Changing data-send=”false” will remove the send button

<div data-href="YOUR URL HERE" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false" data-colorscheme="dark" data-action="recommend"></div>

Layout

Change value of data-layout for changing the layout of like button.

with out the data-layout tag standard like button will be generated

available layouts

data-layout=”button_count”

data-layout=”box_count”

Font

Customize the font by changing data-font attribute

Available fonts  arial, lucida grande, segoe ui,tahoma, trebuchet ms, verdana

Custom Open Graph META Tags

Check Facebook Custom Stories to get more about generating custom stories.

Use Debugger to validate the META tags.