Search code examples
javascriptphpjquerycodeigniterfacebook-like

how can i add fb like button for my website product?


I need to add facebook like button for my website for user like my product and that like product image post on their profile. I try many example but with that use only like website page not like product, and also post image of my website logo. i need to post my product image

<iframe scrolling="no" frameborder="0" allowtransparency="allowTransparency" width="280" height="65" src="http://www.facebook.com/widgets/like.php?width=280&show_faces=0&layout=standard&href=http://www.websoite.com/newsite/webemp_02/facetsjewel/Productdetails/Art%20and%20Soul%20Fearless%20Bracelet"></iframe>

Solution

  • Make sure to use the exact same code as the one you get in the Like Button generator: https://developers.facebook.com/docs/plugins/like-button

    Two problems with your code right now:

    • You are trying to use an URL with whitespace. You should never do that. (%20 is whitespace)
    • You did not urlencode the URL. Just put it in the generator and it will create the urlencoded version for you.

    Try to open the link in the browser and you will see that it does not work: http://www.websoite.com/newsite/webemp_02/facetsjewel/Productdetails/Art%20and%20Soul%20Fearless%20Bracelet

    You have to use a valid and public URL. If you use the generator, you get the following code - but you REALLY should not use whitespace in an URL:

    <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.oceanstechnologies.com%2Fnewsite%2Fwebemp_02%2Ffacetsjewel%2FProductdetails%2FArt%2520and%2520Soul%2520Fearless%2520Bracelet&amp;width&amp;layout=standard&amp;action=like&amp;show_faces=true&amp;share=true&amp;height=80&amp;appId=1562584003953128" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe>
    

    In order to get the correct image and text, make sure to include the necessary Open Graph tags: http://ogp.me/