Integrating Twitter with Magento

Exclusive offer: get 50% off this eBook here
Magento 1.4 Themes Design

Magento 1.4 Themes Design — Save 50%

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

$23.99    $12.00
by Richard Carter | January 2011 | Open Source

With the emerging popularity of the 'social web', it is becoming more and more common to integrate aspects from social media tools such as Twitter and Facebook into e-commerce stores, such as those powered by the Magento platform. Social media can provide a fantastic opportunity for e-commerce store owners to participate and engage with existing and potential customers while increasing the awareness of their products among a wider audience.

This article by Richard Carter, author of the book Magento 1.4 Themes Design, covers integrating your Magento store with Twitter, including:

  • Adding a 'Follow Us On Twitter' button
  • Making use of the Twitter 'latest tweets' widgets to your store

 

Magento 1.4 Themes Design

Magento 1.4 Themes Design

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

  • Install and configure Magento 1.4 and learn the fundamental principles behind Magento themes
  • Customize the appearance of your Magento 1.4 e-commerce store with Magento's powerful theming engine by changing Magento templates, skin files and layout files
  • Change the basics of your Magento theme from the logo of your store to the color scheme of your theme
  • Integrate popular social media aspects such as Twitter and Facebook into your Magento store
        Read more about this book      

(For more resources on Magento, see here.)

