Title photo
frugal technology, simple living and guerrilla large-appliance repair
Thu, 05 Dec 2013

Social sharing buttons for Ode sites

I decided to add some social-sharing buttons to my Ode site. It's easy to do with code from the sites themselves and tags generated by the Ode script.

I decided to do Twitter and Google Plus share (I could have chosen "+1" but thought "share" was better sine you don't have to "like" it to share it). I could have done Facebook, too, and I might, but for now it's just these two.

I placed the code in the post_footer section of my main Logic (i.e. html) theme's page.html file.

It goes below this part:

<div class="post_footer">
    <p>Posted:  ,  : </p>

And above the permalink/Disqus embed code:

<p><a href="">permalink</a> | <a href="http://stevenrosenberg.net/blog/ode/2013_1205_ode_social_buttons#disqus_thread" data-disqus-identifier="/ode/2013_1205_ode_social_buttons">comments</a></p>

Here is the code I'm putting between those two parts of page.html:

<p>
    <!-- Google Share button -->
    <script src="https://apis.google.com/js/plusone.js"></script>
    <div class="g-plus" data-action="share" data-annotation="bubble" data-href=""></div>

    <!-- Twitter share button -->
    <a href="https://twitter.com/share" class="twitter-share-button" data-url="" data-text="" data-lang="en">Tweet</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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</p>

That generates the two social-sharing buttons you see at the bottom of this entry. Can you see how I used Ode-generated tags to specify the permalink for both embeds and the title text for Twitter?