jQuery Plugin To Display Google+ Status Updates On The Website

File Size: 3.37 KB
Views Total: 725
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Display Google+ Status Updates On The Website

Google Plus Status is a dead simple jQuery plugin that fetches and displays Google plus status updates from any user/page. Fully customizable via CSS and Javascript.

How to use it:

1. Include the jQuery javascript library and the jQuery google plus status plugin in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.googleplus-status.min.js"></script>

2. Create an empty DIV element that will be served as a container.

<div class="gtambah"></div>

3. Set the username and maximum status updates you wish to display in the javascript.

var user = '+JqueryscriptNet',
max_timeline = 5;

4. Custom the styles of your Google Plus status.

.gtambah {
 margin-bottom: 20px;
 padding: 10px;
 background-color: $white;
 -webkit-border-radius: 3px;
 border-radius: 3px;
}

.gtambah h3 {
 font-weight: bold;
 margin-bottom: 15px;
}

.gtambah a {
 color: #000;
}

.gtambah p {
 color: #000;
}

.gtambah .saya {
 overflow: auto;
 margin-bottom: 5px;
}

.gtambah .saya a {
 font-weight: bold;
 color: #000;
}

.gtambah .saya a:hover {
 text-decoration: underline;
}

.gtambah .saya .nama {
 text-decoration: underline;
}

.gtambah .saya img {
 width: 32px;
 height: 32px;
 margin-right: 5px;
}

.gtambah .saya img,
.gtambah .saya .nama {
 float: left;
 vertical-align: top;
}

.gtambah .saya .username {
 font-weight: normal;
 color: #888;
}

.gtambah .saya .waktu {
 float: right;
}

.gtambah .posts .kotak {
 margin-bottom: 10px;
}

.gtambah .posts .status {
 clear: both;
}

This awesome jQuery plugin is developed by bachors. For more Advanced Usages, please check the demo page or visit the official website.