Sunday, 2 March 2014

How to add your twitter handle to blogger's share button - tutorial.

Most of us are familiar with the share buttons on blogger.

Blogger share buttons.

If you tweet a post, a share window appears that looks like this


How to add a twitter handle to blogger share buttons

Did you notice that there is no twitter handle on the above picture. Here is what it should look like.


How to add a twitter handle to blogger share buttons
Your twitter handle makes it easier for people to follow you on twitter as well as help you keep track of who is tweeting your posts. You can return the favour or show your gratitude if you know about it.

Honestly, I really didn't think this was a big deal, but I've linked into a group that seems to use twitter a lot (not big in my part of the world) and I figured a few more twitter followers might be a good thing.

I started with a google search and discovered that there isn't much information about adding a twitter handle to tweets from blogger. This could mean that it's common knowledge but I'm guessing it's something that has been overlooked.

Everything I did find and try either involved signing up for things I didn't want - adding things I didn't want, was too complicated or didn't work.

Finally after learning a few new things about bloggers Edit HTML template feature, and stumbling onto the right codes in this forum, I found a super simple solution that I'm sharing with you.



Under your design tab, click on template then edit html.




Then click on format template


Once you click on format template you need to search for some code to change.  When you press ctrl f or command f, a little box shows in the top right corner of the html screen.

The code you need to search for is:

expr:href='data:post.sharePostUrl + "&target=twitter"'

just copy and paste this into the search box, and the code will show up highlighted in yellow.  



You need to replace that code with:  

expr:href='"https://twitter.com/intent/tweet?text=@YourTwitterHandle%20"+ data:post.title + "&url=" + data:post.url'


Make sure you change the @YourTwitterHandle, to your own twitter handle.

Click on Save template and all your twitter handle problems will be solved. Well at least I hope so.

Here's my new code with the right twitter handle, highlighted in yellow, after searching for it in the search box.






I am no authority on the subject, I'm just sharing what worked for me. I suggest before changing any code, that you back up the code you already have.

I did that by copy and pasting my template into a text document. Don't skip this step, it came in handy when all the other methods I tried didn't work. I was to scared to use the back up button because quite frankly I haven't got my head around what

This simple solution took me the better part of two days of searching, trial and error. Have you ever attempted to do something simple that took a lot longer than you expected.

All the best and happy sharing.



8 comments:

  1. Oh no Carol I hate that... I will email you and see if we can't work it out together

    ReplyDelete
  2. I may have to come back to this one day. Messing with code is not something I want to do at night when I'm tired.

    Lee
    An A to Z Co-Host
    Tossing It Out

    ReplyDelete
    Replies
    1. That's where the back up button comes in handy, but if you are anything like me once you start it's hard to stop messing around with things

      Delete
  3. I really am no expert - but it worked for me.. see you at the start line :)

    ReplyDelete
  4. Any idea how I can change the code to get the twitter handle to come at the end of the tweet? Nothing I've tried is working.

    ReplyDelete
    Replies
    1. Sorry for the late reply Melissa I really have no idea... it was a hard enough mission just to get the handle in the first place. If it was something I really wanted I might try and change the code to have the @twitter handle at the end rather than the beginning - e.g instead of expr:href='"https://twitter.com/intent/tweet?text=@YourTwitterHandle%20"+ data:post.title + "&url=" + data:post.url'
      perhaps try
      expr:href='"https://twitter.com/intent/tweet?text=data:post.title + "&url=" + data:post.url + @YourTwitterHandle%20"'

      but I haven't tried or tested it and it really is just a stab in the dark... I would try and play around with other combinations of the code just to see if I could do it (if I wanted to)... all the best.

      Delete
  5. I know I'm a little late, but thanks for this tutorial. It didn't work initially, but one I looked at your code and copied that I got it to work. Code is scary! Thanks again!

    ReplyDelete

Feedback and your own stories are welcome.