Adding social links to google sites

On Google sites, you have to use gadgets in order to introduce any unusual javascript. That means that you need to use a gadget which can embed your content in an iframe. Let's say that you want to create a panel of various links for tweeting, google plussing, facebooking etc. Ideally you'd like to create an offsite bit of code that could be plugged into a gadget in each page, and would therefore be updated automatically as you refined it, and cleaned it up over time.  By default though, the link that will be shared will be that of your gadget panel, rather than the containing page. So we have to find a way to tweak things so that all the sharing buttons will share the correct content. 

Consider the panel below.

This is actually a gadget that embeds this url - xliberation.com/b/but.html?refer=parent. Here's the code.


Finding the URL

This is a general purpose panel that i'm including not only in Google sites, but also other web sites, and potentially other iframe scenarios.  So to make all this happen, you need to call it with a parameter of ?refer=parent. Here's the code

Tweaking the Google plus url

Google plus will use the canonical link for the page if there is one - so for that we can simply set it to the gadgets parent url, which we've figured out in the butGetHref function.  


    var link = $('<link rel="canonical"/>')
        .attr('href',loc);
    $('body').append(link);

That will fool this google plus link into sharing the pages link, rather than the panel link or the gadget link 

<div class="g-plusone" data-annotation="inline" data-width="300"></div>

Tweaking Twitter

This is a little more complicated - we are going to create the button on the fly. 

First create somewhere to put it
   <div id="tbut" class="butbutsections"></div>

Then build the button on the fly, substituting in the calculated url, and include the twitter js to make it active. 

    // fix up twitter href...
!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");

    var tbut = $('<a></a>')
        .addClass('twitter-share-button')
        .attr('href', 'http://twitter.com/share')
        .attr('data-url', loc) 
.attr('data-via', 'brucemcpherson');
    $('#tbut').append(tbut);


Tweaking Linkedin

This is similair to the approach for Twitter. We create a spot for the button, then dynamically update the script attribute to use the data-url returned from our bufGetHref() function. 
<div id = "butlinkedin" class="butbutsections">
   </div>
   <script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
   <script>
    // tweak linedin data source
      $('#butlinkedin').append( $('<script type="IN/Share"/>')
.attr("data-url",butGetHref ()));
   </script>

Tweaking facebook

I dont have a facebook account, and don't really want to get one. Any volunteers to figure this one out?

Tweaking Tumblr

Todo





You want to learn Google Apps Script?

Learning Apps Script, (and transitioning from VBA) are covered comprehensively in my my book, Going Gas - from VBA to Apps script, available All formats are available now from O'Reilly,Amazon and all good bookshops. You can also read a preview on O'Reilly

If you prefer Video style learning I also have two courses available. also published by O'Reilly.
Google Apps Script for Developers and Google Apps Script for Beginners.





Comments