Better way to Integrate Facebook Like Button
Wall Script
Follow Me:
Thursday, November 01, 2012

Better way to Integrate Facebook Like Button

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 Like Button.


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.
Facebook Like Button.

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>

Facebook Like Button Preview with Faces
Facebook Like Button.

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>
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


58 comments:

  1. Nice tutorial, thanks!

    ReplyDelete
  2. Easy to implement. Thanks a lot!

    ReplyDelete
  3. What could be the cause for showing descriptions for some post and not for others

    ReplyDelete
  4. Well said brother, meta tags are very important while installing facebook like button, but facebook team changing the structure randomly, which is not user friendly.

    ReplyDelete
  5. Keep up your good work bro :)

    ReplyDelete
  6. wow nice concept, it will be interesting to have more features to facebook....

    ReplyDelete
  7. hallo Srinivas...

    I think for the og:type content for better is Product rather than Shopping.

    for more look at http://developers.facebook.com/docs/opengraphprotocol/#types

    just in this case..




    ReplyDelete
  8. for better validation of page try using https://developers.facebook.com/tools/debug/og/echo?q=YOUR_WEBSITE_URL_HERE it will produce result of content your page, valid or not?

    ReplyDelete
  9. Very informative Article. How do you create multiple like buttons like you have done for each of your posts? Looked everywhere.

    ReplyDelete
  10. Este post certamente está me ajudando, apesar de ter encontrado em outro site, o 9lessons está de parabéns.

    ReplyDelete
  11. thanks, Greats tutorial

    ReplyDelete
  12. RE: og:site_name?

    Should this be the domain name or a title?

    Great tut.

    ReplyDelete
  13. Very nice and easy tot implement. I will add this to my blog.

    ReplyDelete
  14. Meta tags are useful if using facebook's iframe, but I feel, that it's better to use selfmade, custom coded button. That allows to avoid facebook loading all it's stuff and slowing down your site.

    ReplyDelete
  15. Good one!

    Its useful for Facebook developers.There are lot of scripts available online with demo.

    Thanks,

    ReplyDelete
  16. Thank you so much for sharing. Your blog has a lot of useful technical information.

    ReplyDelete
  17. Very nice and easy to implement!
    Thank you again Srinivas!

    ReplyDelete
  18. Very helpful and nice article followed by beautiful discussion. Keep it up and keep sharing.

    ReplyDelete
  19. This is very old implementations. Currently all websites are trying to integrate all social networking site links on one shot, which can be done using third party service providers.

    ReplyDelete
  20. Thanks Buddy !!!

    ReplyDelete
  21. thanks for the code...its great... but i can't remove the height in iframe code.. i tried to minimize it also removed height option but its taking lot of space :( please help

    Thank you again Srinivas!

    ReplyDelete
  22. Thanks for sharing this valuable and informative post.

    ReplyDelete
  23. @srinivas ...
    i not request it not plugin facebook but
    like facebook for php and jquery ..
    I want to add features like button on my website as like the existing buttons on facebook

    ReplyDelete
  24. thanks a lot.... but
    how to edit the above Xml file in wordpress?

    ReplyDelete
  25. thanks sir for giving this nice post now i can also implement easily

    ReplyDelete
  26. love this post and one i read after a long time, fanatic job....

    ReplyDelete
  27. hi, how about to make facebook share button with custom url custom description and custom image?

    ReplyDelete
  28. Everytime i read your article, i get impressed again and again, just because of the simplicity in which it is written.

    Thanks Srinivas

    ReplyDelete
  29. thanks for sharing this information..

    ReplyDelete
  30. nice...I want to know what is the /product/75

    ReplyDelete
  31. thanx for nic post. is this applicable to video if we like that.

    ReplyDelete
  32. Great work. i'll change my button

    ReplyDelete
  33. Why a "comment" box appears when I press the like button?

    ReplyDelete
  34. very useful info. and a great use of making like Buttons

    ReplyDelete
  35. Great way of Digital Marketing promotions are using facebook. Very fast way of reaching the Products

    ReplyDelete
  36. Not Display Proper Image

    ReplyDelete
  37. its very nice...thank u..can u send me same for share button.so user can post comment on his own home page of fb? thanks in advance.

    ReplyDelete

Make in India