Integrating Twitter with Magento


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 ( 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 (

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="">
<img src=""
alt="Follow M2MagentoStore on Twitter"/>

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!

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

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 ( 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=""></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'

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

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

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

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.


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

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

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


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:

You've been reading an excerpt of:

Magento 1.4 Themes Design

Explore Title