Title photo
frugal technology, simple living and guerrilla large-appliance repair

Regular blog here, 'microblog' there

Many of my traditional blog post live on this site, but a great majority of my social-style posts can be found on my much-busier microbloging site at updates.passthejoe.net. It's busier because my BlogPoster "microblogging" script generates short, Twitter-style posts from the Linux or Windows (or anywhere you can run Ruby with too many Gems) command line, uploads them to the web server and send them out on my Twitter and Mastodon feeds.

I used to post to this blog via scripts and Unix/Linux utilities (curl and Unison) that helped me mirror the files locally and on the server. Since this site recently moved hosts, none of that is set up. I'm just using SFTP and SSH to write posts and manage the site.

Disqus comments are not live just yet because I'm not sure about what I'm going to do for the domain on this site. I'll probably restore the old domain at first just to have some continuity, but for now I like using the "free" domain from this site's new host, NearlyFreeSpeech.net.

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="https://stevenrosenberg.nfshost.com/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?