Social Media and Magento

Social networks such as Twitter and Facebook are ever popular and can be a great source of new customers if used correctly on your store. In this article by Richard Carter, the author of Learning Magento Theme Development, covers the following topics:

Integrating a Twitter feed into your Magento store

Integrating a Facebook Like Box into your Magento store

Including social share buttons in your product pages

Integrating product videos from YouTube into the product page

(For more resources related to this topic, see here.)

Integrating a Twitter feed into your Magento store

If you're active on Twitter, it can be worthwhile to let your customers know. While you can't (yet, anyway!) accept payment for your goods through Twitter, it can be a great way to develop a long term relationship with your store's customers and increase repeat orders.

One way you can tell customers you're active on Twitter is to place a Twitter feed that contains some of your recent tweets on your store's home page. While you need to be careful not to get in the way of your store's true content, such as your most recent products and offers, you could add the Twitter feed in the footer of your website.

Creating your Twitter widget

To embed your tweets, you will need to create a Twitter widget. Log in to your Twitter account, navigate to https://twitter.com/settings/widgets, and follow the instructions given there to create a widget that contains your most recent tweets. This will create a block of code for you that looks similar to the following code:

<a class="twitter-timeline" href="https://twitter.com/RichardCarter" data-widget-id="123456789999999999">Tweets by @RichardCarter</a>

Embedding your Twitter feed into a Magento template

Once you have the Twitter widget code to embed, you're ready to embed it into one of Magento's template files. This Twitter feed will be embedded in your store's footer area. So, so open your theme's /app/design/frontend/default/m18/template/page/html/footer.phtml file and add the highlighted section of the following code:

<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('footer_about')->toHtml(); ?>

<?php

$_helper = Mage::helper('catalog/category'); $_categories = $_helper->getStoreCategories(); if (count($_categories) > 0): ?>

<ul>

<?phpforeach($_categories as $_category): ?> <li>

<a href="<?php echo $_helper->getCategoryUrl($_category) ?>"> <?php echo $_category->getName() ?>

</a>

</li> <?phpendforeach; ?> </ul>

<?phpendif; ?>

<a class="twitter-timeline" href="https://twitter.com/RichardCarter" data-widget-id="123456789999999999">Tweets by @RichardCarter</a>

</div>

The result of the preceding code is a Twitter feed similar to the following one embedded on your store:

social-media-and-magento-img-0

As you can see, the Twitter widget is quite cumbersome. So, it's wise to be sparing when adding this to your website. Sometimes, a simple Twitter icon that links to your account is all you need!

Integrating a Facebook Like Box into your Magento store

Facebook is one of the world's most popular social networks; with careful integration, you can help drive your customers to your Facebook page and increase long term interaction. This will drive repeat sales and new potential customers to your store. One way to integrate your store's Facebook page into your Magento site is to embed your Facebook page's news feed into it.

Getting the embedding code from Facebook

Getting the necessary code for embedding from Facebook is relatively easy; navigate to the Facebook Developers website at https://developers.facebook.com/docs/plugins/like-box-for-pages. Here, you are presented with a form. Complete the form to generate your embedding code; enter your Facebook page's URL in the Facebook Page URL field (the following example uses Magento's Facebook page):

social-media-and-magento-img-1

Click on the Get Code button on the screen to tell Facebook to generate the code you will need, and you will see a pop up with the code appear as shown in the following screenshot:

Adding the embed code into your Magento templates

Now that you have the embedding code from Facebook, you can alter your templates to include the code snippets. The first block of code for the JavaScript SDK is required in the header.phtml file in your theme's directory at /app/design/frontend/default/m18/template/page/html/. Then, add it at the top of the file:

