Better way to Integrate Facebook Like Button
Wall Script
Wall Script
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>
web notification

58 comments:

  1. GreenBlueRupNovember 1, 2012 at 6:05 AM

    Nice tutorial, thanks!

    ReplyDelete
  2. CybermatatuNovember 1, 2012 at 6:08 AM

    Easy to implement. Thanks a lot!

    ReplyDelete
  3. UnknownNovember 1, 2012 at 6:09 AM

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

    ReplyDelete
  4. JaswanthNovember 1, 2012 at 6:27 AM

    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. UnknownNovember 1, 2012 at 6:40 AM

    Nice! Ever...

    ReplyDelete
  6. AnonymousNovember 1, 2012 at 6:52 AM

    Keep up your good work bro :)

    ReplyDelete
  7. Mohit BumbNovember 1, 2012 at 7:12 AM

    I like iframe

    ReplyDelete
  8. venkatNovember 1, 2012 at 7:28 AM

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

    ReplyDelete
  9. Saiful AmriNovember 1, 2012 at 7:39 AM

    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
  10. Saiful AmriNovember 1, 2012 at 7:42 AM

    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
  11. FerrariNovember 1, 2012 at 8:30 AM

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

    ReplyDelete
  12. AnonymousNovember 1, 2012 at 8:43 AM

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

    ReplyDelete
  13. AnonymousNovember 1, 2012 at 9:12 AM

    yes i am agree with your words

    ReplyDelete
  14. karanNovember 1, 2012 at 9:29 AM

    As usual nice tutorial.

    ReplyDelete
  15. AnonymousNovember 1, 2012 at 10:38 AM

    Strong one :)

    ReplyDelete
  16. Gabriela Morais CostaNovember 1, 2012 at 11:55 AM

    Nice.

    ReplyDelete
  17. UnknownNovember 1, 2012 at 12:02 PM

    good

    ReplyDelete
  18. Trungeuro128November 2, 2012 at 2:06 AM

    thanks, Greats tutorial

    ReplyDelete
  19. AnonymousNovember 2, 2012 at 4:23 AM

    RE: og:site_name?

    Should this be the domain name or a title?

    Great tut.

    ReplyDelete
  20. zboruri low costNovember 2, 2012 at 6:27 AM

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

    ReplyDelete
  21. RonaldsNovember 2, 2012 at 10:16 AM

    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
  22. UnknownNovember 3, 2012 at 1:59 AM

    Great Work....Thanks a Lot

    ReplyDelete
  23. Wordpress CMS DeveloperNovember 3, 2012 at 8:04 AM

    Good one!

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

    Thanks,

    ReplyDelete
  24. sachinNovember 3, 2012 at 11:44 AM

    good tuts

    ReplyDelete
  25. Albert LuNovember 3, 2012 at 11:52 AM

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

    ReplyDelete
  26. AlexenderNovember 4, 2012 at 12:25 PM

    Very nice and easy to implement!
    Thank you again Srinivas!

    ReplyDelete
  27. Eric HokansonNovember 6, 2012 at 2:36 AM

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

    ReplyDelete
  28. VenkatNovember 6, 2012 at 11:57 PM

    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
  29. Sreekesh S KNovember 7, 2012 at 6:52 AM

    Thanks Buddy !!!

    ReplyDelete
  30. SantanuNovember 7, 2012 at 8:38 PM

    Nice article....helpful

    ReplyDelete
  31. Majharul HossainNovember 14, 2012 at 1:21 PM

    How to add this on blogger?

    ReplyDelete
  32. UnknownNovember 15, 2012 at 3:25 AM

    great

    ReplyDelete
  33. sonu sindhuNovember 19, 2012 at 1:54 AM

    I like it very much.

    ReplyDelete
  34. UnknownNovember 22, 2012 at 2:52 AM

    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
  35. AKHILNovember 25, 2012 at 9:57 AM

    Thanks for sharing this valuable and informative post.

    ReplyDelete
  36. toko onlineNovember 25, 2012 at 6:00 PM

    Thanks for code
    It works

    ReplyDelete
  37. dempoNovember 25, 2012 at 11:32 PM

    @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
  38. chaitanyaNovember 27, 2012 at 7:25 AM

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

    ReplyDelete
  39. sanchittNovember 28, 2012 at 4:22 AM

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

    ReplyDelete
  40. Mohit MathurNovember 29, 2012 at 10:43 AM

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

    ReplyDelete
  41. permatakitaDecember 5, 2012 at 5:23 AM

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

    ReplyDelete
  42. MΛᄃZZIПGΣЯDecember 12, 2012 at 1:15 AM

    great value. thank you ;)

    ReplyDelete
  43. FerrariDecember 14, 2012 at 5:56 AM

    Cool

    ReplyDelete
  44. JaY SrivastavaDecember 15, 2012 at 2:00 PM

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

    Thanks Srinivas

    ReplyDelete
  45. AnonymousDecember 18, 2012 at 1:05 AM

    Nice, i going to do this :)

    ReplyDelete
  46. AnonymousDecember 29, 2012 at 2:58 AM

    thanks for sharing this information..

    ReplyDelete
  47. AnonymousJanuary 3, 2013 at 2:43 AM

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

    ReplyDelete
  48. AnonymousJanuary 26, 2013 at 6:40 AM

    nyc bro i must implement this

    ReplyDelete
  49. letmeshare.inFebruary 9, 2013 at 3:09 AM

    Nice work dude

    ReplyDelete
  50. sunilMarch 11, 2013 at 3:08 PM

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

    ReplyDelete
  51. UnknownMarch 13, 2013 at 9:12 AM

    Great work. i'll change my button

    ReplyDelete
  52. I am hereMarch 26, 2013 at 6:09 AM

    cool dude

    ReplyDelete
  53. AnonymousApril 25, 2013 at 11:07 AM

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

    ReplyDelete
  54. UnknownMay 9, 2013 at 3:01 AM

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

    ReplyDelete
  55. PataKaroMay 9, 2013 at 3:03 AM

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

    ReplyDelete
  56. AnonymousSeptember 4, 2013 at 3:03 AM

    Not Display Proper Image

    ReplyDelete
  57. AnonymousDecember 19, 2013 at 5:20 AM

    wow !

    ReplyDelete
  58. UnknownMarch 24, 2014 at 7:15 AM

    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

Most Popular Posts

mailxengine Youtueb channel
Facebook and Google Login
Make in India
X