Twitter (http://twitter.com) is a social network that lets its users follow others and read short messages (tweets) sent by them; it is a micro-blogging system.

You will need to create a Twitter account or log in to your store's existing Twitter account to follow the next steps.

Adding a 'Follow Us On Twitter' button to your Magento store

One of the more simple ways to integrate your store's Twitter feed with Magento is to add a 'Follow Us On Twitter' button to your store's design.

Generating the markup from the Twitter website

Go to the Twitter Goodies website (http://twitter.com/about/resources):

Select the Follow Buttons option and then select the Looking for Follow us on Twitter buttons? towards the bottom of the screen:

The buttons will now change to the FOLLOW US ON Twitter buttons:

Select the style of button you'd like to make use of on your Magento store and then select the generated HTML that is provided in the pop-up that is displayed:

The generated HTML for the M2 Store's Twitter account (with the username of M2MagentoStore) looks like the following:

<a href="http://www.twitter.com/M2MagentoStore">
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://twitter-badges.s3.amazonaws.com/follow_us-a.png"
alt="Follow M2MagentoStore on Twitter"/>
</a>

Adding a static block in Magento for your Twitter button

Now you will need to create a new static block in the Magento CMS feature: navigate to CMS Static Blocks| in your Magento store's administration panel and click on Add New Block.

As you did when creating a static block for the supplier logos used in your store's footer, complete the form to create the new static block. Add the Follow Us On Twitter button to the Content field by disabling the Rich Text Editor with the Show/Hide Editor button and pasting in the markup you generated previously:

You don't need to upload an image to your store through Magento's CMS here as the Twitter buttons are hosted elsewhere.

Note that the Identifier field reads follow-twitter—you will need this for the layout changes you are about to make!

Magento 1.4 Themes Design Customize the appearance of your Magento 1.4 e-commerce store with Magento's powerful theming engine
Published: January 2011
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on Magento, see here.)

Updating your theme's layout file for the 'Follow Us' button

Open your theme's local.xml file in its /layout directory (for example, /app/ design/frontend/default/m2/layout) and locate the <default> handle in your store, inserting the following XML to add the new static block to the right-hand column (name="right")

<reference name="right">
<block type="cms/block" name="follow-twitter" after="-">
<action method="setBlockId">
<block_id>follow-twitter</block_id>
</action>
</block>
</reference>

Save and upload your local.xml file, and then refresh the frontend of your Magento store and you will see your new FOLLOW US ON Twitter button appear in your theme:

Embedding a 'latest tweets' widget into your Magento store

You may prefer to directly embed your store's messages from Twitter into your store. Return to the Twitter Resources page (http://twitter.com/about/resources) and select the Widgets option this time. From the tabs on the left-hand side of the screen, select the My Website option and you will then be presented with a list of Twitter widgets you can use on your store:

Select the Profile Widget option at the top and you will then need to type the Twitter account's username into the Username field presented if it is not already populated. You can also style the widget through the tabs along the left-hand side of the screen. In particular you will want to customize the Dimensions settings so that the widget fits in the column of your Magento store's theme (a value of around 180px here works well):

Once you've finished, click on the Finish & Grab Code button at the bottom of the screen:

Copy the HTML generated by Twitter for your widget at this point and log in to your Magento administration panel. The HTML generated is all within <script> elements and should look similar to the following:

<script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 5,
interval: 6000,
width: 180,
height: 300,
theme: {
shell: {
background: '#f76300',
color: '#ffffff'
},
tweets: {
background: '#f76300',
color: '#ffffff',
links: '#a04000'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser(‘M2MagentoStore’).start();
</script>

The last line inside the second <script> element is where your Twitter username is defined, so you can change the value here if you ever move Twitter accounts!

Return to Magento's CMS feature and create another static block in CMS Static Blocks| by clicking on the Add New Block button, and filling the Block Title, Identifier, and Status fields with suitable values (note that the Identifier value is widget-twitter here as you'll need this soon):

Click on Save Block at the top-right of your screen and then open your theme's local.xml file (in the /app/design/frontend/default/m2/layout directory) for editing. Within the <default> handle, you can insert the following layout to add your latest tweets to the left-hand column of your store:

<reference name="left">
<block type="cms/block" name="widget-twitter" after="-">
<action method="setBlockId">
<block_id>widget-twitter</block_id>
</action>
</block>
</reference>

The Twitter widget will now appear in your store's left-hand column (for example, your store's About page may still have a left-hand column), below any other content blocks you have displayed in it:

You could change the position of the widget's block within the column by altering after="-" to before="-".

Integrating Twitter through Magento extensions

There are a number of extensions that you can use to integrate Twitter into your Magento store's theme with less effort than the methods seen previously, but they tend to be more restrictive as to where you can use them or in how they function within Magento.

Name of extension

Description of extension

Magentweet

http://www.magentweet.com

Magentweet allows you to embed Twitter in your store's CMS pages and can be configured to show either tweets from a specified Twitter account or real-time search results for a specific phrase or 'hashtag'.

Twitter Tweet Button

http://www.magentocommerce.com/magentoconnect/C3+Media/extension/4446/c3_tweetbutton

The Twitter Tweet Button extension for Magento allows you to add a button to various pages in your store (such as the store's homepage, CMS pages, category pages, product pages) which then allows your store's visitor to tweet the page of the store that they are currently viewing.

This extension is fairly configurable, with options to configure the styling of the button, the language it appears in and for you to manually set the URL, and message that is to be tweeted.

Share Tweet

http://www.magentocommerce.com/magento-connect/prateek+gupta./extension/3862/share_tweet

Share Tweet is a paid extension for Twitter which provides integration with Magento to allow your customers to share their thoughts about products and pages on your store. The extension supports the OAuth method of authentication with Twitter and is configurable.

VK_TwitterPL

http://www.magentocommerce.com/magento-connect/vivek291186/extension/4956/vk_twitterpl

The VK_TwitterPL extension for Magento allows you to embed the latest tweets from a specified Twitter account into your Magento store but is less configurable than other extensions such as Magentweet.

Mage SlideTweet

http://www.magentocommerce.com/magento-connect/webkul/extension/5015/mage_slidetweet

The Mage SlideTweet extension for Magento is a paid extension, that displays tweets that slide in and out. The extension is highly configurable with the width, height, and color of the widget being definable, and you are also able to configure the speed at which new tweets slide into the page.

The extension is embedded by making use of the 'embed widget' tool in Magento's content editor.

Meanbee Promote/Share Order

http://www.magentocommerce.com/magento-connect/Meanbee/extension/4103/meanbee_ordershare

The Meanbee Promote/Share Order extension for Magento adds a 'tweet this' button to your store's order success page, enabling your customers to tweet once they've placed an order through your store.

This extension also provides a Facebook 'Like' button with similar functionality.

Magento on Twitter
The Magento project has its own Twitter account at http://twitter.com/magento.

Summary

In this article, you have explored various methods of integrating social media from Twitter into your Magento store including adding a Follow Us On Twitter button to your store and embedding a Twitter 'latest tweets' widget.

In the next article, we will take a look at Integrating Facebook with Magento.


Further resources on this subject:


Magento 1.4 Themes Design Customize the appearance of your Magento 1.4 e-commerce store with Magento's powerful theming engine
Published: January 2011
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


Magento 1.4   Development Cookbook
Magento 1.4 Development Cookbook

Magento 1.3 Theme Design
Magento 1.3 Theme Design

Magento 1.3: PHP Developer's Guide
Magento 1.3: PHP Developer's Guide

jQuery 1.4 Reference Guide
jQuery 1.4 Reference Guide

OpenCart 1.4 Beginner's Guide
OpenCart 1.4 Beginner's Guide

Cocos2d for iPhone 0.99   Beginner's Guide
Cocos2d for iPhone 0.99 Beginner's Guide

Drupal 7 Module Development
Drupal 7 Module Development

Inkscape 0.48 Essentials for Web Designers
Inkscape 0.48 Essentials for Web Designers

Your rating: None Average: 5 (1 vote)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
k
x
T
G
L
8
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