<div id="fb-root"></div> <script>(function(d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

Next, you can add the second code snippet provided by the Facebook Developers site where you want the Facebook Like Box to appear in your page. For flexibility, you can create a static block in Magento's CMS tool to contain this code and then use the Magento XML layout to assign the static block to a template's sidebar.

Navigate to CMS | Static Blocks in Magento's administration panel and add a new static block by clicking on the Add New Block button at the top-right corner of the screen. Enter a suitable name for the new static block in the Block Title field and give it a value facebook in the Identifier field. Disable Magento's rich text editor tool by clicking on the Show / Hide Editor button above the Content field.

Enter in the Content field the second snippet of code the Facebook Developers website provided, which will be similar to the following code:

Once complete, your new block should look like the following screenshot:

social-media-and-magento-img-3

Click on the Save Block button to create a new block for your Facebook widget. Now that you have created the block, you can alter your Magento theme's layout files to include the block in the right-hand column of your store.

Next, open your theme's local.xml file located at /app/design/frontend/default/m18/layout/ and add the following highlighted block of XML to it. This will add the static block that contains the Facebook widget:

<block type="cms/block" name="cms_facebook">

<action method="setBlockId"><block_id>facebook</block_id></action>

</block>

</reference>

If you save this change and refresh your Magento store on a page that uses the right-hand column page layout, you will see your new Facebook widget appear in the right-hand column. This is shown in the following screenshot:

social-media-and-magento-img-4

Including social share buttons in your product pages

Particularly if you are selling to consumers rather than other businesses, you can make use of social share buttons in your product pages to help customers share the products they love with their friends on social networks such as Facebook and Twitter. One of the most convenient ways to do this is to use a third-party service such as AddThis, which also allows you to track your most shared content. This is useful to learn which products are your most-shared products within your store!

Styling the product page a little further

Before you begin to integrate the share buttons, you can style your product page to provide a little more layout and distinction between the blocks of content. Open your theme's styles.css file and append the following CSS (located at /skin/frontend/default/m18/css/) to provide a column for the product image and a column for the introductory content of the product:

.product-img-box, .product-shop {

float: left;

margin: 1%;

padding: 1%;

width: 46%;

}

You can also add some additional CSS to style some of the elements that appear on the product view page in your Magento store:

.product-name { margin-bottom: 10px;

}

.or {

color: #888; display: block; margin-top: 10px;

}

.add-to-box { background: #f2f2f2; border-radius: 10px; margin-bottom: 10px; padding: 10px;

}

.more-views ul { list-style-type: none;

}

If you refresh a product page on your store, you will see the new layout take effect:

social-media-and-magento-img-5

Integrating AddThis

Now that you have styled the product page a little, you can integrate AddThis with your Magento store. You will need to get a code snippet from the AddThis website at http://www.addthis.com/get/sharing. Your snippet will look something similar to the following code:

Once the preceding code is included in a page, this produces a social share tool that will look similar to the following screenshot:

Copy the product view template from the view.phtml file from /app/design/frontend/base/default/catalog/product/ to /app/design/frontend/default/m18/catalog/product/ and open your theme's view.phtml file for editing. You probably don't want the share buttons to obstruct the page name, add-to-cart area, or the brief description field. So, positioning the social share tool underneath those items is usually a good idea. Locate the snippet in your view.phtml file that has the following code:

<?php if ($_product->getShortDescription()):?>

<h2><?php echo $this->__('Quick Overview') ?></h2>

<div class="std"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></div>

</div>

<?phpendif;?>

Below this block, you can insert your AddThis social share tool highlighted in the following code so that the code is similar to the following block of code (the youraddthisusername value on the last line becomes your AddThis account's username):

<?php if ($_product->getShortDescription()):?>

<h2><?php echo $this->__('Quick Overview') ?></h2>

<div class="std"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></div>

</div>

<?phpendif;?>

<div class="addthis_toolboxaddthis_default_style ">

<a class="addthis_button_facebook_like" fb:like:layout="button_ count"></a>

<a class="addthis_button_tweet"></a>

<a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal"></a>

<a class="addthis_counteraddthis_pill_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=youraddthisusername"></script>

If you want to reuse this block in multiple places throughout your store, consider adding this to a static block in Magento and using Magento's XML layout to add the block as required.

Once again, refresh the product page on your Magento store and you will see the AddThis toolbar appear as shown in the following screenshot. It allows your customers to begin sharing their favorite products on their preferred social networking sites.

social-media-and-magento-img-7

If you can't see your changes, don't forget to clear your caches by navigating to System | Cache Management.

If you want to provide some space between other elements and the AddThis toolbar, add the following CSS to your theme's styles.css file:

.addthis_toolbox {

margin: 10px 0;

}

The resulting product page will now look similar to the following screenshot. You have successfully integrated social sharing tools on your Magento store's product page:

social-media-and-magento-img-8

Integrating product videos from YouTube into the product page

An increasingly common occurrence on ecommerce stores is the use of video in addition to product photography. The use of videos in product pages can help customers overcome any fears they're not buying the right item and give them a better chance to see the quality of the product they're buying. You can, of course, simply add the HTML provided by YouTube's embedding tool to your product description. However, if you want to insert your video on a specific page within your product template, you can follow the steps described in this section.

Product attributes in Magento

Magento products are constructed from a number of attributes (different fields), such as product name, description, and price. Magento allows you to customize the attributes assigned to products, so you can add new fields to contain more information on your product. Using this method, you can add a new Video attribute that will contain the video embedding HTML from YouTube and then insert it into your store's product page template.

An attribute value is text or other content that relates to the attribute, for example, the attribute value for the Product Name attribute might be Blue Tshirt.

Magento allows you to create different types of attribute:

• Text Field: This is used for short lines of text.

• Text Area: This is used for longer blocks of text.

• Date: This is used to allow a date to be specified.

• Yes/No: This is used to allow a Boolean true or false value to be assignedto the attribute.

• Dropdown: This is used to allow just one selection from a list of optionsto be selected.

• Multiple Select: This is used for a combination box type to allow one ormore selections to be made from a list of options provided.

• Price: This is used to allow a value other than the product's price, specialprice, tier price, and cost. These fields inherit your store's currency settings.

• Fixed Product Tax: This is required in some jurisdictions for certain types ofproducts (for example, those that require an environmental tax to be added).

Creating a new attribute for your video field

Navigate to Catalog | Attributes | Manage Attributes in your Magento store's control panel. From there, click on the Add New Attribute button located near the top-right corner of your screen:

social-media-and-magento-img-9

In the Attribute Properties panel, enter a value in the Attribute Code field that will be used internally in Magento to refer this. Remember the value you enter here, as you will require it in the next step! We will use video as the Attribute Code value in this example (this is shown in the following screenshot). You can leave the remaining settings in this panel as they are to allow this newly created attribute to be used with all types of products within your store.

social-media-and-magento-img-10

In the Frontend Properties panel, ensure that Allow HTML Tags on Frontend is set to Yes (you'll need this enabled to allow you to paste the YouTube embedding HTML into your store and for it to work in the template). This is shown in the following screenshot:

social-media-and-magento-img-11

Now select the Manage Labels / Options tab in the left-hand column of your screen and enter a value in the Admin and Default Store View fields in the Manage Titles panel:

social-media-and-magento-img-12

Then, click on the Save Attribute button located near the top-right corner of the screen. Finally, navigate to Catalog | Attributes | Manage Attribute Sets and select the attribute set you wish to add your new video attribute to (we will use the Default attribute set for this example). In the right-hand column of this screen, you will see the list of Unassigned Attributes with the newly created video attribute in this list:

social-media-and-magento-img-13

Drag-and-drop this attribute into the Groups column under the General group as shown in the following screenshot:

social-media-and-magento-img-14

Click on the Save Attribute Set button at the top-right corner of the screen to add the new video attribute to the attribute set.

Adding a YouTube video to a product using the new attribute

Once you have added the new attribute to your Magento store, you can add a video to a product. Navigate to Catalog | Manage Products and select a product to edit (ensure that it uses one of the attribute sets you added the new video attribute to). The new Video field will be visible under the General tab:

social-media-and-magento-img-15

Insert the embedding code from the YouTube video you wish to use on your product page into this field. The embed code will look like the following:

Once you have done that, click on the Save button to save the changes to the product.

Inserting the video attribute into your product view template

Your final task is to allow the content of the video attribute to be displayed in your product page templates in Magento. Open your theme's view.phtml file from /app/design/frontend/default/m18/catalog/product/ and locate the followingsnippet of code:

<?php echo $this->getChildHtml('media') ?> </div>

Add the following highlighted code to the preceding code to check whether a video for the product exists and show it if it does exist:

<?php

$_video-html = $_product->getResource()->getAttribute('video')->getFrontend()->getValue($_product);

if ($_video-html) echo $_video-html ;

<?php echo $this->getChildHtml('media') ?>

</div>

If you now refresh the product page that you have added a video to, you will see that the video appears in the same column as the product image. This is shown in the following screenshot:

social-media-and-magento-img-16 Summary

In this article, we looked at expanding the customization of your Magento theme to include elements from social networking sites. You learned about integrating a Twitter feed and Facebook feed into your Magento store, including social share buttons in your product pages, and integrating product videos from YouTube.