How to display twitter posts using javascript

How to display twitter posts using javascript

6 72670
How to display twitter posts using javascript

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 !

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!

SIMILAR ARTICLES

Understanding Closures

0 19905

0 17155

6 COMMENTS

      • Hi and thanks alot for the script.
        No problems to use it, easy and clear.

        Just one question.
        the var count number includes my tweets and my follower’s too.
        It means if I just want to display my three last tweets, and I put var count = 3, I have no insurance that 3 tweets will be displayed.
        Depends if I have tweets from my followers between my tweets or no…
        Is there a solution, to be sure, to display always the same tweets numbers ?

        Thanks per advance.

  2. Hello Mattheoh,
    As I know – it should display only your posts (not by your followers)

Leave a Reply to Mohamed Cancel reply