├── .gitattributes
├── LICENSE
├── README.md
├── css
    └── GPstream.css
├── index.html
└── js
    └── GPstream.js


/.gitattributes:
--------------------------------------------------------------------------------
1 | *.html linguist-language=Javascript
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Bachors
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | jQuery-Google-Plus-Stream
 2 | ===================================
 3 | 
 4 | <p>jQuery Google Plus Stream is jQuery plugin to display your google+ timeline steams (posts, photos, videos, article) on your website.</p>
 5 |  
 6 | # Sample
 7 | HTML
 8 | <pre>
 9 | &lt;div id=&quot;GPstream&quot;&gt;&lt;/div&gt;
10 | </pre>
11 | JS
12 | <pre>
13 | <script>
14 | GPstream({
15 |     user: '+username or userID',
16 |     key: 'API KEY'
17 | });
18 | </script></pre>
19 | 


--------------------------------------------------------------------------------
/css/GPstream.css:
--------------------------------------------------------------------------------
  1 | /******************************************************
  2 | * #### jQuery-Google-Plus-Stream v2.0 ####
  3 | * Coded by Ican Bachors 2014.
  4 | * https://github.com/bachors/jQuery-Google-Plus-Stream
  5 | * Updates will be posted to this site.
  6 | ******************************************************/
  7 | 
  8 | #GPstream {
  9 | 	display: block;
 10 | 	width: 100%;
 11 | 	box-sizing: border-box;
 12 | 	margin: 0;
 13 | 	padding: 0
 14 | }
 15 | 
 16 | #GPstream .box {
 17 | 	display: block;
 18 | 	width: 100%;
 19 | 	background: #fff;
 20 | 	color: #000;
 21 | 	padding: 0;
 22 | 	margin-bottom: 30px;
 23 | 	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
 24 | }
 25 | 
 26 | #GPstream .box iframe,
 27 | #GPstream .box video {
 28 | 	width: 100%;
 29 | 	height: auto;
 30 | 	min-height: 260px;
 31 | }
 32 | 
 33 | #GPstream .box .status-message {
 34 | 	display: block;
 35 | 	overflow: hidden;
 36 | 	padding: 15px 15px 5px;
 37 | 	word-wrap: break-word;
 38 | }
 39 | 
 40 | #GPstream .box .status-message b {
 41 | 	font-size: 1.5em;
 42 | }
 43 | 
 44 | #GPstream .box .quot {
 45 | 	text-align: center;
 46 | 	font-size: 1.4em;
 47 | 	line-height: 1.2;
 48 | }
 49 | 
 50 | #GPstream .box .quot b {
 51 | 	font-size: 1.5em;
 52 | }
 53 | 
 54 | #GPstream .box .quot i {
 55 | 	display: block;
 56 | 	color: #999;
 57 | }
 58 | 
 59 | #GPstream .box .quot i.fa-quote-right {
 60 | 	margin-bottom: 15px;
 61 | }
 62 | 
 63 | #GPstream .box .quot i.fa-quote-left {
 64 | 	margin-top: 15px;
 65 | }
 66 | 
 67 | #GPstream .box .status-message a.urls {
 68 | 	color: #2879d0;
 69 | 	text-decoration: underline	
 70 | }
 71 | 
 72 | #GPstream .box .status-user {
 73 | 	padding: 15px;
 74 | 	position: relative;
 75 | }
 76 | 
 77 | #GPstream .box .status-user a,
 78 | #GPstream .box .status-message a.users,
 79 | #GPstream .box .status-message a.tags,
 80 | #GPstream .box .status-message a.titles:hover {
 81 | 	color: #2879d0;
 82 | 	text-decoration: none;
 83 | }
 84 | 
 85 | #GPstream .box .status-message a.titles {
 86 | 	color: #000;
 87 | 	font-weight: bold;
 88 | 	display: block;
 89 | 	margin-bottom: 10px;
 90 | 	text-decoration: underline
 91 | }
 92 | 
 93 | #GPstream .box .status-user a.date {
 94 | 	color: #999;
 95 | 	text-decoration: none;
 96 | }
 97 | 
 98 | #GPstream .box .status-user a.date:hover,
 99 | #GPstream .box .status-user a:hover,
