Facebook like button for specific URL (blog or website url) with customize snippet (Image, description, title)

The facebook Like button lets a user share your content with friends on Facebook. When the user clicks the Like button on your site, a story appears in the user's friends' News Feed with a link back to your website.It is available in three layouts  standard , button_count and  box_count .
Here is the snap shot:

You can easily add Facebook  like button by following these steps:
1. Go to http://developers.facebook.com/docs/reference/plugins/like/  then go to Step 1 - Get Like Button Code.
2. Enter URL to Like.( i entered  http://ourtechspace.blogspot.com )
3. Select Layout Style.(i selected  bubble_count)
4. Enter width.
5. Checked Show faces if you want.
6. Select Font.
7. Select Color scheme.
8. Select  verb to display (either like or recommended).
9. Click on Get Code button a popup will open, you need to select the code which-ever you want (like HTML5, XFBML, IFRAME, URL).
10. Copy the code  and paste where-ever you want Facebook like button to appear.

Here is the screen shot:

Here is the IFRAME code :

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fourtechspace.blogspot.com&send=false&layout=button_count&width=480&show_faces=false&font&colorscheme=light&action=like&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:480px; height:21px;" allowTransparency="true"></iframe>

Now go to Step 2  i.e  Get Open Graph Tags. This step is for customize  snippet (Image, description, title), these will be display on user's Facebook  account when user will press like button.

First lets see what are Open Graph Tags.
Open Graph tags aretags that you add to theof your website to describe the entity your page represents, whether it is a band, restaurant, blog, or something else.

Here are the steps to add Graph tags:
1. Enter Title (your blog or website name).
2. Select Type.
3. Enter URL (permanent url of the site or blog).
4. Enter the URL of the image (From where you want to accessing the image).
5. Enter Site name (Human readable name  of your site or blog).
6. Enter Admin Id (Facebook Ids of page administrators or Facebook Platform application Id).
7. Now click on Get Tags button a popup will open, you need to copy the code and paste this code in head section of your blog or website. Here is the code look like:

<meta property="og:title" content="Technology Spaace" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="http://ourtechspace.blogspot.in" />
<meta property="og:image" content="https://images/logos/logo.png" />
<meta property="og:site_name" content="Technology Space" />
<meta property="og:description" content="Technology Space ::  is related to all Technology (like Facebook , Google, Twitter APIs, JavaScript, AJAX..etc) ,Specially to all JAVA Technology" />
<meta property="fb:app_id" content="333611956747814" />

Here is the screen shot for Step 2

You can use Facebook Debugger Tool to check that all entries are correct or not.
When user will press like button then it will be look like below, on their facebook profile.

Share on Google Plus

About JK STACK

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.