Add the Facebook Like button to Magento Product Pages

Magento Blog Comments (0)

Facebook Likes for Magento
The Facebook Like button has become, arguably, the most popular “social sharing” tool for websites across the web, used by everybody from bloggers to huge online retailers. You can add the Facebook Like button to your Magento product view page with two very simple steps – assuming you have some experience with Magento template files.

The 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.”

You will be editing two Magento template files to achieve this, one layout XML file and one PHTML file.

Step 1 –  locate, or create, local.xml

app/design/frontend/default/[your_template]/layout/local.xml

Insert the following code somewhere in between the opening and closing <layout> tag.

{code type=xml}

 

{/code}

Facebook recommends that the Javascript for the like button be inserted immediately after the opening <body> tag, fortunately Magento already includes an after_body_start reference which we can easily insert the code into.

The <action method="setText"> allows us to insert any text on the page, the CDATA tag ensures that anything inside it is not parsed by the XML. A CDATA section starts with <![CDATA[ and ends with ]]>.

Step 2 – Insert the HTML into the Magento Product View template

The next step is to place the HTML in your Magento product page wherever you want it to appear. Find your product page template, if it doesn’t exist create it with a copy of the file from the base/default/template folder.

app/design/frontend/default/[your_template]/template/catalog/product/view.phtml

Insert the following code:

{code type=html}

{/code}

The attributes within the div tag can be changed to affect the functionality of the button, inserting data-send=”false” will enable the Send button alongside the Like button, data-show-faces=”true” will enable Facebook profile picture thumbnails of those who have already liked the page and so on. Full documentation for the Facebook Like button is available here.

Pin It

» Magento Blog » Add the Facebook Like button...
On 4th September 2012
By Paul

Leave a Reply

Your email address will not be published. Required fields are marked *

« »