My better half wanted to add a
Pin It button to her blog and needed my help, so I did some googling around it to find out how to do it. As a result I figured I could also add support for some other sharing sites in my own blog as well. It was not as straight-forward as many blog posts and support docs on the subject do claim, so I'll tell here what I did in order to get them all nicely lined up. I hope this makes life easier for somebody else.
 |
This was the resulting row of buttons,
in case I end up changing the layout later on... |
Pinterest
There is a rather good blog post at
bloggercentral.com on adding
Pin It button to Blogger, and it also tells the basics about the blog template.
However, I had very little luck with the embedded template editor (after trying two browsers including Chromium, saving the template after changes didn't work), and found out it is way better to take the XML backup of the template and use a good text editor to modify that. Remember to save your changes on a different name! On Linux e.g.
kedit and
gedit work fine, but on Windows it was tougher since
Notepad doesn't understand Unix style line breaks, and
Wordpad isn't really a text editor so it is not guaranteed to preserve formatting. I downloaded
Notepad++ Portable for the task (since it does not require system-wide installation), but any decent text editor that supports UTF-8 encoding and Unix style line breaks should do.
The other thing that didn't go as the instructions said was the placement of the button code - in both of the blogs it was required to add the button at the
second occurrence of
<data:blog.post/>. I should study more of the template structure to figure out in what cases the other occurrences are being used, but anyway I made the addition to all of them.
Reddit
The support doc on
reddit.com shows many options for the button, all with sample HTML code, but there is a catch in using them with Blogger. All the samples would more or less work on a single blog post, but they wouldn't work on the blog home page which has many posts. The advanced options down the page show a way to go with some of the buttons (those that use a
script tag), but in all cases the page reference needs to be modified to suit Blogger. Below is what I use.
<a expr:href='"http://www.reddit.com/submit?url=" + data:post.url'>
<img src='http://www.reddit.com/static/spreddit7.gif' alt='submit to reddit' border='0'/> </a>
Noteworthy things:
- Usage of expr prefix on href attribute tells Blogger that it needs to interpret the attribute value which contains references to layout data tags (e.g. data:post.url).
- Also quoting needs some tuning, since the whole expression to be interpreted requires quotes around it, and the static text part in it also needs to be enclosed in quotes, thus the two occurrences of ".
If you'd be using those buttons that have just a script tag in the example, just look at the example given under
Interactive button advanced settings and change the values of
reddit_url and
reddit_title to point to
data:post.url and
data:post.title, respectively. However, reddit seems to figure out the title from the URL if title is not given, which is nice since I didn't find a way to make Blogger understand multiple URL parameters (although it should be possible and I do know how to format a GET request with multiple parameters).
Delicious
Also
delicious.com shows a working sample of their button, but as mentioned just above with reddit, it didn't work that well with multiple parameters on the URL in Blogger template. However, it seems to be enough to put just the
url parameter there. Also in this case I moved the request URL to
href attribute even though it is not as neat as hiding it in the
onClick handler. So, here's what I use:
<a expr:href='"http://del.icio.us/post?url=" + data:post.url' target='_blank'>
<img border='0' alt='Delicious' title='Del.icio.us' src='https://delicious.com/img/logo.png' height='16' width='16' />
</a>
Stumbleupon
The badge creator at stumbleupon.com looks rather fancy, but at that point I had grown a bit tired of all fancy things which are hard to put into the template, and so I took the easy route of peeking at a page with a working badge and extracting the URL and the icon from there. Not quite as recommended, but it seems to work, too:
<a class='logo' target='_blank' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url'>
<img border='0' alt='Stumbleupon' src='http://cdn.stumble-upon.com/i/badges/badgeLogo18x18.png?v5' height='18' width='18' />
</a>
LinkedIn
There is a share plugin generator on
developer.linkedin.com which gives the necessary code for the share button, and the
data-url attribute with added
expr prefix gets its value from
data:blog.url just like in all the above.
The final touch
All of the above would work just fine alone, but putting them together took some additional effort for the result to look nicely aligned. From the Pinterest sample code I took the enclosing
div, and put all the rest within that, too. However, the icons ended up aligned pretty bad, and so I added vertical alignment.
That solved all but
Pin It and
inShare buttons, which have enforced styles from the accompanying Javascript code. For Pinterest it is possible to just ditch the Javascript and go with plain link+icon, but LinkedIn has made it more complex, so I ended up adjusting the styling of the enclosing
div and adding some spacers to add some space around the buttons.
So here is my template addition as a whole:
<style type='text/css'>
#sharing-wrapper {margin:10px 0 0 0; text-align:left; vertical-align:baseline !important; padding:0px !important;}
#sharing-wrapper img {padding: 0px !important;}
#sharing-wrapper .spacer {padding-left: 8px;}
</style>
<div id='sharing-wrapper'>
<!-- pinterest start -->
<a data-pin-config='none' data-pin-do='buttonPin' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>
<img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/>
</a>
<span style='margin-left:-44px;'>
<a data-pin-config='none' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/>
</span>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<!-- pinterest end -->
<span class='spacer'/>
<!-- reddit.com start -->
<a expr:href='"http://www.reddit.com/submit?url=" + data:post.url'>
<img src='http://www.reddit.com/static/spreddit7.gif' alt='submit to reddit' border='0'/> </a>
<!-- reddit.com end -->
<span class='spacer'/>
<!-- del.icio.us start -->
<a expr:href='"http://del.icio.us/post?url=" + data:post.url' target='_blank'>
<img border='0' alt='Delicious' title='Del.icio.us' src='https://delicious.com/img/logo.png' height='16' width='16' />
</a>
<!-- del.icio.us end -->
<span class='spacer'/>
<!-- stumbleupon start -->
<a class='logo' target='_blank' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url'>
<img border='0' alt='Stumbleupon' src='http://cdn.stumble-upon.com/i/badges/badgeLogo18x18.png?v5' height='18' width='18' />
</a>
<!-- stumbleupon end -->
<span class='spacer'/>
<!-- linkedin start -->
<script src='//platform.linkedin.com/in.js' type='text/javascript'></script>
<script type='IN/Share' expr:data-url='data:post.url'></script>
<!-- linkedin end -->
</div>
I put that right after
<data:blog.post/> tag so that it appears after the post body text. It would be even nicer to have it on the same row as the built-in share buttons, but that would really require figuring out the templating more deeply than I am willing to do right now.
In addition, put the following right before
</body>, since repeating it for every post messes up the positioning of Pin It button on blog home page:
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
(oh, and since this blog is visually not that fancy, I think I'll drop Pinterest out, I doubt anyone would pin from this anyway...)
Addendum (5.2.2014): Digg and Tumblr
Later I also added Digg and Tumbr sharing.
Digg was simple, although the current incarnation doesn't seem to provide any official share button or widget.Thus I just made a link to their submit URL and used their
favicon for the icon.
Tumblr was a bit harder, since the
official JavaScript version only works on single post pages (not on the blog home page) and when using a simple GET request URL, the shared URL needs to be encoded - which Blogger template API can't handle (also they don't seem to fetch the page title automatically so that, too, must be encoded and included in the link). So I made my own inline JS to create the link the way I want it to be.
Here are the additions to the above, placed just before ending the
</div>:
<span class='spacer'/>
<!-- digg start -->
<a class='logo' expr:href='"http://digg.com/submit?url=" + data:post.url' target='_blank'>
<img alt='Digg' border='0' height='18' src='http://digg.com/static/images/digg_favicon.png' width='18'/>
</a>
<!-- digg end -->
<span class='spacer'/>
<!-- tumblr start -->
<script type='text/javascript'>
var strPostUrl = "<data:post.url/>";
var strPostTitle = "<data:post.title/>";
document.write("<a href='http://www.tumblr.com/share/link?url="
+encodeURIComponent(strPostUrl)+"&name="+encodeURIComponent(strPostTitle)
+"' target='_blank' title='Share on Tumblr'><img src='http://platform.tumblr.com/v1/share_3.png' width='129' height='20'/></a>");
</script>
<!-- tumblr end -->
