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.