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?
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.
2. Now that you are in “Template”, you will want to click on “Edit HTML”.
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/>
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 = "http://connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Google +1 -->
<script type='text/javascript'>
(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>
<!-- 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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</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 == "item"'>
<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='"http://pinterest.com/pin/create/button/?url=" + 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”
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 == "item"’>
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.
Hope this tutorial has helped you and so happy to share this will all the Blogger Blogs out there!
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
Oh thank you on both fronts Karen. Seriously appreciate it and glad that I could explain this ok for most!! 🙂
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
Oh totally my pleasure Carol and seriously so happy to be able to help you!! 🙂
Your tips will help many bloggers, Janine!
Thank you so much Christy for your kind words and also the share, too!! 🙂
Hi Christy!
Just followed you via Blogloving Blog Hop. Hope you follow back:) Happy Thursday! http://www.bloglovin.com/blog/5811025
Hi Yonca, I also run Janine's Confessions of A Mommyaholic and am following you from there now, too. Thanks and Happy Thursday, too!!
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
Oh so happy that you are going to try this, Kim and let me know how it goes for you!! 🙂
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
Oh I hope you do try this Katie and let me know how it goes for you!!
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
Thank you so much Nicole and happy to be able to help you out!!
You have a knack for explaining things well. Thank you for sharing, and for linking up at Super Sunday Sync!
Thank you so much Rosey for your kind words and my pleasure linking up!! 🙂
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
Oh thanks so much Christine for pinning and very happy to be able to help Blogger blogs, too here!!! 🙂
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!:)
Totally my pleasure Judy and glad to linkup with you as always!! 🙂
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?
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!! 🙂
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'!
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!!
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
Aww, thank you so much and truly my pleasure to help and share these tutorials for both platforms!!! 🙂
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 "What's Your Style?" Blog Hop #2
Oh thanks so much and do hope you get to try this and use for your blog now!!
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!
Thank you so much Elena and I really do love what I am doing with J9 Designs!! 🙂
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> <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!
Thanks so much Stephanie and heading over to your blog now, too!! 🙂
Useful post.
Thanks for sharing this Blogger tip!
My recent post Hunting Lodge in the Woods (Senokos, Vratnica)
Totally my pleasure and so glad to be able to help you!
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.
Sorry, it still alludes you, if you could tell me what has you stuck maybe I could help.
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.
Thank you Ida and will send others your way, if they are having any trouble with my own here!! 🙂
I tried this today!! And it’s working! Yay, so happy, thanks so much Janine! 🙂
Rea recently posted…From Croatia To Philippines!
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 🙂
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 Like
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 Like
Aww, so glad you got it and just seeing this when I woke this morning 😉
So happy this could help you again and just saw you did indeed get it – yay!! 🙂
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.
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.