A request we tend to see often is people trying to get their Facebook, Twitter, and Google+1 share buttons to show up in old templates, or templates which have been heavily customized. In many of these instances there is simply no good/easy way to add them back in under the person really has coding expertise.
To tackle this request, we've written the following code which can be placed before the tag in your code, before the tag, or just about anywhere (but those are probably the best locations and easily located with a simple search).
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>//<![CDATA[
/**
this script was written by Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script will be posted to BlogXpertise
please leave this message and give credit where credit is due!
**/
$(document).ready(function() {
// you'll notice the b:if above for the "item" page type; we only want this running on the item pages
// these are the share buttons or any other div blocks that you want to insert.
// URL and TITLE are used for automatic replacement with the current page's information
var links = "<div class='post-share-buttons'><a class='goog-inline-block share-button sb-twitter' href='https://twitter.com/intent/tweet?text=TITLE&url=URL' target='_blank' title='Share to Twitter'><span class='share-button-link-text'>Share to Twitter</span></a><a class='goog-inline-block share-button sb-facebook' href='https://www.facebook.com/sharer.php?u=URL&t=TITLE' onclick='window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;' target='_blank' title='Share to Facebook'><span class='share-button-link-text'>Share to Facebook</span></a><div class='goog-inline-block dummy-container' style='width: 120px;'><g:plusone size='medium' size='100' annotation='inline'></g:plusone></div></div>";
// the following grabs the page title and page URL
var page_url = $(location).attr('href');
var page_title = $(this).attr('title');
// replaces the string from the beginning with the URL and TITLE information
links = links.replace(/URL/g,page_url).replace(/TITLE/g,page_title);
// here we're adding the new links to the TOP of the post-body, but we could easily change this to anywhere else in the DOM using prepend or append.
$('.post-body').prepend(links);
// the Google+ has to be initiated after the +1 box is added, hence having it here.
$(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>
</b:if>
For a cleaner version of the code please visit here.
Using this code you can insert anything you'd like into the page or item at any point within it. It's handy for signatures, unique headers into the page template, bookmarklets, or just about anything else.
Insert this code into your template right before </head>
Home
›
beginner
›
blogger
›
blogspot
›
bookmarklets
›
intermediate
›
jquery
›
share buttons
›
template
›
tip
Related Posts
Popular
-
Google+, Hangouts, and the Friday Request Line!Thank you for being a reader and possibly a subscriber to our site, BlogXpertise. While still very …
-
Using Blogger page types to affect your blog designIn many of our tips we recommend wrapping the Javascript code that we're providing in something…
-
Tip: How to upload a new template for your Blogger siteWe've been providing some Blogger templates for people to download and add to their sites for f…
-
Tip: Better titles for your article posts and pagesOne of the simplest ways you can improve your Blogger site's search engine optimization (SEO), …
-
Is Wordpress better than Blogger for SEO? No answer.If only we had a dollar for each time we were asked this question, or were told that everyone shoul…
-
Question: Where do my images get stored when I add them to my blog?When you first sign in and create a new blog in Blogger, you might not know this, but you are unlea…
-
Tip: Cropping (square) and resizing your Picasa/Blogger imagesSomething that we've discovered is that there is more to the crazy URL string that you get when…
Post a Comment
Post a Comment