Even though individual Facebook Like & Send, Twitter Tweet, Google +1, Pinterest Pin It, and social sharing buttons can be easily added to Blogger post by following their respective tutorials, aligning them perfectly side by side is a bit tricky. Several readers were having trouble with the alignment and contacted me for help.
- Go to Template > Edit HTML > Proceed (old UI: Design > Edit HTML).
- Back up your template.
- Tick the Expand Widget Templates checkbox on top right of the code window.
- Next, locate the first instance of <data:post.body/>tag and paste the following code immediately above it:01<!-- Scripts Start -->02<b:ifcond='data:post.isFirstPost'>03<!-- Facebook -->04<divid='fb-root'/>05<script>(function(d, s, id) {06var js, fjs = d.getElementsByTagName(s)[0];07if (d.getElementById(id)) {return;}08js = d.createElement(s); js.id = id;09js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";10fjs.parentNode.insertBefore(js, fjs);11}(document, 'script', 'facebook-jssdk'));12</script>13<!-- Google +1 -->14<scripttype='text/javascript'>15(function() {16var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;17po.src = 'https://apis.google.com/js/plusone.js';18var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);19})();20</script>21<!-- Twitter -->22<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>23</b:if>24<!-- Scripts End -->25<!-- Horizontal social buttons Start -->26<divclass='horizontal-social-buttons'style='padding:10px 0 10px;'>27<!-- Twitter -->28<divstyle='float:left;'>29<aclass='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>30</div>31<!-- Google +1 -->32<divstyle='float:left;'>33<g:plusoneannotation='bubble'expr:href='data:post.url'size='medium'/>34</div>35<!-- Facebook Like+Send -->36<divstyle='float:left;'>37<fb:likecolorscheme='light'expr:href='data:post.url'font=''layout='button_count'send='true'show_faces='false'/>38</div>39<!-- Pinterest Start -->40<b:ifcond='data:blog.pageType == "item"'>41<divid='pin-wrapper'style='display: inline;'>42<aclass='pin-it-button'count-layout='horizontal'expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a>43<ahref='javascript:void(run_pinmarklet())'style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>44</div>45<scriptsrc='http://assets.pinterest.com/js/pinit.js'type='text/javascript'></script>46<scripttype='text/javascript'>47function run_pinmarklet() {48var e=document.createElement('script');49e.setAttribute('type','text/javascript');50e.setAttribute('charset','UTF-8');51e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);52document.body.appendChild(e);53}54</script>55</b:if>56<!-- Pinterest End -->57</div>58<divstyle='clear: both;'/>59<!-- Horizontal social buttons End -->Note: Pin It button will only appear on post pages. We place this limit because the button only pins the page on which it appears. As such on homepage (if we were to allow it there), every instance of the button will pin the homepage, not the post (as it’s “supposed” to).
- Buttons positioning 
 To position the buttons at the bottom of post, place the code below (instead of above)<data:post.body/>.
- Preview before saving.
Enjoy!
No comments:
Post a Comment