Thursday, March 01, 2012

Sharing on Twitter


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 + &quot;&amp;target=twitter&quot;' 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='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url + &quot;&amp;via=leahsayomac&amp;text=&quot; + 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! ☺

33 comments:

  1. so this is one benefit of blogging: we learn a bit of HTML :)

    ReplyDelete
  2. I always love experimenting on my Blogger templates :) It's kind of easy to change the codes!

    ReplyDelete
    Replies
    1. Haha! It's fun, right? Tsaka yung feeling na nasolve mo ang isang problem sa codes, it's a great feeling. Achievement! hihi.. XD

      Delete
  3. i miss experimenting/tweaking blogger templates..hahaha..great stuff here!

    ReplyDelete
  4. I 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 :)

    ReplyDelete
    Replies
    1. Yes, you could do that Mark.. :)

      Thank 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! :)

      Delete
  5. nice tutorial! good job!

    ReplyDelete
  6. Replies
    1. Salamat. XD Sharing is loving daw eh.. kaya nishare ko rin to. hehe..

      Delete
  7. like you Leah i also have great interest in html. It really help to know the basics at least.
    I'mm using addthis but will try to integrate the official tweet button. =)

    ReplyDelete
    Replies
    1. Yes. Dapat kahit papano, meron tayong idea on how to edit HTML.. :)

      Delete
  8. Great 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. :)

    ReplyDelete
  9. thanks for the turorial. I might resurrect two of my blogger sites soon and use your tips here.:)

    ReplyDelete
  10. Thanks for sharing this tutorial. I' may add this sometime soon. ^_^

    ReplyDelete
  11. I'm okay with my sharing buttons, I don't need to get spammed with notices every time someone tweets my post... hahaha

    still, showing how you did it is great for those who want to know how...

    ReplyDelete
    Replies
    1. 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.

      Delete
  12. This is cool tips, I will try! Thanks!

    ReplyDelete
  13. Leah thanks for this what I want is below our content so that readers can browse our content first before they share

    ReplyDelete
    Replies
    1. Hmm.. you could try this po..

      If 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..

      Delete
  14. cheers! ^^ haha lady guru!

    ReplyDelete
    Replies
    1. Naks! Andito ulit si Idol!! I'm so touched, I feel like crying.. LOL.

      Salamat, Taragism. XD

      Delete
  15. will finally work on my twitter too :>

    ReplyDelete
  16. Ang 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 :)

    ReplyDelete
    Replies
    1. hehe.. Sinipag lang kaya ganun. lol. sige, email mo lang. You're welcome.. XD

      Delete
  17. Super Leah ka talaga sis =)
    Thanks for sharing this. I'll try this when I get a quiet time =)

    ReplyDelete
  18. howow!!! magawa nga ito :)

    good morning friday ate lei :) muaks

    ReplyDelete
  19. I enjoy html coding too! :D Anyway, will definitely try this soon ;) Thanks Ms. Leah!

    ReplyDelete
    Replies
    1. You're welcome, ms Sumi.. :)

      Delete