• Email
  • Facebook
  • Google+
  • Instagram
  • Pinterest
  • Twitter
Contact Us HERE Now!!

J9 Designs

Blogging Made Easy

  • ABOUT US
    • OUR PRIVACY POLICY
  • BLOG
  • PORTFOLIO
  • SERVICES
    • GET STARTED
    • A LA CARTE BLOG SERVICES
    • SOCIAL MEDIA SERVICES
    • WEBSITE START UP & REDESIGNS
    • WEBSITE TRANSFERS
    • VIRTUAL/SOCIAL ASSISTANT
  • TESTIMONIALS

Blogspot In Post Share Buttons with Twitter Handle & Pinterest Tutorial

September 4, 2013 by J9 Designs 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.

It's only fair to share...Share on Facebook
Facebook
Tweet about this on Twitter
Twitter
Pin on Pinterest
Pinterest
Share on LinkedIn
Linkedin
Email this to someone
email
Share on StumbleUpon
StumbleUpon

Comments

  1. Karen says

    August 13, 2013 at 6:23 am

    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

    • Janine Huldie says

      August 13, 2013 at 7:36 am

      Oh thank you on both fronts Karen. Seriously appreciate it and glad that I could explain this ok for most!! 🙂

  2. carolee44 says

    September 4, 2013 at 1:49 pm

    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

    • Janine Huldie says

      September 4, 2013 at 1:54 pm

      Oh totally my pleasure Carol and seriously so happy to be able to help you!! 🙂

  3. christyb says

    September 4, 2013 at 3:22 pm

    Your tips will help many bloggers, Janine!

    • Janine Huldie says

      September 4, 2013 at 3:40 pm

      Thank you so much Christy for your kind words and also the share, too!! 🙂

  4. yonca says

    September 5, 2013 at 10:20 am

    Hi Christy!
    Just followed you via Blogloving Blog Hop. Hope you follow back:) Happy Thursday! http://www.bloglovin.com/blog/5811025

    • Janine Huldie says

      September 5, 2013 at 10:56 am

      Hi Yonca, I also run Janine's Confessions of A Mommyaholic and am following you from there now, too. Thanks and Happy Thursday, too!!

  5. Kim @2justByou says

    September 5, 2013 at 10:54 am

    This is awesome! I've been using ShareThis, and I think it's a big reason my blog page takes a bit longer to load. I'll be trying this out. Thanks so much!
    ~Kim

    My recent post Link Up with Me at Bloglovin Blog Hop All Month Long

    • Janine Huldie says

      September 5, 2013 at 10:57 am

      Oh so happy that you are going to try this, Kim and let me know how it goes for you!! 🙂

  6. Katie says

    September 5, 2013 at 2:25 pm

    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

    • Janine Huldie says

      September 5, 2013 at 10:56 pm

      Oh I hope you do try this Katie and let me know how it goes for you!!

  7. nicole says

    September 7, 2013 at 6:41 pm

    This awesome! glad i found you, great info a blogger can trust.
    My recent post GOLDEN HARVEST MASON JAR LOVE: HOW TO MAKE A PENDANT LIGHT

    • Janine Huldie says

      September 7, 2013 at 8:25 pm

      Thank you so much Nicole and happy to be able to help you out!!

  8. Rosey says

    September 8, 2013 at 12:04 am

    You have a knack for explaining things well. Thank you for sharing, and for linking up at Super Sunday Sync!

    • Janine Huldie says

      September 8, 2013 at 8:01 am

      Thank you so much Rosey for your kind words and my pleasure linking up!! 🙂

  9. christinemhutchinson says

    September 8, 2013 at 1:54 pm

    Really helpful info for all those blogger blogs, Janene! I'm pinning this post–so hopefully more people who need to see it will! Thanks for linking up with us this week at the Mixer!
    My recent post Fill Up Your Cup with Kendra from Mommy In Demand: The Sunday Sip

    • Janine Huldie says

      September 8, 2013 at 3:22 pm

      Oh thanks so much Christine for pinning and very happy to be able to help Blogger blogs, too here!!! 🙂

  10. Judy Haughton-James says

    September 8, 2013 at 6:54 pm

    Thanks for sharing this information Janine. It is great that you are able to figure out these things so well. I need to get better at this!:)

    • Janine Huldie says

      September 8, 2013 at 9:21 pm

      Totally my pleasure Judy and glad to linkup with you as always!! 🙂

  11. Arielle says

    September 8, 2013 at 9:11 pm

    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?

    • Janine Huldie says

      September 8, 2013 at 9:20 pm

      Glad you can follow along Arielle. Make sure you have hit Edit on the top of the HTML screen. There should be a few options on that screen and edit HTML is one. Once you are in edit you can then do this. Hope this helps!! 🙂

      • Arielle says

        September 8, 2013 at 10:10 pm

        I figured it out in the mean while, just more fiddling! thx so much for such an easy to follow tutorial <3
        My recent post I'm now on Bloglovin'!

        • Janine Huldie says

          September 8, 2013 at 10:13 pm

          Yay and so glad you figured it out. I am so happy to help and hope you come back for my tutorials soon. And if you need any help with anything, please ask!!

  12. Lanaya says

    September 8, 2013 at 11:52 pm

    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

    • Janine Huldie says

      September 8, 2013 at 11:54 pm

      Aww, thank you so much and truly my pleasure to help and share these tutorials for both platforms!!! 🙂

  13. brittneilynn21 says

    September 10, 2013 at 2:10 am

    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

    • Janine Huldie says

      September 10, 2013 at 10:35 am

      Oh thanks so much and do hope you get to try this and use for your blog now!!

  14. Elena says

    September 12, 2013 at 11:07 pm

    This is awesome Janine! I think you've found your calling :o)

    [email protected]
    My recent post The many uses of the Origami box – make one yourself!

    • Janine Huldie says

      September 13, 2013 at 1:30 pm

      Thank you so much Elena and I really do love what I am doing with J9 Designs!! 🙂

  15. Stephanie says

    October 7, 2013 at 8:03 pm

    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!

    • Janine Huldie says

      October 9, 2013 at 4:10 pm

      Thanks so much Stephanie and heading over to your blog now, too!! 🙂

  16. Biceps Brachii says

    November 7, 2013 at 9:04 pm

    Useful post.
    Thanks for sharing this Blogger tip!
    My recent post Hunting Lodge in the Woods (Senokos, Vratnica)

    • Janine Huldie says

      November 11, 2013 at 8:57 pm

      Totally my pleasure and so glad to be able to help you!

  17. Ida Chiavaro says

    March 2, 2014 at 5:32 am

    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.

    • Janine Huldie says

      March 9, 2014 at 7:34 am

      Sorry, it still alludes you, if you could tell me what has you stuck maybe I could help.

      • Ida Chiavaro says

        March 9, 2014 at 1:17 pm

        Hi Janine, thanks for your kind offer. However, the twitter handle no longer alludes me :). Whenever I added the code you provide here nothing happened, but testing it out made me feel brave enough to try another code that I found in a google forum. I did a tutorial on it, and so far it has worked for some of my readers but not others. I will send the ones I haven't been able to help here maybe theirs blogs are configured more like yours…thanks again
        My recent post How to add your twitter handle to blogger's share button – tutorial.

        • Janine Huldie says

          March 9, 2014 at 5:36 pm

          Thank you Ida and will send others your way, if they are having any trouble with my own here!! 🙂

  18. Rea says

    September 7, 2014 at 7:56 pm

    I tried this today!! And it’s working! Yay, so happy, thanks so much Janine! 🙂
    Rea recently posted…From Croatia To Philippines!My Profile

    • J9 Designs says

      September 7, 2014 at 8:48 pm

      Aww, so awesome and just catching up and saw this message from you tonight. You made my night and am smiling from ear to ear now!! So happy you could use this to help you 🙂

      • Rea says

        September 7, 2014 at 11:26 pm

        Thank you so much! I just need to figure out though because when I did this using my test blog, the share buttons appeared on the front page of the blog too but on my real blog, the share buttons appear only when the blog title is clicked even though I followed your last step. Weird why it applied on my test blog. LOL. But thank you so much! Will figure that out for sure.
        Rea recently posted…The Many Meanings of A Facebook LikeMy Profile

        • Rea says

          September 7, 2014 at 11:49 pm

          I figured it out! LOL. I inserted the code below this code and it worked. Now I can sleep! LOL. Thanks once again Janine!
          Rea recently posted…The Many Meanings of A Facebook LikeMy Profile

          • J9 Designs says

            September 8, 2014 at 7:57 am

            Aww, so glad you got it and just seeing this when I woke this morning 😉

        • J9 Designs says

          September 8, 2014 at 7:57 am

          So happy this could help you again and just saw you did indeed get it – yay!! 🙂

  19. Jamie Dorner says

    March 21, 2016 at 10:33 pm

    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

      March 22, 2016 at 6:37 am

      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. 8 Design Elements Your Blog Needs Right Now says:
    May 19, 2015 at 7:45 am

    […] 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. […]

Want to Write Killer Blog Posts?

FOLLOW US ON BLOGLOVIN:

Follow

NEED HOSTING?

Wiser Sites Hosting

Need Premium Themes?

Genesis Framework for WordPress
feminine wordpress themes
Dazzling Theme

Need Primo Photo Editing?

PicMonkey Photo editing made of win

Proud to Be A SITS Girl Community Lead!

Use Bill Me Later:

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

Copyright © 2022 J9 Designs Designed By: J9 Designs