100 | #GPstream .box .status-message a.users:hover,
101 | #GPstream .box .status-message a.tags:hover {
102 | 	text-decoration: underline;
103 | }
104 | 
105 | #GPstream .box .status-user-image {
106 | 	float: left;
107 | 	width: 45px;
108 | 	height: 45px;
109 | 	margin: 0 12px 0 0;
110 | 	border-radius: 50%;
111 | }
112 | 
113 | #GPstream .box .status-user-image img {
114 | 	width: 100%;
115 | 	height: 100%;
116 | 	border-radius: 50%;
117 | }
118 | 
119 | #GPstream .box .status-user-name {
120 | 	margin-top: 0;
121 | 	height: 25px;
122 | 	overflow: hidden;
123 | 	white-space: nowrap;
124 | 	text-overflow: ellipsis;
125 | 	font-weight: 400
126 | }
127 | 
128 | #GPstream .box .status-user-name a {
129 | 	color: #000
130 | }
131 | 
132 | #GPstream .box .status-type {
133 | 	position: absolute;
134 | 	right: 15px;
135 | 	bottom: 11px;
136 | 	font-size: 20px;
137 | 	font-weight: 400;
138 | }
139 | 
140 | #GPstream .box .status-type .fa-google-plus {
141 | 	color: #FF6C60
142 | }
143 | 
144 | #GPstream .box img.feed_galeri {
145 | 	width: 100%
146 | }
147 | 
148 | #GPstream .box .status-bottom {
149 | 	display: block;
150 | 	width: 100%;
151 | 	height: 45px;
152 | 	background: #fafafa;
153 | 	padding: 0;
154 | 	position: relative
155 | }
156 | 
157 | #GPstream .box .status-bottom a {
158 | 	color: #999;
159 | 	text-decoration: none;
160 | 	background: #fafafa;
161 | 	border-top: 1px solid #ccc;
162 | 	float: left;
163 | 	margin: 0;
164 | 	padding-top: 10px;
165 | 	padding-bottom: 10px;
166 | 	text-align: center;
167 | 	overflow: hidden;
168 | 	white-space: nowrap;
169 | 	text-overflow: ellipsis;
170 | }
171 | 
172 | #GPstream .box .tilu a {
173 | 	width: 33.33%;
174 | }
175 | 
176 | #GPstream #feed-more {
177 | 	display: block;
178 | 	width: 100%;
179 | 	box-sizing: border-box;
180 | 	margin: 0;
181 | 	text-align: center;
182 | 	font-size: 1.5em;
183 | 	font-weight: bold;
184 | 	cursor: pointer;
185 | 	border: none;
186 | 	padding: 15px 20px 15px 20px;
187 | 	background: #d34836;
188 | 	color: #fff;
189 | 	text-transform: uppercase;
190 | 	text-decoration: none
191 | }
192 | 
193 | #GPstream #feed-more:hover {
194 |     background-color: #eee;
195 | 	color: #34495e;
196 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 	<head>
 4 | 		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
 5 | 		<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
 6 | 	
 7 | 		<title>jQuery Google Plus Stream</title>	
 8 | 		
 9 | 		<!-- Include Font Awesome v4.1.0 -->
