I finally integrated my Twitter username on Blogger's default sharing buttons.
The good thing about the default sharing buttons, is that they allow the readers to share your contents via email, Blogger, Twitter, Facebook and Google+ with just a click. You could also easily install it in your Blogger blog, so it is one of the most used sharing buttons on blogs. That's what I've observed, anyway.
So.. that's the good thing. I've got no problem with the email, Blog and Facebook buttons.. Since I'm a Twitter junkie, my problem is with Twitter. The downside to the default buttons is that the Twitter button doesn't focus on using the API to its fullest, which, if used, should help you increase your engagement with your readers.
Simply put, if you use Twitter's official tweet button, your username is already included in the codes (data-via="leahsayomac"). So if you tweet a certain content, you will see this line via @leahsayomac. Having &via=leahsayomac in the query string is going to help you track who has tweeted your content (it shows up in the mentions) and your visitors will have the chance to follow you, if they aren't already following you. However, if you're using Blogger's official sharing buttons, you don't see your username. And that's what I wanted to fix.
I played with my codes yesterday and I finally found the solution. It's pretty simple. You could try to do this, if you want to. But before doing any tweaks on your blog's codes, make sure to back up your template first. This is important. BACK UP your template.
- On the new Blogger dashboard, go to Template.
- Click Edit HTML.
- Click Expand Widget Templates.
- Search for this code.. sb-twitter. To do that, click CTRL+F and type it in the search box.
- Here is what your code might look like. Yours may look a bit different, but this is what mine looks like..
<a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a>
- Change the href attribute. Only the href attribute.. And don't forget to change the username leahsayomac to your own Twitter username. Otherwise, it'll be my username that'll show on your tweets. Here is what it should look like after editing the codes.
<a class='goog-inline-block share-button sb-twitter' expr:href='"https://twitter.com/intent/tweet?url=" + data:post.url + "&via=leahsayomac&text=" + data:post.title' expr:title='data:top.shareToTwitterMsg' target='_blank'> <span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a>
- Click Save Template.
And that's it. You're done. This tweak automatically adds your username (via @leahsayomac) on every tweet, using the Twitter button on the Blogger's default sharing buttons. If you wanna see it in action, use mine on this post. If it doesn't work on your blog, restore your template using your backup and you're good.
If you're okay with your sharing buttons, you don't really need to edit anything. But if you want to try this, go ahead and follow the instructions, but be sure to back up your template first. Good luck! ☺
so this is one benefit of blogging: we learn a bit of HTML :)
ReplyDeleteTotally! XD
DeleteI always love experimenting on my Blogger templates :) It's kind of easy to change the codes!
ReplyDeleteHaha! It's fun, right? Tsaka yung feeling na nasolve mo ang isang problem sa codes, it's a great feeling. Achievement! hihi.. XD
Deletei miss experimenting/tweaking blogger templates..hahaha..great stuff here!
ReplyDeletehehe.. Thanks! XD
DeleteI use the AddThis bar for my blog so it comes up as "Via @AddThis" but I can add my own username there easy enough I guess. But I can see how it would be convenient to have it done automatically, and I can commend you for going so far on your own to solve the problem :)
ReplyDeleteYes, you could do that Mark.. :)
DeleteThank you very much. I feel great after solving the little dilemma. It's been bugging me for days, and I finally fixed it. Woot woot! :)
nice tutorial! good job!
ReplyDeleteThanks, Bino. XD
Deletewow very informative!
ReplyDeleteSalamat. XD Sharing is loving daw eh.. kaya nishare ko rin to. hehe..
Deletelike you Leah i also have great interest in html. It really help to know the basics at least.
ReplyDeleteI'mm using addthis but will try to integrate the official tweet button. =)
Yes. Dapat kahit papano, meron tayong idea on how to edit HTML.. :)
DeleteGreat information. Though, I am not a fan of editing html codes on my blog, I might try this one of these days. Sharing blog entries on Twitter is really fun and your tips made it easier. :)
ReplyDeleteThanks, Leo.. :)
Deletethanks for the turorial. I might resurrect two of my blogger sites soon and use your tips here.:)
ReplyDeleteThanks for sharing this tutorial. I' may add this sometime soon. ^_^
ReplyDeleteI'm okay with my sharing buttons, I don't need to get spammed with notices every time someone tweets my post... hahaha
ReplyDeletestill, showing how you did it is great for those who want to know how...
I love getting mentions on Twitter, so this works for me. Knowing that someone tweeted my content, it's a great feeling.. I spend more time on Twitter than I do on Facebook, anyway.. Not everybody wants to get those mentions, that's why I stated that following this tutorial is a choice.
DeleteThis is cool tips, I will try! Thanks!
ReplyDeleteLeah thanks for this what I want is below our content so that readers can browse our content first before they share
ReplyDeleteHmm.. you could try this po..
DeleteIf you have the codes for the buttons (like Facebook and Twitter), you have the option to put it on top of the post, or below every post.. Kung gusto nyo po, ON TOP, just below the post title, place the button codes before the code <data:post.body/> . Kung gusto nyo naman BELOW every post, you put the codes after <data:post.body/> .
Back up your template before you do ANY edits..
cheers! ^^ haha lady guru!
ReplyDeleteNaks! Andito ulit si Idol!! I'm so touched, I feel like crying.. LOL.
DeleteSalamat, Taragism. XD
will finally work on my twitter too :>
ReplyDeleteAng tyaga mo talaga Ms. Leah. Email ko nga ang post na to sa sarili ko para gawin ko din pag di na ko busy masyado. Thanks sa tutorial :)
ReplyDeletehehe.. Sinipag lang kaya ganun. lol. sige, email mo lang. You're welcome.. XD
DeleteSuper Leah ka talaga sis =)
ReplyDeleteThanks for sharing this. I'll try this when I get a quiet time =)
Sure po. You're welcome! :)
Deletehowow!!! magawa nga ito :)
ReplyDeletegood morning friday ate lei :) muaks
I enjoy html coding too! :D Anyway, will definitely try this soon ;) Thanks Ms. Leah!
ReplyDeleteYou're welcome, ms Sumi.. :)
Delete