About Me

My Photo
Amongst other things, this is a love story.... the theme changes occasionally... this year it is fitness and learning to love yourself.

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

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

All the best and happy sharing.



30 comments :

  1. Thanks for the Tutorial. I use Twitter only once in a while. It is nice to know how to do things though.

    ReplyDelete
    Replies
    1. You're welcome Munir, I wouldn't have worried about it, but a lot of people do use twitter for sharing, and if I know something is doable I want to be able to do it.

      Delete
  2. Something handy to keep in mind!

    ReplyDelete
  3. Thanks for the tutorial. I'm off to try it out for myself.

    ReplyDelete
    Replies
    1. Hi Jennifer let me know how you went.

      Delete
  4. I tried and retried and followed your instructions to the letter but getting an error message that the url was not "declared". So, it didn't work. Any suggestions?

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

      Delete
  5. Hi Ida,

    Handy hints. I think I'm already set up correctly. I also have noted that in the last day or so, my total twitter followers has increased a lot. Might have something to do with my more controversial rantings.

    Thanks for this, Ida.

    Gary :)

    ReplyDelete
    Replies
    1. Hi Gary. Quite a way off from my usual blog posts - of course now I can't wait to see what controversies you have been mustering up... @chelseacanadian - see what I did there - :)

      Delete
  6. 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
  7. YES! Loved this, Ida. Like someone else above, I kept getting a "URL not declared" error, but I sorted it out by looking at the screenshot of your final code. Excellent tip, Ida, and much needed tutorial. Thank you!
    Guilie @ Life In Dogs

    ReplyDelete
    Replies
    1. I'm still trying to sort out Carol's issue, but I am convinced it's something simple. Thanks for your helpful comment I will let her know how you solved it. Thanks also for sharing, I really think most bloggers aren't aware of this.

      Delete
  8. Thanks Ida ... have computer gal coming by just now to help me with stuff and will bring this to her attention... one thing I did this a.m. was to make a doc of my URL link and have made several of them on same page of doc so that I can can cut and paste when commenting on especially blogger.com posts as A-Z looms. Am going to try it now -

    Garden of Eden Blog

    ReplyDelete
    Replies
    1. worked a charm, and for the first time I was able to find your blog easily :) going to check if your twitter handle works now

      Delete
  9. I couldn't get it to work but I'm not very savvy at html.
    It took me all day to get the link in the comments thing to work.
    Have a great day.

    Heather M. Gardner
    The Waiting is the Hardest Part
    Stormy's Sidekick
    Blogging from A to Z April Challenge Co-Host

    ReplyDelete
    Replies
    1. Bugger, I wish simple fixes would be simple for everyone - your links however, worked beautifully .. hmm except the stormy's sidekick link takes me to a page that no longer exists... Let me know what went wrong with the twitter handle - did you find the code you were supposed to replace? what happened when you replaced it? Send me an email if you like mysolemates@gmail.com - maybe I can help - I'm not html savvy either but I managed to get it to work.

      Delete
  10. Hi Ida,
    Thanks for the heads up about the link.
    I'll work on that.
    I'm not sure what went wrong w/ Twitter. I think it might have been operator error. Brain kind of fuzzy w/ all this challenge stuff going on.
    Can't wait to check out your posts!
    Thank you,
    Heather

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

      Delete
  11. Just blogging around and found your blog. So glad to see you here blogging so many deserted blogs these days. Thanks for letting me visit. Each blog I visit is like meeting someone new.
    Susan
    http://joininandgogreen.blogspot.com
    http://myfavoritesolarlights.blogspot.com

    ReplyDelete
    Replies
    1. Hi Susan thanks for blogging around and commenting too, I haven't come across too many blogs that are inactive because almost every blog I check out is doing the #atozchallenge in April - are you?

      Delete
  12. 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
  13. 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
  14. I get an error message using your code Error parsing XML, line 1625, column 174: The reference to entity "url" must end with the ';' delimiter.

    ReplyDelete
  15. Hi Cassandra, I just read the message above yours and can only suggest retrying it - did you copy and paste the whole thing, perhaps just adding a semicolon ; at the end of of your URL

    ReplyDelete
  16. This is all great info. But, I don't see my Search in my templare area. Looking at the code is making me dizzy. How do I add or find my search box to find the code I need to replace?

    ReplyDelete
    Replies
    1. on a mac you press Command f on the keyboard and a little search box shows up on the top right hand side... not sure on a PC but control F might work - otherwise google is your friend in these circumstances.

      Delete

Enjoy