Social Media in Magento

Exclusive offer: get 50% off this eBook here
Magento 1.3 Theme Design

Magento 1.3 Theme Design — Save 50%

Customize the appearance of your Magento e-commerce store with Magento's powerful theming engine

$23.99    $12.00
by Richard Carter | July 2009 | Open Source PHP

This article by Richard Carter states that our theming of Magento does not have to stop at changing the way it looks. We can also add aspects of social media to it, such as:

  • Integrating your Magento store with Twitter
  • Improving your store's customer service
  • Using social bookmarking tools such as AddThis to help your customers spread the word about your store across the Internet

With so many e-commerce stores on the Internet, using social media can make a huge difference to your store's fortunes. It can also increase your potential customers and ensure that customers continue to come back.

Integrating Twitter with Magento

Twitter (http://twitter.com) is a micro-blogging service, which allows its users to send short messages to their followers, answering the question "what are you doing now?"

Social Media in Magento

After registering a Twitter account, you can begin to follow other Twitter users. When they update their status, you will see it in your timeline of what people you follow say.

Social Media in Magento

When you sign up for a Twitter account, it is usually best to sign up as the name of your store—for example, "Cheesy Cheese Store" rather than "RichardCarter", simply because your customers are more likely to search for the name of the store rather than your own name.

Tweeting: Ideas for your store's tweets

If you look at other businesses on Twitter, you'll see that there are a number of ways to promote your store on Twitter without losing followers by being too "spammy".

  • Some companies give voucher codes to Twitter followers—a good way to entice new customers
  • Others use Twitter to host competitions for free items—a good way to reward existing customers
  • You can also release products to your Twitter followers before releasing them to other customers

Displaying your Twitter updates on your Magento store

Twitter can be a powerful tool for your store on its own, but you can integrate Twitter with your Magento store to drive existing customers to your Twitter account, which can help to generate repeat customers.

There are a few ways Twitter can be used with Magento, the most versatile of which is the LazzyMonks Twitter module.

Installing the LazzyMonks Twitter module

To install the LazzyMonks module, visit its page on the Magento Commerce web site (http://www.magentocommerce.com/extension/482/lazzymonks-twitter, and retrieve the extension key, after agreeing to the terms and conditions. Log in to your Magento store's administration panel, and open the Magento Connect Manager in the Magento Connect option under the System tab.

Social Media in Magento

Once this has loaded, paste the extension key in to the text box next to the Paste extension key to install label, as shown in the following screenshot:

Social Media in Magento

This will install the module for you. Return to your Magento store's administration panel, and you will see a Twitter option in the navigation. The View Tweets option allows you to view updates made to your Twitter account. The Post Update option allows you to update Twitter from your store's administration panel.

Social Media in Magento

Firstly, you will need to configure the module's settings, which can be found under the Twitter option of the Configuration section of your store's administration panel, under the System tab.

Social Media in Magento

The Twitter Login options are of particular interest. Here you will need to enter your Twitter account's username and password.

Once this has been saved, you can post a status update to your Twitter account through Magento's administration panel:

Social Media in Magento

This then appears on your Twitter account:

Social Media in Magento

Your tweets will also be displayed on your store, as a block beneath other content and can be styled with CSS in your Magento theme by addressing div.twitter.

Other ways to integrate Twitter with Magento

The other way to integrate your Twitter feed with Magento is by embedding Twitter's widgets into your site. To use these, log in to your Twitter account, and go to http://twitter.com/widgets. You can then use the HTML provided within the Magento templates to insert your Twitter updates into your store.

Adding your Twitter feed through Magento's CMS

Alternatively, you can insert your Twitter account's updates into any page managed through Magento's Content Management System. In Magento's administration panel, select CMS | Manage Pages, and select the page that you want your Twitter stream to appear in. Within your page, simply paste the code that Twitter produces when you select the type of Twitter "badge", which you want to display on your store.

Consider creating a new block for your Twitter statuses, so that it can be removed from pages where it is likely to be distracting (for example, the checkout page).

Magento 1.3 Theme Design Customize the appearance of your Magento e-commerce store with Magento's powerful theming engine
Published: July 2009
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

Integrating Get Satisfaction with Magento

Get Satisfaction (http://getsatisfaction.com) is an "unofficial" customer support service. There are other similar customer satisfaction services such as eKomi (http://www.ekomi.co.uk), which can be integrated with Magento in a similar fashion.

Social Media in Magento

Though there are currently no modules for Magento, you may want to consider signing up for a Get Satisfaction account and adding a link to your store's footer area, asking for customer feedback. Free accounts are available, although the number of visits per month your account can receive is limited.

By resolving problems and answering questions in an open way, you can actively enhance your store's reputation online, so expect what seem to be silly or pointless questions (they could help you to improve your store's design in the future) and remain polite and friendly!

To add the link, sign up for a company account on Get Satisfaction. Open your store's administration panel, and select the Static blocks option under CMS:

Social Media in Magento

You can now select the Footer links static block from the list:

Social Media in Magento

The address of the Cheesy Cheese Store's Get Satisfaction account is http://www.getsatisfaction.com/cheesycheesestore, so we need to add a link to this in the content.

By default, the content already in the Footer Links block is similar to:

<ul>
<li><a href="{{store url=""}}about">About Us</a></li>
<li class="last"><a href="{{store url=""}}
customer-service">Customer Service</a></li>
</ul>

We'll change the Customer service link currently there to Customer feedback, and link to our store's Get Satisfaction account.

<ul>
<li>
<a href="{{store url=""}}about-magento-demo-store">About Us</a>
</li>
<li class="last">
<a href="http://www.getsatisfaction.com/cheesycheesestore"
title="Customer feedback">Customer feedback</a>
</li>
</ul>

Once you have saved these changes, the new link will appear in your store's footer.

Integrating social bookmarking with Magento

Social bookmarking services allow users to store and organize links to their favorite web sites online. By integrating social bookmarking with your Magento store, you allow customers to interact with your business outside the confines of your store, ensuring that your customers are still considering your products elsewhere.

Social bookmarking tools

There are a huge number of these services on the web, but some bookmarking tools are more popular than others. The following are a few examples:

Your store's web pages could become very crowded if you listed every service available. Luckily, there are services that allow your visitors to choose which service to save their link to, for example:

  • AddThis
  • Socializer

These allow much easier integration with social bookmarking tools, as they aggregate at least the most popular services into one.

Socializer

Ekstreme's Socializer (http://ekstreme.com/socializer) allows users to bookmark a huge range of bookmarking services. Creating a link to Socializer is simple. You pass an address (URL) and the title of the page to be bookmarked. A link to Socializer looks like this:

<a
href='http://ekstreme.com/socializer/?
url=http://www.yourstore.com&title=Title+of+your+store'
title='Bookmark this page'>Bookmark this page>
</a>

Your visitor is then presented with a page similar to the following screenshot, with options to save the page in various bookmarking services:

AddThis

AddThis (http://www.addthis.com) is the #1 bookmarking and sharing service, allowing visitors to your store to bookmark your Magento store with over 50 different online bookmarking services.

Social Media in Magento

AddThis also allows its users to save the page to their preferred bookmarking service. It also has options for the user to print the page and email a friend too.

Social Media in Magento

You can use AddThis without registering, but registering allows you to track which pages are being shared and how.

Using AddThis in Magento

As AddThis offers more options to our visitors, we'll use it in the Cheesy Cheese Store's new theme. The first step to using AddThis in Magento is to select which button you would like to display. Go to http://www.addthis.com/web-button-select, and make a selection. For Cheesy Cheese Store, we'll use the option that we saw previously. The code that AddThis generates looks like this:

<!-- AddThis Button BEGIN -->
<script type="text/javascript">
var addthis_pub="4a0c2aff012daef5";
</script>
<a href="http://www.addthis.com/bookmark.php?v=20"
onmouseover="return addthis_open(this, '', '[URL]',
'[TITLE]')"onmouseout="addthis_close()" onclick="return
addthis_sendto()">
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://s7.addthis.com/static/btn/lg-bookmark-en.gif"
width="125" height="16" alt="Bookmark and Share"
style="border:0"/>
</a>
<script type="text/javascript"
src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://s7.addthis.com/js/200/addthis_widget.js"></script>
<!-- AddThis Button END -->

When you sign up to AddThis, you'll be given your own publisher identity number, which you'll need to use to replace the publisher identity number shown in the previous code snippet.

We can add this to the addto.phtml template file in our Magento theme, which can be found in the app/design/frontend/default/cheese2/template/catalog/product/view directory.

<?php $_product = $this->getProduct() ?>
<ul class="add-to-box">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<li>
<a href="<?php echo $this->helper
('wishlist')->getAddUrl($_product) ?>"><?php echo $this
->__('Add to Wishlist') ?></a>
</li>
<?php endif; ?>
<?php if($_compareUrl=$this->helper('catalog/product_compare')
->getAddUrl($_product) ): ?>
<li>
<span class="pipe">|</span> <a href="<?php echo $_compareUrl
?>"><?php echo $this->__('Add to Compare') ?></a>
</li>
<?php endif; ?>
</ul>

We can add our link just above the closing </ul>:

<!-- AddThis Button BEGIN -->
<li><script type="text/javascript">var
addthis_pub="4a0c2aff012daef5";</script>
<a href="http://www.addthis.com/bookmark.php?v=20" onmouseover="return addthis_open
(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()">
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://s7.addthis.com/static/btn/lg-bookmark-en.gif" width="125" height="16"
alt="Bookmark and Share" style="border:0"/></a></li>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://s7.addthis.com/js/200/addthis_widget.js"></script>
<!-- AddThis Button END -->

This will mean that the AddThis button will be displayed alongside the links to compare products and to add a product to your Magento store. We can also remove the last <script> element from the code highlighted above, by using a Magento layout file to add it to the <head> of category pages.

To change the layout of our theme, we need to edit the catalog.xml file in the app/design/frontend/default/cheese2/layout directory. Locate the section (usually near the top) that looks like this:

<default>
<reference name="top.menu">
<block type="catalog/navigation" name="catalog.topnav"
template="catalog/navigation/top.phtml"/>
</reference>

We can insert a snippet of XML in to the relevant layout file so that Magento only inserts the JavaScript files required by AddThis when they are needed.

<default>
<reference name="top.menu">
<block type="catalog/navigation" name="catalog.topnav"
template="catalog/navigation/top.phtml"/>
</reference>
<reference name="head">
<action method="addJs">
<script>http://s7.addthis.com/js/200/addthis_widget.js</script>
</action>
</reference>

The AddThis button is now visible in our theme, allowing our store's customers to share our products with their friends and family!

Social Media in Magento

Summary

We have explored a few ideas on promoting and improving your Magento store with the use of social media, including:

  • Using social bookmarks
  • Using Twitter, the micro-blogging service
  • Integrating customer feedback services like Get Satisfaction with Magento

There's still much we can do to improve our Magento theme, like creating print stylesheets. The best way to discover what works for your store and what doesn't is to experiment!

Magento 1.3 Theme Design Customize the appearance of your Magento e-commerce store with Magento's powerful theming engine
Published: July 2009
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Richard Carter

Richard Carter is a web designer and frontend web developer based in Newcastle upon Tyne in the North East of England.

His experience includes many open source e-commerce and content management systems, including Magento, MediaWiki, WordPress, and Drupal. He has worked with clients including the University of Edinburgh, University College Dublin, Directgov, NHS Choices, and BusinessLink.gov.uk.

He is a creative director at Peacock Carter Ltd (peacockcarter.co.uk), a web design and development agency based in the North East of England. He graduated from the University of Durham in Software Engineering, and currently lives in Newcastle upon Tyne. He blogs at earlgreyandbattenburg.co.uk and tweets as @RichardCarter and @PeacockCarter.

This is his sixth book. He has previously written MediaWiki Skins Design, Magento 1.3 Theme Design, Magento 1.4 Theme Design, Joomla! 1.5 Templates Cookbook, and The Beginner's Guide to Drupal Commerce, and acted as a technical reviewer on MediaWiki 1.1 Beginners Guide, Inkscape 0.48 Illustrator's Cookbook, and Apress' The Definitive Guide To Drupal 7.

Books From Packt

WordPress 2.7 Complete
WordPress 2.7 Complete

WordPress 2.7 Cookbook
WordPress 2.7 Cookbook

Joomla! 1.5 Template Design
Joomla! 1.5 Template Design

Expert Cube Development with Microsoft SQL Server 2008 Analysis Services
Expert Cube Development with Microsoft SQL Server 2008 Analysis Services

Magento: Beginner's Guide
Magento: Beginner's Guide

Joomla! E-Commerce with VirtueMart
Joomla! E-Commerce with VirtueMart

Drools JBoss Rules 5.0 Developer's Guide
Drools JBoss Rules 5.0 Developer's Guide

Flex 3 with Java
Flex 3 with Java

Your rating: None Average: 4 (1 vote)
Thank you by
Thank you for the great help
Noah by
This was perfect for adding the add-this info. Thanks!

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
S
j
v
5
6
Y
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software