One way to help spread the word about your site, is to offer a tweet button to your visitors. Personally, I think most people, (visitors to your site), don't use them. I am basing this on my own surfing habits. I am usually loath to recommend a site I have just landed on, unless I am sure of the contents and attitude of the owners and other visitors to the site.
Really, I'm saying, I don't just recommend sites lightly. I need to feel reassured that my recommendation is a good one. But, there you go, maybe that's just me! - I think the tweet-buttons really do come into their own, once I am familiar with the site and have a bit of history with the site myself.
I will often re-tweet or tweet directly from a site that I visit on a regular basis, like a well known news source, (or even a site or blog like HTML Bits! - Hint - hint). So, from that angle Tweet buttons could prove really useful! Go on then Tweet-Me! I'm waiting!
OK - How to add the Tweet me button to your site.
First be signed in to Twitter and your blog or website CMS, (Content Management System). This method works similar on most CMS platforms. And is similar to installing a Twitter Widget as described in another post on this blog. If you are totally new to how CMS platform work, it might be a good idea to read that post first.
In Twitter, go through the drop down menu, (currently at June 2011), it is top right, under your Twitter user-name when signed in). Go into settings and then look at the bottom of the page and find the link to 'resources' and click that. Your resources page looks something like this, (below).
We need to select the 'Tweet Button' resource. When the first screen comes up, you get a choice of how you want your twitter button to look. (See below). I think it is not a good idea to use the buttons that show your followers numbers, if you have only just started out and don't have many followers! As currently at June 2011, HTML Bits is just starting up, and it is a new blog and Twitter group.
For now, I would select 'No-Count', you can always change it later, (as I will here at HTML Bits), when there is a reasonable follower count to shout about! At a basic level, you could just put the script straight onto your site. You do this by copying the code is the box. You might want to add a center tag to this code, depending on where you are going to place it!
You can even test the link on this page, by clicking the blue word 'Tweet', (there may be something wrong with the image on Twitter as I write this, because the button should be showing the same button as described on the same page. See pic below).
Anyway, failing that, the button does work, I have just tested it in a module on my site. The button looks just as it should and as it does above. However, there are a few more alterations you can make.
First, - let me just show you that button, before we move on.
See in the pic below - I might center it, but I really do like it sitting on the left!
Moving on, back up the page is a set of tabs to further alter your tweet button. As you can see on the pic below, the next tab is the Tweet text. Practice with this later, but for now, you can just leave it as it is!
If you want to edit the text people see, write something about your site like a catchphrase that encompasses the feel of your blog.
I decided that I wanted to say something! - You will see it appear in the Twitter Widget as my second post, (I will put a pic here for future reference). I didn't want to say nothing or to just say 'Check this out!' I mean, what does that say? Nothing really.
I said: 'Visit the HTML Bits Blog to read what I found so interesting today!' Do you like it? If you take a look at the HTML code on the same page in the box below, you will see that the text you write, also appears in the HTML code! (See pic below).
Next, lets take a look at the URL tab, (see pic below). Again, you can just leave this alone, the link will direct people to the page the button is on. Alternately, you can enter a specific web page URL. (The address of the page you want them to visit).
It is a good idea if maybe, you are giving something away for free. In this case, you could use the previous tab - 'Tweet text' to say something like; 'Come and get your FREE report about how to - X, Y and Z'.
When people receive and read this text from their friends Twitter account in their Twitter account, it looks as if the friend is giving them something for free. It is a kind of recommendation!
Lets move on to the Language tab. Self explanatory, (so no picture). Just leave this on your own language. You would use this if you are building pages in a foreign language version of your site. I've never used it yet!
Getting the button onto your site!
In your CMS, here I am using Blogger again as always, but I do have Word-Press CMS sites too and the process is basically the same. You open a HTML / Java module or gadget as blogger calles them, then you enter the HTML code. Simple as that!
So, go and copy the final HTML code from the box further down the page!
Mine looks like this now, (See below).
Add a Gadget, in your design page at Blogger.
Select to add a HTML/Java script code box. Clicking the plus symbol.
This then opens a new empty code box, that you paste your copied code into!
It is a good idea to add the center-tags at this stage if you want the Tweet box to appear centered, otherwise, leave it alone and it is usually placed left justified.
Adding Center-Tags.
Click in the box, so that you have a flashing cursor to write with. Make sure you position it at the very start of the code! You open the 'center-tag' with <center>, type this at the start of the code in the box. Then navigate to the end of the widget code and close the 'center-tag' with </center>, typing this tag in at the very end of the widget code! Then click SAVE!
Incidentally, before adding the center tags, the button looks like this in my sidebar. (see pic below). The blue Tweet button is set to the left!
This is what my HTML code looks like before the Center-Tags are added, See pic below!
After adding the Center-Tags code, this is what my code looks like with the center-tags added. Look at the very start and the very end of the code!
Click 'save' in the HTML/Java box to close it!
Next, you need to (drag and drop), to position the HTML/Java box gadget to a suitable place in the sidebar. (See the pic below). It is the box titled 'Tweet about this to your fo..' (5th down).
- It needs to be high up, so that visitors who don't scroll down the page have more chance to see it, but it still also needs to be below your 'About Me' and 'Search-this-blog' widgets..- But its up to you!
And the result in the sidebar, is as below! I think that I prefer the button left justified, so I am going to take out the center tags. Look in the sidebar for my Tweet button and please use it to tweet my posts if you like them.
Here's the finished button at work! See below.
Finally, please comment if you found this article helpful. If you have any problems, I might be able to help you by replying to your questions or comments. I'm not promising that I can, I'm only a novice HTML-er, so bear with me. My advice is not to try and learn everything. "You can't", there's too much of it out there! - Just learn what you need, or ask someone who knows how to do it, to do it for you!
I have helped people before with their HTML issues, if you are an HTML expert then this article might have seemed over simplified for you, (but thanks for reading it anyway). I have written it the best way I know how, so that even my 10 year old son can follow it. He can too! -
I've just been testing this by getting my son to help me. Following my instructions, reading a bit and doing it, step by step, he has put that Tweet button on the HTML blog with me, just now!
So, there you go, if a ten year old can do it, so can you!
AndyGold.(and Liam). For the HTML Bits Blog.
© AndyGold 2011
TAGS: How to add the Tweet me button to your site, Tweet button, Tweet widgets, Adding Center-Tags,
No comments:
Post a Comment
Please remember to keep to clear, clean and concise comments only.
Thank you for your comment, it is very welcome.