Create your own Google Plus embedded timeline

Google Plus doesn't have an easy to use embeddable timeline. Here we look at how to make your own!


Twitter provides a great timeline api which allows you to embed posts from a particular user into your site.

<a href="https://twitter.com/kmtlondon" data-screen-name="kmtlondon" data-show-replies="false" data-widget-id="XXXXXXXX" data-link-color="#b10001" data-chrome="nofooter noborders" data-tweet-limit="3">Tweets by @kmtlondon</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

However when you come to Google Plus very little information exists out there on embedded timelines and gadgets. After a little research I saw it's possible using the api
https://developers.google.com/+/api/

Here is the code to load and output the feed so it matches the twitter gadget:

.gplus {
    margin-bottom: 20px;
    padding: 10px;
    background-color: $white;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.gplus h3 {
    font-weight: bold;
    margin-bottom: 15px;
}
.gplus a {
    color: #000;
}
.gplus p {
    color: #000;
}
.gplus .athr {
    overflow: auto;
    margin-bottom: 5px;
}
.gplus .athr a {
    font-weight: bold;
    color: #000;
}
.gplus .athr a:hover {
    text-decoration: underline;
}
.gplus .athr .name {
    text-decoration: underline;
}
.gplus .athr img {
    width: 32px;
    height: 32px;
    margin-right: 5px;
}
.gplus .athr img, .gplus .athr .name {
    float: left;
    vertical-align: top;
}
.gplus .athr .username {
    font-weight: normal;
    color:#888;
}
.gplus .athr .time {
    float: right;
}
.gplus .posts .itm {
    margin-bottom: 10px;
}
.gplus .posts .cntnt {
    clear: both;
}

html

<div class="gplus"></div>

javascript

var api = 'https://www.googleapis.com/plus/v1/people/',
    user = '+google',
    apiend = '/activities/public',
    key = 'AIzaSyDAVOMugZj0B-2NGi2TuQxIKWNSHbxYaKk',
    fields = 'items(published,title,url,object(content),actor(displayName,url,image(url)))',
    maxResults = 3;

$.ajax({
    url: api + user + apiend + '?key=' + key + '&fields=' + fields + '&maxResults=' + maxResults,
    crossDomain: true,
    dataType: 'jsonp'
}).done(function (data) {

    var me = this,
        items = data.items,
        i = 0,
        html = '';

    for (i = 0; i < items.length; i += 1) {
        html += '<div class="itm">';
        html += '<div class="athr"><a href="' + items[i].actor.url + '" target="_blank" data-track="gplus|click|' + items[i].actor.displayName + '"><img src="' + items[i].actor.image.url + '" alt="" /><div class="name">' + items[i].actor.displayName + '<p class="username">' + user + '</p></div></a><div class="time">' + _timeSince(new Date(items[i].published).getTime()) + '</div></div>';
        html += '<div class="cntnt"><p>' + items[i].object.content + '</p></div>';
        html += '</div>';
    }
    $('.gplus').html(html);

});

function _timeSince(date) {
    var s = Math.floor((new Date() - date) / 1000),
        i = Math.floor(s / 31536000);

    if (i > 1) {
        return i + "y";
    }
    i = Math.floor(s / 2592000);
    if (i > 1) {
        return i + "m";
    }
    i = Math.floor(s / 86400);
    if (i > 1) {
        return i + "d";
    }
    i = Math.floor(s / 3600);
    if (i > 1) {
        return i + "h";
    }
    i = Math.floor(s / 60);
    if (i > 1) {
        return i + "m";
    }
    return Math.floor(s) + "s";
}

You can view it working here:

http://jsfiddle.net/kmturley/zGjtt/41/

And I've made a second version using multiple social network feeds combined into a single timeline:

http://kmturley.github.io/social-feed/

The source is here:
https://github.com/kmturley/social-feed

Hope that helps you get started!