Let's suppose that we want to add the code only in the product page. To do this, perform the following steps:
addthis.phtml
in app/design/frontend/bookstore/default/template/social
.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
.
view.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
.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') ?>
.container { position: relative; } .social-sharing { position:absolute; top:10px; right: 15px; }
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.
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:
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:
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:
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:
18.223.33.157