1. Getting started with social media integration
For our theme, we need to think carefully about where to place the blocks, because the position is important in order to create the right connections.
In our case, we need to focus attention on two positions:
- Social sharing for the whole website
- Social sharing and publicizing for the product
For the website, we can place the social buttons on the top header or on the footer, either with a link that links various social networks with the respective icons, or with the share link.
For the product, we have to add the feature of sharing, which will increase its possibility of purchase.
2. Integrating the social plugin in the product page
It is very important to integrate social media buttons into the product page; in fact, it is from this page that the user can share the product with his or her friends, increasing the possibility of purchase of the product.
To do this, we will use the excellent free service, AddThis. AddThis is a great ready-to-use plugin that allows you to add links to the social networks. You can either utilize the service for free, or you can register and create an account that will allow you access to advanced statistics.
Now we will perform the following steps to integrate the version without an account:
- Open the AddThis site, scroll down and open the social sharing link, or click on the orange Get the Code button on the top-right corner and select Share Buttons, as shown in the following screenshot:
You can integrate Add This manually, or you can use one of the premade extensions.
It is easy to install the extension because you can install a simple Magento module; however, we will learn how to integrate it manually, so you can distribute it with your theme without additional extensions. In fact, sometimes you cannot distribute the theme with third-party extensions because of license terms.
- On the next page, select A Website on the left-hand side, and then select the style of the buttons that you want to add to your As you can see in the following screenshot, you can select some options to customize the appearance of the widget:
Choose the second option, the one with the large icons, under the Select style section, as you can see in the following screenshot:
- Now, towards the right-hand side of the screen, check the live preview of the You can leave it as it is, or you can choose different buttons for your plugin. To select the social buttons, click on the Disable and select your own buttons link, as shown in the following screenshot:
- As you can see, a new box appears to give you the option to choose a custom selection of buttons. In this case, choose Facebook, Twitter, Pinterest, and Google+ buttons, as shown in the following screenshot:
- Now, it’s time to Sign in, then copy and paste the code that appears in the box into your page. You can use the code inside a CMS page or copy it into a template file of your theme, just where you want to make it appear. As you can see in the following screenshot, the code to grab is inside a yellow box:
- Now copy the code created by the site:
<div class=”social-sharing”>
<!– AddThis Button BEGIN –>
<div class=”addthis_toolbox addthis_default_style addthis_32x32_style”>
<a class=”addthis_button_facebook”></a>
<a class=”addthis_button_twitter”></a>
<a class=”addthis_button_pinterest_share”></a>
<a class=”addthis_button_google_plusone_share”></a>
<a class=”addthis_button_compact”></a>
<a class=”addthis_counter addthis_bubble_style”></a>
</div>
<script type=”text/javascript”>var addthis_config =
{“data_track_addressbar”:true};</script>
<script type=”text/javascript” src=”//s7.addthis.com/js/300/addthis_widget.js#pubid=ra- 5023e72a4129d9cf”></script>
<!– AddThis Button END –>
</div>
Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.