Jon Worth Blogger, Writer, Speaker, Trainer

I’ve amended the design of this blog a bit, simplifying things and moving away from a amended version of Twenty Eleven theme, and instead using a (lightly) adapted version of Busby. This theme incorporates some HTML 5 elements, and also is much neater on devices with small screens.

One aspect I have worked on is an improvement of the Social Media integration in the theme, with new icons at the top of the screen, and share buttons on posts. The icons (and a PSD file) can be downloaded here.

The share buttons – for Twitter, Facebook, Google+, Pinterest, LinkedIn and Flattr are coded into the theme (some of the functionality could be achieved through Plugins, but I didn’t find any that did the job the way I wanted). The plugin needs two pieces of code. The Facebook Like button is the hardest to get working – more details on that here from Michael Fields.

Note that these scripts work in March 2012. I cannot vouch for what will happen in the future – Social Networks can be fickle!

Put in header.php

<!-- Twitter button script -->
<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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>  

<!-- Facebook Like script - replace all the 99999s with your App ID -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=99999999999999999";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<!-- G+ script -->
<script type="text/javascript">
  window.___gcfg = {lang: 'en-GB'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

<!-- Pinterest Script -->
<script type="text/javascript">
(function() {
    window.PinIt = window.PinIt || { loaded:false };
    if (window.PinIt.loaded) return;
    window.PinIt.loaded = true;
    function async_load(){
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.async = true;
        if (window.location.protocol == "https:")
            s.src = "https://assets.pinterest.com/js/pinit.js";
        else
            s.src = "http://assets.pinterest.com/js/pinit.js";
        var x = document.getElementsByTagName("script")[0];
        x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
        window.attachEvent("onload", async_load);
    else
        window.addEventListener("load", async_load, false);
})();
</script>

<!-- LinkedIn Script -->
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>

<!-- Flattr Script -->
<script type="text/javascript">
/* <![CDATA[ */
(function() {
    var s = document.createElement('script');
    var t = document.getElementsByTagName('script')[0];

    s.type = 'text/javascript';
    s.async = true;
    s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';

    t.parentNode.insertBefore(s, t);
 })();
/* ]]> */
</script>
									

Put where buttons are to appear

<!-- Twitter share button Start - replace XXXXX with your Twitter name -->
<div class="buttonwraptwitter"><a href="https://twitter.com/share" class="twitter-share-button" data-text="<?php echo get_the_title(); ?>" data-url="<?php echo get_permalink(); ?>" data-via="XXXXX">Tweet</a></div>
<!-- Twitter share button End -->

<!-- Facebook share button Start -->
<div class="buttonwrapfacebook"><div class="fb-like" data-href="<?php echo get_permalink(); ?>" data-send="false" data-layout="button_count" data-show-faces="false"></div></div>
<!-- Facebook share button End -->

<!-- G+ share button Start -->
<div class="buttonwrapgplus"><div class="g-plusone" data-size="medium" data-href="<?php echo get_permalink(); ?>"></div></div>
<!-- G+ share button End -->

<!-- Pinterest share button End -->
<div class="buttonwrappinterest"><div class="pinterestbutton"><a href="http://pinterest.com/pin/create/button/?url=<?php echo get_permalink(); ?>&media=<?php
$attachments = get_children( array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' =>'image') );
foreach ( $attachments as $attachment_id => $attachment ) {
  echo wp_get_attachment_url( $attachment_id, 'medium' );
} ?>" class="pin-it-button" count-layout="horizontal">Pin It</a></div></div>
<!-- Pinterest share button End -->

<!-- LinkedIn share button End -->
<div class="buttonwraplinkedin"><script type="IN/Share" data-url="<?php echo get_permalink(); ?>" data-counter="right"></script></div>
<!-- LinkedIn share button End -->

<!-- Flattr share button End - replace XXXX with your UID -->
<div class="buttonwrapflattr"><a class="FlattrButton" style="display:none;" title="<?php echo get_the_title(); ?>" data-flattr-uid="XXXXXX" data-flattr-button="compact" data-flattr-category="text" href="<?php echo get_permalink(); ?>">Flattr</a></div>
<!-- Flattr share button End -->