This post is about setting-up and adding code, (installing a script), to show your Twitters on your blog or website. It is not hard, but some people who consider themselves tech-guys, seem to want to keep newbies baffled with the science of it. It is really simple stuff, read on and see how to do it, step by step!
Perhaps this post is jumping the gun a little, because I haven't logically shown you how to set-up a Twitter account to match your blog or website! (Maybe later)! I don't think this should be too hard to do, so I think I may well skip that issue altogether.
I think most people can set-up a Twitter account without any help and there is little difference to setting one up for your blog or website!
- Tips: Make sure you have a picture and at least one starting post in Twitter! Next,alter the colors and back-ground at least from the default colors Twitter uses.
- Your aim should be to try and make your Twitter page match the colors on your blog, so that people can see that they go together naturally! (Branding)!
Setting up a widget and putting it on your blog or website, is a slightly different aspect to setting up a Twitter account, but the principles about matching your blog are the same as above. If the finished result looks out of place or clashes un-naturally, then this could mean visitors bouncing off your blog page. You are trying to create a seamless flow from Twitter to Blog (or website), and vice-versa.
To start, sign in to your Twitter account and your blog or website. In this case, we are demonstrating this with Blogger. Whatever blogging or sit building platform you use, the process is pretty much the same. You might find a little reading in the help section at your providers home page will give all the info you need.
If using a Blogger blog, sign in to blogger. If you are having trouble working on another blogging platform that is not Blogger, then why not try this in Blogger first. Blogger is free! - And, once you have worked out how to do certain things like installing scripts, (if you are new to blogging and site-building), you will be better prepared to adapt what you learn onto another CMS (Content Management System)! Or be better acquainted and know what questions to ask!
Here we go!
In Twitter, go to settings, then at the bottom of the page, (as it is laid out in June 2011), look for the link to 'Resources' and click that.
You should see a page of resources, similar to the page pictured below. Select the 'Widgets' resource.
Next, we want to set-up a Widget for our Website or Blog. (This works similar for Facebook integration too, you can do that later from this page, by selecting the Facebook widget). Click the 'My Website' link in the left sidebar, as pictured below.
The one we want is the 'profile widget', the others have self explanatory titles, (explore them later yourself). You can always change or delete what you do, so don't be afraid of making mistakes!
The first screen for the set-up of the widget is the settings tab. But there is not really anything to alter here, so click the next link down, 'preferences'!
Appearances is where you will need to make the widget match your blog or website page. You could just use it as it is and skip this too if you are in a hurry. We are just trying to make our widget look natural and part of the blog.
Below you can see small coloured boxes that relate to the colours on the widget. The important thing to look out for, is to make sure that you can still easily read the text after you have changed the colors!
When you click on the coloured boxes, as in the pic below, another box opens to allow you to manipulate the colours in three different ways. 1, If you already know and understand the hex-code numbers in the boxes, you can just copy or type them into the boxes. I use this sometimes, to get the same colors across different applications and sites. (They all seem to use this standard code).
The second and third ways are similar, in that you can either slide the arrows either side of the verticle colour-bar and / or click in the larger color box. You can usually see your changes in real time, but if not, there is a test button to show you how things look with your changes.
The 'Shell' - (think - egg-shell), is the outside shell. (Its your profile name and pic on Twitter), that contains the inner information that changes. (The Tweets). So, changing the shell colours changes the head and foot of the widget.
If you are unsure, let me tell you, that you cannot break anything! - If things don't look like you expected, try again. If you want to return to the original and start again. just drop back to the settings drop-down menu and go back into resources. Everything will reset.
TIP: You could write down the numbers of the colors you like for future reference!
Above, I altered the width to 200 and the height to 400, but the height won't show properly because I only have one post in the Twitter account. If you have more posts, then the widget will show more height. The real and only test, is to see how it looks once it is on your website.
Click the button to 'Finish and Grab Code'. This will display the HTML code for the widget. In websites, you would just select all of the code and copy it. Then paste it into your site either in a module or directly within your HTML master. (We are not going to do that here, as that is too involved for our site. We are just HTML Bits, - with 'BITS' being the operative word)!
Whatever CMS you are using, you can usually just copy the code and paste it into an HTML/Java module or similar container in you CMS. We can do exactly this in blogger; Or more easily, just click the One-Click Install button they have already provided for us. Currently, this is the only plug and play option Twitter provide. They may welll add more CMS applications later (like Word-Press I hope), who knows?
When you click the Add-to-Blogger button, a new page opens for you to select which blog you want to install the script on, (if you already have more than one blog). Also, you can give the script a name, it is set to say 'Twitter', but I like to have it say something like HTML's Twitters, or Read My Twitterings!
Next, click the blue 'ADD WIDGET' button.
Next, (see below), drag the widget's box to a suitable location in your side-bar. I prefer to see it lower down the page, as people may have just read your tweet at Twitter and followed the link back to your blog or site.
You don't want to be showing them the same Twitter Chatter that they have already seen, but when they get lower down the page, they will see you Twitters, and perhaps read some of your other twitter post, which might lead to more interest and more clicks on more of your posts or products.
When you realize that the Twitter visitor may have only seen, just 'one-of-your-posts' on their page of people that they follow, then you will understand that this widget gives you the opportunity to show the visitor some of your other posts too!
Locate your Twitter Widget, below your 'About Me' and 'Search-Blog' module boxes if you use those. Once you decide on the location, click save in the design page. (Usually top right in Blogger)!
Next, open the public version of your site or blog, to see how it looks. If you have this public view open in a different tab, it will be quicker to switch tabs, alter the position, switch back and refresh the public version.
As you can see below, my first attempt was too wide and had the wrong colors!
I went back and forth in the Twitter 'appearance' and 'dimensions' settings in Twitter, altering the sizes and colors till I got to a more pleasing and natural looking widget that fits in with the rest of the blog!
If you do not see a Blogger button, (as in the pic above), click the 'Finish and Grab Code' button once, it should then appear (as in the pic below). If you don't get an Add-to-Blogger, on your widget builder, (as some people say they still don't see one after clicking 'Finish'), then you may have to revert to selecting all the code in the box. Coping it into the buffer, then open an HTML/Java gadget in blogger by clicking 'Add-a-Gadget' in the design page.
Paste the code into the box and click save. You are almost done! - One more thing to do, is to center the widget in the sidebar. You don't have to, but I always think it looks better centered! It depends upon the layout and style you want in your blog. All you need to do is open the module or gadget box that contains the widget code and add the center tags to the code.
In your Blogger design page, click the 'edit' link (there's one that sits inside each module box, its blue and underlined). Obviously, choose the module for your Twitter Widget! It looks something like the one in the pic below! Be careful not to add or delete any characters in the code, because even a space in the wrong place can mess up the code!
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!
Keep altering the script in the Blogger module box as above till you get what you want. You can even alter the width and height from within the Blogger module, just look closely within the code and find the width and height values, (see pic below), then change them. Save it, but click save both in the module and again in the design page, before you refresh the public view, or your changes might not take effect!
It was looking better, but a little bare. I need to make some more posts!
That's it! Look for it now in the side bar! Please comment and let me know if you have any problems, I might be able to help! I will if I can!
HTML Bits! - AndyGold.
© AndyGold 2011
TAGS: center-tag, widget, twitter widget, adding widgets, adding scripts,
I liked it, (but then again, I wrote it! So I'm biased)!
ReplyDelete