About the Author

Jerry Ocanas

Software Engineer, Broadleaf Commerce

in Development 4 min read

Four Steps to Integrate Twitter into eCommerce

It used to be fairly straight forward to grab your tweets and repost them to your website. One would simply need to hit a URL and be treated with the gold mine of the nuggets of brilliance that one had tweeted. All setup aside, one could get their eCommerce website to retrieve and post by simply parsing the results and posting them as needed.

Since not everyone checks twitter regularly, this allowed marketing efforts of an eCommerce business to not only target their twitter followers but also any user that landed on their site.

Displaying Tweets on your eCommerce site using the Twitter API v1.1

Starting on October 5th, 2012 Twitter released the version 1.1 of their API. It is a very significant change to their API but we will focus on the change that affects our capacity to read our tweets so we can post them on our website. The need for authentication.

This blog will highlight the steps to:

  • Setup Twitter to grant access to your eCommerce website.
  • Use Spring Social to make requests.
  • Use Thymeleaf to display your tweets.

Spring Social to the Rescue

In version 1.1 Twitter requires that every request to the API be authenticated with OAuth. We will now need to setup the groundwork for our eCommerce site to make a proper request before we can read back our tweets. There are a few examples by Twitter using different libraries but if your using Maven with your project by far the simplest way is using Spring Social.

Fellow Broadleafer Elbert Bautista has already shown us how to use Spring Social to allow login functionality with Twitter and Facebook. Our use case is similar but simpler since all we care about is read-only access to our Home Timeline to display our tweets.

Using spring social it becomes really simple to set up the process of getting your tweets. And since the guys at spring social already did a lot of the heavy lifting it's really easy to display the information that you want to show your visitors.

Setting up Twitter

The first step is to grant access for our webapp. We need to go to dev.twitter.com and get the credentials that will be used.

  • Login and create an application with My Applications.
  • From your new application OAuth Settings
    1. Get consumer Key
    2. Get consumer Secret
    3. Create an access token
    4. Get accessToken
    5. Get acessTokenSecret

This access token will only grant us read-only access, but since that is all we need we don't have to generate a unique access token everytime we make a request via our site.

Setting up your project

Now that we have the information needed to make valid requests to Twitter, let's setup Spring Social.

Step 1) Add the following dependency to your root POM.


Step 2) Add the following dependency to your site POM


Step 3) Make the request

Broadleaf uses the Thymeleaf templating engine so the code below is using a Thymleaf processor written in java. How to extend a thymeleaf processor is beyond the scope of this article but Thymeleaf has a great tutorial on how to do it.

String consumerKey = "consumer_key";
String consumerSecret = "consumer_secret";
String accessToken = "token_access";
String accessTokenSecret = "token_secret";

Twitter twitter = new TwitterTemplate(consumerKey, consumerSecret, accessToken, accessTokenSecret);

List<tweet> tweets = twitter.timelineOperations().getUserTimeline(user, 1, maxResults);

You can read more about the timeline operations available but the Spring Social guys have made it pretty straight forward. The above request will get us back a list of tweets the size of maxResults for the given user. We have a wealth of information for each tweet and it's up to you how you want to parse and format it.

Step 4) Show me your Tweets

Now all that is left is to send the tweets back to the model to have it displayed in our HTML any way that your designer has setup. In our case we want to display a list of our tweets to the visitors of our site.

Let's do this by sending back a list of tweets using the Thymeleaf processor's functionality.

addToModel(arguments, "tweetList", tweets);

On the client side we simply iterate over the list and get the text.

<div id="tweet_deck">
    <span  th:each="tweet : ${tweetList}">

That's it! Our eCommerce site is now ready to display our tweets. Be sure to keep checking back for more integrations using Broadleaf and Spring Social.