Magento Beginner’s Guide. PacktPub. Book

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?"

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.

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".

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.

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:

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.

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.

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:

This then appears on your Twitter account:

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
 
Magento 1.3 Theme Design Customize the appearance of your Magento e-commerce store with Magento's powerful theming engine
  • Give your Magento stores a unique branded look and feel by creating your own Magento themes
  • Use design techniques to reinforce your brand message and increase sales
  • Customise your Magento theme’s look, feel, layout, and features
  • Promote and improve your Magento store with the use of social media such as Twitter, social bookmarks, and so on
  • Ideas and examples for defining a good print stylesheet
  • Packed with essential hints and tips for effective Magento web design
 http://www.packtpub.com/magento-1-3-theme-design/book


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.

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:

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

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:

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.

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.

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="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="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="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="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!

Summary

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

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
 
Magento 1.3 Theme Design Customize the appearance of your Magento e-commerce store with Magento's powerful theming engine
  • Give your Magento stores a unique branded look and feel by creating your own Magento themes
  • Use design techniques to reinforce your brand message and increase sales
  • Customise your Magento theme’s look, feel, layout, and features
  • Promote and improve your Magento store with the use of social media such as Twitter, social bookmarks, and so on
  • Ideas and examples for defining a good print stylesheet
  • Packed with essential hints and tips for effective Magento web design
 http://www.packtpub.com/magento-1-3-theme-design/book