Today Engage121 announced they are launching a new version of their product that integrates with Traackr: Engage121 Launches Version 2.1

How do they do that you might ask? Well, very easy, they are using our awesome API. I thought I would show you how you can do it to. We are going to build a little Traackr widget from one of our alpha lists, Cloud Computing. The widget will display random posts from the list on a web page.

First of, the HTML for the page. Let’s keep it simple. We load JQuery because we will need it later to load the A-List via the API and display the posts.

The body contains a simple DIV and TABLE where we will display the image for the influencer and the text of the post.

<!DOCTYPE html>
<html>
    <head>
        <title>AList Widget</title>
        <script type=“text/javascript”
            src=“https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”>
        </script>
    </head>
    <body>
        <h1>A-List Widget</h1>

        <!– alist title –>
        <div id=“alist-title”><i>Loading</i></div>

        <!– random post to display –>
        <div id=“alist-post” style=”display: none; margin-top: 15px;”>
            <table><tr>
                <td>
                    <!– author’s image –>
                    <img id=“author” src=”“/>    
                </td>
                <td>
                    <!– post text –>
                    <div id=”post”></div>
                </td>
            </tr></table>
        </div>

    </body>
</html>

Now, the fun part. The trick it load to load the A-List via our API, here is the link for it. If you are a Traackr customer, this link is accessible from your campaign’s setting.

Once we have loaded the A-List, we can simply call the Javascript function show_post() every 5 seconds to load a new post. We select each post by randomly selecting 1 influencer from the list, then randomly select 1 channel from this influencer and finally 1 random post. Here is what it looks like:

<script type=“text/javascript”>
            $(document).ready(function(){
                $.ajax({
                    url: ‘http://alist.traackr.com/influencers/all/4233.json’,
                    data: {sec: ‘2728ea00020714632aa811e6f4a89e3a’},
                    dataType: ‘jsonp’,
                    jsonp: ‘jsonpcallback’,
                    success: function(data) { show_alist(data); }
                });
            });

            alist = null;

            var show_alist = function(data) {
                // read list and display title
                alist = data;
                $(’#alist-title’).html(alist.name);
                setTimeout(show_post, 5000);
            } // End function show_alist()

            var show_post = function() {
                // Find random influencer
                current_influencer = Math.floor(Math.random() * (alist.list.length – 1));
                influencer = alist.list[current_influencer];
                // Find random channel
                current_channel = Math.floor(Math.random() * (influencer.channels.length – 1));
                channel = influencer.channels[current_channel];
                // Find channel has posts
                if ( channel.posts.length > 0 ) {
                    // FInd random post
                    current_post = Math.floor(Math.random() * (channel.posts.length – 1));
                    // get data
                    img  = influencer.pics.small;
                    post = channel.posts[current_post].title;
                    url  = channel.posts[current_post].url;
                    // display
                    $(’#alist-post’).hide();
                    $(’#author’).attr(‘src’, img);
                    $(’#post’).html(’<a target=“_blank” href=”’ + url + ’“>’ + post + ’</a>’);
                    $(’#alist-post’).fadeIn(750);
                    setTimeout(show_post, 5000);
                }
                else {
                    setTimeout(show_post, 100);
                }
            }
        </script>

15 min in the oven at 350 and we are done. Check out the final result

And the best part about it? Traackr’s A-Lists refresh automatically weekly, so without having to do anything, just come back every week and discover new content.

That’s all folks!


Also published on Medium.