Contact Us HERE Now!!

J9 Designs

Blogging Made Easy

Blogspot In Post Share Buttons with Twitter Handle & Pinterest Tutorial

by Filed Under: BLOG, Blog Advice

Blogspot Blogger seems to have its own set of issues when it come to in post share buttons.

Are you a Blogspot Blogger searching for the perfect share buttons that include a Pinterest Button and a Twitter button that share using your own Twitter Handle?

Looking for the Perfect Share Buttons? Look No Further!!

Looking for the Perfect Share Buttons? Look No Further!!

Recently, I had a blogging friend who was unhappy and struggling with this very concept and  she tried to put ShareThis buttons on her blog to alleviate the issue at hand.  They indeed worked, but the Twitter Button would only technically share to @sharethis and not to her very own Twitter account.

 

Why was she using ShareThis?

 

Because Blogger’s Own Share Buttons seem to not include Pinterest.  Pinterest is a huge social network to share to and many bloggers rely on it for traffic.  So, not to have it included in that bottom panel of share buttons is really a major disappointment here.

 

So, at this point she told me that she tried everything she could think of and even Googled to try to find a solution for getting her Twitter Handle to be included in ShareThis Twitter share button.

 

So in essence she had a Pinterest share button, but her Twitter shares where not being redirected back to her own Twitter account.

 

When I saw her dilemma, I offered my help.  I began to take a look at the code on her site and use Google myself.

 

I came up with a few suggestions, but all were not the solution for getting her Twitter Handle to indeed appear.

 

I was told not to worry, but I am stubborn and knew I needed to figure this one out.

 

A few hours later, after piecing together 3 different websites tutorials, I figured it out and got it to work.

 

So here now for all Blogger Blogspot Blogs is a way around the above aforementioned issue.

 

I thought I would share, because I have heard that this is a major issue on Blogger’s Platform.

 

1.  The first step is to go to your Blogger Dashboard and click on “Template” in the left menu, which is second from the bottom on that menu list.

Blogger Dashboard

Blogger Dashboard

2.  Now that you are in “Template”, you will want to click on “Edit HTML”.

Blogger Template

Blogger Template

3.  You will need to open up the code that reads:

<b:includable id=’post’ var=’post’>.  Once you open this, you will have to now find this piece of tag coding, <data:post.body/>

Post Code

Post Code

Insert Code

Insert Code

4.  To insert buttons below your post, you will want to insert this whole code below the <data:post.body/> line:

<!-- 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='float: left; margin:0px 0px 0px 30px; width:44px;'>
<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
</div> 
<script src='https://assets.pinterest.com/js/pinit.js' type='text/javascript'></script>
<style type='text/css'> 
#pin-wrapper > a {background-image:none !important;}
</style> 
</b:if> 
<!-- Pinterest End -->
</div>
<div style='clear: both;'/>
<!-- Horizontal social buttons End -->

 

5.  On Line #29, you will see: data-via=”. In between the ‘ ‘, please insert “YOUR TWITTER HANDLE HERE”

Twitter Handle Insert

Twitter Handle Insert

6.  This will now fix the problem with now sharing with your Twitter Handle.  There is one last part that needs to be handled here and that the way the code is set up the Pinterest Share Button doesn’t show up on the front page of the blog, only on posts.

 

7.  In order to alleviate this last remaining issues, we must DELETE this line of code (line 40):

<b:if cond=’data:blog.pageType == &quot;item&quot;’>

and DELETE this line of code (line 55):

[/b:if>]

 

8. Once this is completed, you had have perfect Blogger In-Post Share Buttons that include your Twitter Handle for the Twitter Share Button and also a functioning Pinterest Share Button, too.

Perfect Share Buttons

Perfect Share Buttons

Hope this tutorial has helped you and so happy to share this will all the Blogger Blogs out there!

 

A side note:  This worked absolutely fine on my own blogger test page, but have told there may be theme issues at play here.  I have a custom theme installed and had no issue, but another blogger with a free blogger theme had a slight issue getting the buttons to show on past (older) blog posts.  Please do keep that in mind and if you do try this, please let me know how it went for you.

Comments

  1. Karen says

    I no longer have blogger, but still found your explanation perfect. You give the best tutorials babe.

    I FINALLY emailed you that …oh man what is it called…oh a testimonial for your business…let me know if I have to change anything.
    My recent post MOMMY’S MEALS #4

  2. carolee44 says

    I am so grateful to have you to worry about all of this..Way too techy for me….All I have to do is call or email you to take care of problems….
    My recent post All About Virgo

  6. Katie says

    Thanks for sharing this. I have been looking for a good way to post a pinterest share on my blogger, and it has been leaving me frustrated. I will have to try this.
    My recent post John Wayne

  11. Arielle says

    This is the first tutorial that I've found that has blogger's html edit screen the same way mine displays (with the jump to widget drop down instead of a check box)! So I'm actually able to follow it, yay! Although I've run into a major problem; I've found the proper line to add the new coding but it won't let me actually edit or add to it. I get an error "dud" sound, and my paste option is greyed out when I try to insert the code where it needs to go. Am I doing something wrong?

  12. Lanaya says

    You are the best tutorial giver for both Blogger and WP

    Thank you for linking to Raising Imperfection.
    Please come back Friday to see if you were featured. 🙂

    ¤´¨)
    ¸.•*´
    (¸¤ Lanaya | xoxo
    Raising-Reagan.com

  13. brittneilynn21 says

    This is an awesome tip. I'm going to pin it for sure so I can make the change in my own template settings! Thanks for linking up to Mommy Monday. I'll make sure I'm following you everywhere on social media :). I hope to see you link up in the future. This post was phenomenal!

    XoXo,
    Brittnei
    My recent post &quot;What's Your Style?&quot; Blog Hop #2

  15. Stephanie says

    GREAT tutorial… I'm such a fan of your blog– you give such easy to follow step-by-step directions, and it's very helpful, to say the least. Stopping by from the GFC Collective, and I'd love for you to drop by my blog if you get the chance. Have a great week!

    xo,
    Stephanie
    Diary of a Debutante
    <a&gt <a href="http://;www.stephanieziajka.blogspot.com” target=”_blank”>;www.stephanieziajka.blogspot.com
    My recent post October is National Breast Cancer Awareness Month // Power of Pink Giveaway!

  17. Ida Chiavaro says

    I have tried so many different things I thought this might finally work – sadly the twitter handle still eludes me – but thanks for an easy to follow post.

  19. Jamie Dorner says

    Once I clicked the “View Code” instead of copying from the dropdown (like an idiot), this worked great!
    If only there was a way to also add my Pinterest Handle when sharing images from my blog.

    Thanks so much for your help.

    • J9 Designs says

      Totally my pleasure and being that you are on Blogger sadly you are a bit limited with things like adding your Pinterest handle. If you ever consider transferring to WordPress though, would be totally happy to help you. Just let me know.

Trackbacks

  1. […] Nothing is worse then someone tweeting your article and your Twitter handle isn’t included.  If you are on WordPress, it is pretty easy to link your Twitter (and other social media accounts), but Blogger can be a bit more difficult.  If you aren’t sure how to set that you, you can find a tutorial here. […]

Hi From J9 Designs!

Let’s face it, trying to balance a family, kids, business, and maintaining a blog can be tough work. In addition, trying to find the time to tweak or debug one’s blog can quickly escalate from minutes, which I have anticipated, to hours. Now you may be asking yourself is there a solution to this … Read More...

GET OUR NEWSLETTER:

* indicates required