10 | 		<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
11 | 		<!-- Custom your style -->
12 | 		<link type="text/css" rel="stylesheet" href="css/GPstream.css" />
13 | 		
14 | 		<!-- Demo -->
15 | 		<link href="//fonts.googleapis.com/css?family=Roboto:100italic,100,300italic,300,400italic,400,500italic,500,700italic,700,900italic,900" rel="stylesheet">
16 | 		<style>
17 | 		body {
18 | 			background: #eee;
19 | 			font-family: "Roboto", "Helvetica", "Arial", sans-serif;
20 | 			font-weight: 300;
21 | 			line-height: 24px;
22 | 		}
23 | 		.demo {
24 | 			width: auto;
25 | 			min-width: 320px;
26 | 			max-width: 500px;
27 | 			margin: 20px auto
28 | 		}
29 | 		</style>
30 | 		
31 | 	</head>
32 | 	<body>
33 | 		
34 | 		<div class="demo">
35 | 		
36 | 			<!-- Display all google+ timeline -->
37 | 			<div id="GPstream"></div>
38 | 			
39 | 		</div>
40 | 		
41 | 		<!-- Include jQuery -->
42 | 		<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
43 | 		<!-- Include jquery.ibacor-gp-streaming -->
44 | 		<script src="js/GPstream.js"></script>
45 | 		<script>
46 | 			GPstream({
47 | 				user: '+RockstarGames', // +username or userID
48 | 				key: 'API KEY' // => you can get it in https://developers.google.com/api-client-library/python/guide/aaa_apikeys
49 | 			});
50 | 		</script>
51 | 		
52 | 	</body>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/js/GPstream.js:
--------------------------------------------------------------------------------
  1 | /******************************************************
  2 | * #### jQuery-Google-Plus-Stream v2.0 ####
  3 | * Coded by Ican Bachors 2014.
  4 | * https://github.com/bachors/jQuery-Google-Plus-Stream
  5 | * Updates will be posted to this site.
  6 | ******************************************************/
  7 | 
  8 | var GPstream = function(set) {
  9 | 	
 10 |     feed('');
 11 | 
 12 |     function feed(g) {
 13 |         $.ajax({
 14 |             url: 'https://www.googleapis.com/plus/v1/people/' + set.user + '/activities/public?key=' + set.key + '&pageToken=' + g,
 15 |             crossDomain: true,
 16 |             dataType: 'jsonp'
 17 |         }).done(function(data) {
 18 |             var html = '',
 19 | 				baseurl = '';
 20 | 			$.each(data.items, function(i, a) {				
 21 |                 var poto = '',
 22 | 					title = '';
 23 | 				if (data.items[i].object.attachments != '' && data.items[i].object.attachments != null && data.items[i].object.attachments != undefined) {
 24 | 					if (data.items[i].object.attachments[0].objectType == 'video' && data.items[i].object.attachments[0].embed != null) {
 25 | 						poto += '	<a href="#" class="googlevid" title="Play this videos" data-video="' + data.items[i].object.attachments[0].embed.url + '">';
 26 | 						poto += '		<img src="' + data.items[i].object.attachments[0].image.url + '" class="feed_galeri"/>';
 27 | 						poto += '	</a>';
 28 | 					}else if (data.items[i].object.attachments[0].objectType == 'photo') {
 29 | 						poto += '	<a href="' + data.items[i].url + '" target="_blank">';
 30 | 						poto += '		<img src="' + data.items[i].object.attachments[0].fullImage.url + '"  class="feed_galeri"/>';
 31 | 						poto += '	</a>';
 32 | 					}else if (data.items[i].object.attachments[0].objectType == 'article') {
 33 | 						if (data.items[i].object.attachments[0].image != null) {
 34 | 							poto += '	<a href="' + data.items[i].url + '" target="_blank">';
 35 | 							poto += '		<img src="' + data.items[i].object.attachments[0].image.url + '"  class="feed_galeri"/>';
 36 | 							poto += '	</a>';
 37 | 						}
 38 | 					}
 39 | 				}
 40 |                 if (data.items[i].object.content != "" && data.items[i].object.content != null && data.items[i].object.content != undefined) {
 41 |                     title += (poto == '') ? '<div class="status-message quot"><i class="fa fa-quote-right"></i>' : '<div class="status-message">';					
 42 | 					if (data.items[i].object.attachments != null && data.items[i].object.attachments[0].objectType == 'article') {
 43 | 						title += '<a href="' + data.items[i].object.attachments[0].url + '" class="titles" target="_BLANK">' + data.items[i].object.attachments[0].displayName + '</a> ';
 44 | 					}
 45 | 					title += urltag(strip_tags(data.items[i].object.content).replace(/&#39;/ig, "'"));
 46 | 					title += (poto == '') ? '<i class="fa fa-quote-left"></i>' : '';
 47 | 					title += '</div>';
 48 |                 }				
 49 | 				
 50 |                 html += '<div class="box">';
 51 | 				html += poto + title;
 52 |                 html += '	<div class="status-user">';
 53 |                 html += '		<a href="' + data.items[i].actor.url + '" target="_BLANK" class="status-user-image">';
 54 |                 html += '			<img src="' + data.items[i].actor.image.url + '">';
 55 |                 html += '		</a>';
 56 |                 html += '		<div class="status-user-name" title="' + data.items[i].actor.displayName + '">';
 57 |                 html += '			<a href="' + data.items[i].actor.url + '" target="_BLANK">' + data.items[i].actor.displayName + '</a>';
 58 |                 html += '		</div>';
 59 |                 html += '		<a href="' + data.items[i].url + '" class="date" target="_blank">' + relative_time(data.items[i].published) + ' ago</a>';
 60 |                 html += '		<div class="status-type" title="Google+"><i class="fa fa-google-plus"></i></div>';
 61 |                 html += '	</div>';
 62 | 				html += '	<div class="status-bottom tilu">';
 63 | 				html += '		<a href="' + data.items[i].url + '" target="_BLANK" title="Plusone"><i class="fa fa-plus"></i> ' + koma(data.items[i].object.plusoners.totalItems) + '</a><a href="' + data.items[i].url + '" target="_BLANK" title="Reply"><i class="fa fa-share"></i> ' + koma(data.items[i].object.replies.totalItems) + '</a><a href="https://plus.google.com/share?url=' + data.items[i].url + '" target="_BLANK" title="Share"><i class="fa fa-share-alt"></i> ' + koma(data.items[i].object.resharers.totalItems) + '</a>';
 64 | 				html += '	</div>';
 65 |                 html += '</div>';
 66 | 			});
 67 | 			html += (data.nextPageToken != null && data.nextPageToken != undefined) ? '<a id="feed-more">Load More</a>' : "";
 68 |             $('#GPstream').append(html);
 69 | 			$('.googlevid').click(function() {
 70 | 				$(this).replaceWith('<iframe src="' + $(this).data("video").replace('https://www.youtube.com/v/', '//www.youtube.com/embed/') + '" allowfullscreen="" frameborder="0"></iframe>');
 71 | 				return false
 72 | 			});
 73 |             $('#feed-more').click(function() {
 74 |                 feed(data.nextPageToken);
 75 |                 $(this).remove();
 76 |                 return false
 77 |             })
 78 |         })
 79 |     }
 80 | 
 81 |     function relative_time(a) {
 82 |         if (!a) {
 83 |             return
 84 |         }
 85 |         a = $.trim(a);
 86 |         a = a.replace(/\.\d\d\d+/, "");
 87 |         a = a.replace(/-/, "/").replace(/-/, "/");
 88 |         a = a.replace(/T/, " ").replace(/Z/, " UTC");
 89 |         a = a.replace(/([\+\-]\d\d)\:?(\d\d)/, " $1$2");
 90 |         var b = new Date(a);
 91 |         var c = (arguments.length > 1) ? arguments[1] : new Date();
 92 |         var d = parseInt((c.getTime() - b) / 1000);
 93 |         d = (d < 2) ? 2 : d;
 94 |         var r = '';
 95 |         if (d < 60) {
 96 |             r = 'jst now'
 97 |         } else if (d < 120) {
 98 |             r = 'a min'
 99 |         } else if (d < (45 * 60)) {
100 |             r = (parseInt(d / 60, 10)).toString() + ' mins'
101 |         } else if (d < (2 * 60 * 60)) {
102 |             r = 'an hr'
103 |         } else if (d < (24 * 60 * 60)) {
104 |             r = (parseInt(d / 3600, 10)).toString() + ' hrs'
105 |         } else if (d < (48 * 60 * 60)) {
106 |             r = 'a day'
107 |         } else {
108 |             dd = (parseInt(d / 86400, 10)).toString();
109 |             if (dd <= 30) {
110 |                 r = dd + ' dys'
111 |             } else {
112 |                 mm = (parseInt(dd / 30, 10)).toString();
113 |                 if (mm <= 12) {
114 |                     r = mm + ' mon'
115 |                 } else {
116 |                     r = (parseInt(mm / 12, 10)).toString() + ' yrs'
117 |                 }
118 |             }
119 |         }
120 |         return r
121 |     }
122 | 	
123 | 	function strip_tags(input, allowed) {
124 | 		allowed = (((allowed || '') + '')
125 | 		.toLowerCase()
126 | 		.match(/<[a-z][a-z0-9]*>/g) || [])
127 | 		.join('');
128 | 		var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
129 | 			commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
130 | 		return input.replace(commentsAndPhpTags, '')
131 | 		.replace(tags, function($0, $1) {
132 | 			return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
133 | 		});
134 | 	}
135 | 	
136 | 	function koma(a) {
137 |         var b = parseInt(a, 10);
138 |         if (b === null) {
139 |             return 0
140 |         }
141 |         if (b >= 1000000000) {
142 |             return (b / 1000000000).toFixed(1).replace(/\.0$/, "") + "G"
143 |         }
144 |         if (b >= 1000000) {
145 |             return (b / 1000000).toFixed(1).replace(/\.0$/, "") + "M"
146 |         }
147 |         if (b >= 1000) {
148 |             return (b / 1000).toFixed(1).replace(/\.0$/, "") + "K"
149 |         }
150 |         return b
151 |     }
152 | 
153 |     function urltag(d, e) {
154 |         var f = {
155 |             link: {
156 |                 regex: /((^|)(https|http|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig,
157 |                 template: "<a href='$1' target='_BLANK' class='urls'>$1</a>"
158 |             },
159 |             hash: {
160 |                 regex: /(^|)#(\w+)/g,
161 |                 template: '$1<a target="_BLANK" class="tags" href="https://plus.google.com/s/%23$2">#$2</a>'
162 |             },
163 |             user: {
164 |                 regex: /(^|)\+([a-zA-Z0-9._-]+)/g,
165 |                 template: '$1<a target="_BLANK" class="tags" href="https://plus.google.com/+$2">+$2</a>'
166 |             },
167 |             email: {
168 |                 regex: /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi,
169 |                 template: '<a class="urls" href=\"mailto:$1\">$1</a>'
170 |             }
171 |         };
172 |         var g = $.extend(f, e);
173 |         $.each(g, function(a, b) {
174 |             d = d.replace(b.regex, b.template)
175 |         });
176 |         return d
177 |     }
178 | }


--------------------------------------------------------------------------------