How to display twitter posts using javascript

I think that displaying your Twitter posts on your website is a wonderful way to show people in-time news. This feature can be very useful for your project. Because it can can inspire your website’s visitors to follow you on Twitter. I am going to create simple script which loads twitter posts and renders into HTML format using JsRender jQuery library. Everything is on the client side.

Let’s start coding !

Contents

Step 1. HTML
Step 2. CSS
Step 3. JavaScript
Conclusion

Live Demo

Step 1. HTML

Our HTML markup is very easy:

<!DOCTYPE html> 
  
<html lang="en"> 
  
<head> 
  
    <meta charset="utf-8" /> 
  
    <title>My twitter posts | Script Tutorials</title> 
  
    <link href="css/main.css" rel="stylesheet" type="text/css" /> 
  
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
  
    <script> 
  
        google.load("jquery", "1.7.1"); 
  
    </script> 
  
    <script type="text/javascript" src="js/jsrender.js"></script> 
  
    <script type="text/javascript" src="js/main.js"></script> 
  
    <!-- define template for our units --> 
  
    <script id="twitterTemplate" type="text/x-jsrender"> 
  
        <div id="{{:id}}"> 
  
            <div class="elem"> 
  
                <p><b>{{:user.name}}:</b> {{:text}} <span>(on: {{:created_at}})</span></p> 
  
                <a href="https://twitter.com/{{:user.screen_name}}"><img src="{{:user.profile_image_url}}" alt="{{:user.name}}" /></a> 
  
            </div> 
  
        </div> 
  
    </script> 
  
</head> 
  
<body> 
  
    <div class="content-main"> 
  
        <h2 class="content-header">Tweets</h2> 
  
        <div class="content-body" id="results"></div> 
  
    </div> 
  
</body> 
  
</html>

You can see here a template for twitter posts (twitterTemplate) for JsRender, and a simple container for future posts (<div class=”content-body” id=”results”></div>)

Step 2. CSS

Now, we have to prepare CSS stylesheet for our demonstration:

.content-main { 
  
    -webkit-border-radius:6px; 
  
    -moz-border-radius:6px; 
  
    border-radius:6px; 
  
    background-color: #FFFFFF; 
  
    border : 1px solid #E8E8E8; 
  
    margin: 40px auto; 
  
    width: 520px; 
  
} 
  
.content-header { 
  
    -webkit-border-radius: 5px 5px 0 0; 
  
    -moz-border-radius: 5px 5px 0 0; 
  
    border-radius: 5px 5px 0 0; 
  
    border-bottom: 1px solid #E8E8E8; 
  
    min-height: 20px; 
  
    padding: 12px; 
  
} 
  
.content-body > div { 
  
    border-bottom: 1px solid #E8E8E8; 
  
    min-height: 51px; 
  
    padding: 9px 12px; 
  
    position: relative; 
  
} 
  
.content-body > div .elem { 
  
    margin-left: 58px; 
  
} 
  
.content-body > div img { 
  
    cursor: pointer; 
  
    left: 12px; 
  
    position: absolute; 
  
    top: 12px; 
  
} 
  
.content-body > div p { 
  
    color: #333333; 
  
    font-size: 14px; 
  
    line-height: 18px; 
  
} 
  
.content-body > div span { 
  
    float: right; 
  
    color: #999999; 
  
    font-size: 12px; 
  
}

Step 3. JavaScript

And finally – a very small Javascript:

// display tweets function 
  
function displayTweets(data) { 
  
    // render twitter posts with 'twitterTemplate' template 
  
    $('#results').html( 
  
        $('#twitterTemplate').render(data) 
  
    ); 
  
} 
  
// on page load 
  
 $(window).load(function() { 
  
    // your twitter name 
  
    var name = 'AramisGC'; 
  
    // amount of tweets to display 
  
    var count = 10; 
  
    // create script element and append it to the body 
  
    var ts = document.createElement('script'); 
  
    ts.type = 'text/javascript'; 
  
    ts.async = true; 
  
    //ts.src = 'http://twitter.com/statuses/user_timeline.json?screen_name=' + name + '&count=' + count + '&callback=displayTweets'; 
  
    ts.src = 'https://api.twitter.com/1/statuses/user_timeline.json?screen_name=' + name + '&count=' + count + '&callback=displayTweets'; 
  
    $('body').append(ts); 
  
});

Basically, we have to prepare extra Script which requires our last tweets (timeline) in JSON format from twitter website. And then, we just should pass received results into our ‘twitterTemplate’ template to render the results.

Important: Due Twitter API v1.0 is deprecated, we have to use updated URL to obtain user timeline. Pay attention to line 24 in main.js file.

Live Demo

[sociallocker]

download in archive

[/sociallocker]

Conclusion

I hope that everything is clean in today’s code. If you have any suggestions about further ideas for articles – you are welcome to share them with us. Good luck in your work!