Skip to content

Instantly share code, notes, and snippets.

@seraphyn
Created February 1, 2012 13:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save seraphyn/1716929 to your computer and use it in GitHub Desktop.
Save seraphyn/1716929 to your computer and use it in GitHub Desktop.
Adding Google Plus Sidebar to Octopress found https://bandj.us/jo/blog/
# Google Plus Profile
# Hidden: No visible button, just add author information to search results
googleplus_user: 112735778092864419421
googleplus_hidden: yes
googleplus_profile_display: block
googleplus_post_display: block
googleplus_post_amount: 10
# Google Api Console
google_api_key: AIzaSyCqR5_JXEJlRpJJmjLwiRxNR2M5xyxEOBI
default_asides: [asides/recent_posts.html, asides/github.html, asides/twitter.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html, custom/asides/plusposts.html]
<!--
JSON-P Google Plus fetcher for Octopress
(c) Jolam Jiang // MIT License
save it in custom/asides/
You can see the tutorial of adding sidebar here:
http://bandj.us/jo/blog/blog/2011/12/03/adding-google-plus-sidebar-to-octopress/
-->
{% if site.googleplus_user %}
<section>
<!-- load jquery -->
<script type="text/javascript" src="https://www.google.com/jsapi?key={{ site.google_api_key }}"></script>
<script type="text/javascript">
google.load("jquery", "1.7.1");
</script>
<!-- load jquery end -->
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function(){
plusLoadingStart();
});
jQuery.noConflict();
function plusLoadingStart() {
jQuery("#gplus_sidebar").css("display", "none");
getJSON();
}
function getJSON() {
jQuery.getJSON('https://www.googleapis.com/plus/v1/people/{{ site.googleplus_user }}?fields=aboutMe%2CdisplayName%2Cimage&pp=1&key={{ site.google_api_key }}&callback=?', function(resp){
updateProfile(resp);
});
jQuery.getJSON('https://www.googleapis.com/plus/v1/people/{{ site.googleplus_user }}/activities/public?alt=json&maxResults={{ site.googleplus_post_amount }}&fields=items&pp=1&key={{ site.google_api_key }}&callback=?', function(resp){
updatePosts(resp);
});
jQuery("#gplus_sidebar").css("display","block");
}
function updateProfile(resp) {
jQuery('#gplus_sidebar_profile_displayName').html(resp.displayName);
jQuery('#gplus_sidebar_profile_aboutMe').html(resp.aboutMe);
jQuery('#gplus_sidebar_profile_img').attr("src", resp.image.url);
}
function updatePosts(resp) {
var content = '';
for(var i = 0; i < resp.items.length; i++) {
var item = resp.items[i];
attachments = item.object.attachments;
content += appendLi(item.title, item.url, item.published, attachments);
}
jQuery('#gplus_sidebar_posts_ul').html(content);
}
function appendLi(title, url, time, attachments) {
if(title.length > 130) {
title = title.substring(0, 130);
}
var reg = /[\r\n][\r\n]/g;
title = title.replace(reg, "");
reg = /[\r\n]/g;
if(attachments == null) {
return '<li><p><a href="' + url + '">' + title + '</a> </p><p class="time_and_attachment">' + time.substring(0, 10) + '</p></li>';
} else {
attach_url = attachments[0].url;
attach_url = attach_url.replace(reg, "");
return '<li><p><a href="' + url + '">' + title + '</a></p><p class="time_and_attachment">' + time.substring(0, 10) + '<span class="attachment_span"><a href="' + attach_url + '">[attachment]</a></span></p></li>';
}
}
</script>
<style>
#gplus_sidebar_profile {
display: {{ site.googleplus_profile_display }};
}
#gplus_sidebar_posts a:link, #gplus_sidebar_posts a:visited {
display: {{ site.googleplus_post_display }};
text-decoration: none;
}
#gplus_sidebar_profile_img {
margin-top: .6em !important;
}
#gplus_sidebar_profile p {
margin-bottom: .1em !important;
}
#gplus_sidebar_posts p {
margin-bottom: .2em !important;
}
#gplus_sidebar_posts .attachment_span {
float : right;
}
#gplus_sidebar_posts .time_and_attachment {
margin-top: .5em !important;
font-size: 60%;
}
</style>
<div id="gplus_sidebar_profile">
<h1>G+ Profile</h1>
<img id="gplus_sidebar_profile_img" src="http://www.gravatar.com/avatar/{{ site.googleplus_user }}?d=mm" />
<a href="https://plus.google.com/{{ site.googleplus_user }}/posts/"><p id="gplus_sidebar_profile_displayName">loading...</p></a>
<p id="gplus_sidebar_profile_aboutMe">loading...</p>
</div>
<div id="gplus_sidebar_posts">
<h1>Recent G+ Posts</h1>
<ul id="gplus_sidebar_posts_ul" class="recent_posts">
</ul>
</div>
</section>
{% endif %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment