AddThis Smart Layers

Dedicated to making your blog more successful

Newest Entries

How to Align Google Plus 1, Twitter, Facebook, and Pinterest Pin It Buttons Horizontally

 

Individual Google +1, Twitter Tweet, Facebook Like and Send, Pinterest Pin It and other social sharing buttons can be added to Blogger with relative ease, but aligning them perfectly side by side is rather tricky. To spare you the trouble, I am going to show you how you can align social buttons on your Blogger blog.

I am not going to try to explain how to align your existing buttons because I think it is much easier to give you a new set of codes fort he most popular sharing buttons with the alignment already built in.

twitter google  1 like pinterest buttons align 01b

How to align Google Plus 1, Twitter, Facebook, and Pinterest Pin It buttons horizontally

1. Sign in to Blogger, then go to Dashboard --> Design (new interface: Template) --> Edit HTML.

2. Back up your template.

3. Tick the ‚Expand Widget Templates’ checkbox.

4. Search for (Ctrl + F)

<data:post.body/>

5. Copy and paste the follwoing code immediately above said tag:

<!-- Scripts Start -->
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<div id='fb-root'/>
<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 = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>
<!-- Google +1 -->
<script type='text/javascript'>
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!-- Twitter -->
<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=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</b:if>
<!-- Scripts End -->
<!-- Horizontal social buttons Start -->
<div class='horizontal-social-buttons' style='padding:10px 0 10px;'>
<!-- Twitter -->
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Google +1 -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='display: inline;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'></script>
<script type='text/javascript'>
function run_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
}
</script> 
</b:if>
<!-- Pinterest End -->
</div>
<div style='clear: both;'/>
<!-- Horizontal social buttons End -->

Important note: The Pinterest Pin It button will only appear on post pages, not the home page. The reason for this is that the Pin It button only pins the page it appears on. This means that all Pin It buttons on the home page would pin the home page and not the individual post they appear on (as it is supposed to do).

Positioning the buttons

If you want the buttons to appear at the bottom of your posts, you need to place the code below (instead of above) the <data:post.body/> tag.

6. Preview, then save.

That’s all!

Good luck!

2 Comments:

Ria D. Laab said...

thank you sooo much for this! the pinterest does not work though, I had to tweak it a bit for it to work. Works good now. :)

penuhsyukur said...

unfortunately it doesnt work in my blog
http://penuhsyukur.blogspot.com/2013/07/index.html

Post a Comment