Making the Magento Theme Socially Ready: Integrating the code in the product page

Let’s suppose that we want to add the code only in the product page. To do this, perform the following steps:

1. Go to your theme folders and create a file called addthis.phtml in app/design/frontend/bookstore/default/template/social.
2. Paste the copied code, as mentioned in the previous section, in the file and save it.

3. Now, we need to open the local.xml file and find the <catalog_product_ view> product view handle (for your reference, this handle is defined first inside the catalog.xml file of the base theme in app/design/frontend/ base/default/layout) and inside it, in <reference name=”content”>, add the following code that will declare a core/template block to be displayed on the product page:

<reference name=”content”>

<block type=”core/template” name=”socialsharing” template=”social/addthis.phtml” before=”-” />

</reference>

Now, open the file of the product page, view.phtml, located in app/design/ frontend/bookstore/default/template/catalog/product/view.phtml.

4. If you don’t have the phtml file already in the folder, you can create it, or to test all the features of the product page, copy it from the base theme in app/design/frontend/base/default/template/catalog/product.
5. Place the following php statement that will generate the code of the addthis.html file just inside the div tag with the product-img-box CSS class:

<?php echo $this->getChildHtml(‘socialsharing’) ?>

6. To position the block in the breadcrumbs line, add styles with the following code:

.container { position: relative; }

.social-sharing { position:absolute; top:10px; right: 15px; }

7. Now you are done! Open the product page and you will see the social sharing buttons where you have placed them, on the right-hand side area, as shown in the following screenshot:

As you can see the social sharing buttons are positioned on the right of the window, after the search box.

Now let’s test all the buttons.

1. Facebook’s Like button

After clicking on the Facebook icon, a pop up will appear. The user can add some extra information in the pop up before posting the product on the page. Consider the following screenshot:

2. Twitter’s Tweet button

After clicking on the Twitter icon, a pop up will appear. Through the pop up, you can write your own hashtag and tweet before sending the link, as shown in the following screenshot:

3. Pinterest’s Pin button

Now if you click on the Pinterest button, you can see that the pop up will appear as a Lightbox, and here you will have the option to select the image to pin on the social networking site, as shown in the following screenshot:

4. The Google+ button

After clicking on the Google+ button, a pop up will appear, just like when the Facebook and Twitter buttons were clicked on, as shown in the following screenshot:

5. The + button

At the end of the list, you can see the icon with a + sign, which indicates that you can share the page through other services, as shown in the following screenshot:

Note: If you explore the AddThis social website, you will find a lot of neat social sharing add-ons that will help you integrate code in your site or theme.

Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.