Twitter Feed

Add a twitter feed to your webstore to promote your social media channels.

Wireframe

Twitter Feed

Preparation Checklist

Before you start this tweak, it's a good idea to run through our preparation checklist below:

  • Read through the Getting Started to get a better sense of how the control panel, Database and Front End store interact.
  • Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
  • Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.
  • The code snippet in this tweak doc uses Bootstrap 3, you may need to alter this code depending on what version of Bootstrap your theme is using. You can find out what version your theme is using here.

Coding Instructions

This tweak can be done completely from the code provided on this page, but it is always best to checkout the source code frome the developer:

Step 1: Open the header template

The header template can be found here /httpdocs/assets/themes/[THEME-NAME]/templates/headers/template.html.

Step 2: Add Twitter feed menu code into template

Paste the following code into the template before the <body> tag:

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Step 3: Get Twitter account details

Three things will be required from the Twitter account:

  • user-id
  • screen_name
  • widget_id

Then you will structure an <a> tag like the following:

<a class="twitter-timeline"
  data-widget-id="{widget_id}"
  href="https://twitter.com/intent/user?user_id={user_id}"
  data-user-id="{user_id}">
    Tweets by Twitter user {user_id}
</a>

Here is an example of how it will look:

<a class="twitter-timeline"
  data-widget-id="600720083413962752"
  href="https://twitter.com/intent/user?user_id=2857397298"
  data-user-id="2857397298">
    Tweets by Twitter user 2857397298
</a>

Step 4: Open the homepage template

The homepage template can be found here /httpdocs/assets/themes/[THEME-NAME]/templates/cms/home.template.html.

Step 5: Add the code

Paste the following code into the template before the </div> tag:

<div class="wrapper-social">
    <div class="container">
        <div class="row">
            <div class="hidden-xs col-sm-12 col-md-4">
                <div class="social-content">
                    <a class="twitter-timeline" href="https://twitter.com/thejulianholden" data-widget-id="600720083413962752" data-user-id="116987116">Tweets by @thejulianholden</a>
                </div>
            </div>
            <div class="visible-xs col-xs-12">
                <div class="social-content">
                    <a class="twitter-timeline" href="https://twitter.com/thejulianholden" data-widget-id="600720083413962752" data-tweet-limit="1" data-user-id="116987116">Tweets by @thejulianholden</a>
                </div>
            </div>
        </div>
    </div>
</div>

Was this article useful?

Be notified when this page is updated. Optional.