Wednesday , September 20 2017
Home >> Magento configurable product >> Magento configurable products series #4: Insert Facebook like button

Magento configurable products series #4: Insert Facebook like button

These days, it is trendy to show a Facebook like button on your website so that visitors can share the page with their friends. In this recipe, following the Magento configurable product series,  we will add the like button on every product page.

Open your browser and go to a product page. In your IDE, open your configured theme folder.

In the next steps, we will generate and add the code of a Facebook likebutton to the product detail pages:

1. Open the catalog/product/view.phtmltemplate from your theme. If it is not in the theme, copy it from the app/design/frontend/base/defaultfolder.

2. Go to http://developers.facebook.com/docs/reference/plugins/like from where you can use the Configurator page to customize the like button for your page, as shown in the following screenshot:

In the next steps, we will generate and add the code of a Facebook likebutton to the  product detail pages: 1.  Open the catalog/product/view.phtmltemplate from your theme. If it is not in  the theme, copy it from the app/design/frontend/base/defaultfolder. 2.  Go to http://developers.facebook.com/docs/reference/plugins/like from where you can use the Configuratorpage to customize the likebutton for your  page, as shown in the following screenshot:

3. Paste the code in your view.phtmlfile where it will be more readable; for example, at the end of the file as a child of the div tag with the class product-collateral.

4. Reload a product page and the likebutton will show up

5. To change the URL of the likebutton, change the data-hrefattributeof the HTML5 code. The following code shows you how to do this to use the product page URL:

<div class="fb-like" 
data-href="<?php echo Mage::helper('core/url')
->getCurrentUrl() ?>" 
data-layout="standard" 
data-action="like" 
data-show-faces="true" 
data-share="true">
</div>

6.  While using the HTML5 code, don’t forget to include the JavaScript SDK

How it works…

The Facebook likebutton is one of the social plugins you can embed in your website. On Facebook, every URL is an object you can like or comment on. You can find more information about the available social plugins from the following URL:

https://developers.facebook.com/docs/plugins/

In this recipe, we covered the addition of the Facebook likebutton, but when you want to add buttons for other social media sites such as Twitter or Google Plus, you can visit the following URLs:

https://developers.google.com/+/web/+1button/

https://about.twitter.com/resources/buttons

There’s more…

When you like a page of your website, Facebook will generate a wall post based on the HTML markup of the page. Why ou like a page, Facebook will post an image, title, and description of that item on your wall.
With Open Graph(og) metatags, you can customize the content of these things. An overview of the available og tags and how to use them can be found at

https://developers.facebook.com/docs/opengraph/using-objects/.

 

We also contribute great content of Magento Tutorial for Magento 1.x.

DON'T MISS THE CHANCE!

magento tutorial

About Champ