Journal

How to add Facebook Like buttons to Magento Go product pages

How to add Facebook Like buttons to Magento Go product pages

Recently a client of ours asked if we could add a Facebook Like button to all of the products on their Magento Go site, the idea being that when the button was pressed it would then add the link to that particular product to their Facebook page.

In Magento Community this wouldn’t be too much of a problem, however this particular site is a Magento Go store which doesn’t have the same amount of customisability or extensions. A quick search of the Magento Go documentation brought up a page showing how to add social networking links to Magento Go through a static block, but no reference to what code would be needed to actually connect to Facebook.

The code supplied by Facebook themselves requires placing code in sections of the page not available to edit in Magento Go, so things looked to have come to a stand still. However, through a bit of perseverance and good old Google, we came across the following code:

<script type="text/javascript">
var likeIt = '<iframe src="http://www.facebook.com/plugins/like.php?href='+document.URL+'" scrolling="no" frameborder="0" style="border:none; width:450px; height:80px;"></iframe>';
document.write(likeIt);
</script>

Then, by following the previously mentioned Magneto Go guide to adding social networking buttons, we created a static block that would show on every product page, allowing users of the site to “like” individual products, driving more traffic to the site.

The above code was added to Github by an anonymous user at the following link.

Your Comments

  1. Hi Jamie,

    Thanks for this code, it works like a dream in Magento Go.
    Cheers Rob.R

    Posted on

    Reply | Permalink to this comment

  2. thanks for this awesome code & tips…! :)

    Posted on

    Reply | Permalink to this comment

  3. Thanks so much for this, works perfectly!

    A minor tweak to the iframe code if I may – 80px height is a little excessive and may cause positioning problems…leaving around 55px dead space below it.

    You may simply edit the code as needed, I have found 25px is the perfect/actual height of the “Like” button…

    Posted on

    Reply | Permalink to this comment

  4. I have found many of your Magento Go tutorials extremely helpful, thanks so much for taking the time to right such detailed walkthroughs.

    I am having one issue with this code in that it appears to only let a user “like” once.

    I already “like” the site, and as such it shows on every product that I already “like” the product.

    Is there code that allows users to “like” individual products, or is this code supposed to do that and I’ve made an error?

    Posted on

    Reply | Permalink to this comment

  5. Please excuse my poor use of the English language, its been a long day!

    Thanks for your help!

    Posted on

    Reply | Permalink to this comment

  6. Hi Adam,

    The code should work fine if you have placed it within the product page itself, and not within a side column (putting it in the side column would cause it to “Like” the whole site, not the product page.

    So, you would need to create a static block, then create a front end widget that shows that static block on the product page.

    Thanks,
    Jamie

    Posted on

    Reply | Permalink to this comment

  7. Hi Jaime, awesome help. Thank you!
    Quick question though, is it possible to be able to choose which image is shared from the product page when a customer hits the “like” button. I find that FB is using the random images or the images from the “You may also be interested in the following product(s)” section.

    Thanks again!

    Posted on

    Reply | Permalink to this comment

  8. Hi Tim,

    I’m afraid I don’t know if that is possible, as this code was just found on Github as mentioned in the article. If you (or anyone else) find a way to do it then please feel free to post it here :-)

    Thanks,
    Jamie

    Posted on

    Reply | Permalink to this comment

  9. I have added the code and instead of find the product image, Facebook is finding the Paypal Button Image on my product page. Does anybody knows how to solve this problem? Thanks!

    Posted on

    Reply | Permalink to this comment

  10. Hi Michelle,

    It appears that this code randomly selects and image on the page, rather than giving people the option to decide which image they want to display on Facebook. There may be newer, more up -to-date code for doing this out there that works better now as this is quite an old piece of code and Facebook often update how things work, so it’s worth having a search or maybe looking at the Facebook Developers page.

    Thanks,
    Jamie

    Posted on

    Reply | Permalink to this comment

Leave Your Thoughts