How to schedule tweets in Hootsuite

If you use Twitter, you may find there are times when you feel you should be tweeting, but you just can’t be available. For example, tweeting while you are asleep but the other side of the world has woken up. For times such as this there are apps available to schedule your tweets, so when you are awake and do have time, you can write what you want to say and schedule them to be sent at a specific day & time. 

There’s a lot to be said for NOT scheduling tweets – what happens if someone wants to interact with you then & there? They think you’re available because you’ve just tweeted so why aren’t you replying? But I think as long as it is done sensibly it can be a huge benefit. 

If you have a lot to say, it can also help to get it all out of your system, but spread the tweets over a few hours, say 15 minutes apart and you aren’t spamming your followers and maybe losing them. There’s a blog post on Twitp.com about this. 

I use Hootsuite to manage my Twitter accounts, so I’ll use this to show you how to schedule tweets. 

To schedule your tweets 1 at a time:

Write your tweet as you usually would in the text box at the top of the HootSuite screen. (If you have more than one account set up, make sure you choose the account you want to send the tweet from.) Instead of clicking the ‘Send Now’ button as usual click the little Calendar icon in the box below your message. 

A Calendar will pop up, as in the image below. So select the day & time you want the tweet to be sent (make sure its in the future!!) If you’d like to be told when the tweet has been sent, tick the box below. Then click Okay.

You should now have a yellow bar at the top of your screen including details of your scheduled tweet. 

If this is wrong you can Cancel, if you’d like to go ahead, you’ll notice that your ‘Send Now’ button has been replaced with ‘Schedule’. Click this and your tweet will be ready to go when scheduled!

To schedule many tweets:

Hootsuite also has an option where you can upload a spreadsheet to allow you to schedule up to 50 messages at once.

You can download a sample spreadsheet from Hootsuite.

So, download the spreadsheet using the link above.

In column A, you need the date & time you want the tweet to be sent. In the following format DD/MM/YYYY hh:mm, so to send a tweet on 22 May 2011 at 2:35pm you would put ‘22/05/2011 14:35’. The first tweet must be a minimum of 10 minutes from the time you will be uploading your spreadsheet and times should be in 5 minute increments.

In column B, put the tweet text you want to send. For example, ‘Look at me – I’m scheduling tweets!’ (Don’t forget you are still restricted by the number characters, and if you want to add a link you need to leave space for that too. )

In column C you can enter a URL or web address if the tweet needs to link somewhere. This link will be shortened, but don’t forget to allow space for it. Make sure you add the http:// prefix before your URLs.

Save your file.

In Hootsuite click the calendar icon, as above, then click the ‘Schedule in Bulk’ button. Its worthwhile reading through the information Hootsuite has provided before continuing.

Browse to your spreadsheet and select the Twitter account the tweets will be sent from & click Submit. 

You should get a message to say it has been successful. Then sit back while Hootsuite tweets away for you!

How to...link to your Facebook page

One of the most popular posts on this blog is 'How to add a Find us on Facebook button'. As it was written back in November 2008 it is now out of date. We have had a number of requests to update it, so here you go.

The Find us on Facebook button

Essentially the button was a marketing tool provided by Facebook to enable you to link to your page and you needed to know how to add an image & a link to your website for it to work. This is still the case and, as far as I am aware, you can still use the button if this is your preferred method of linking.

Facebook Icons

Another popular choice, if you use a number of social networking sites, is to line up a few icons and add a different link to each of them. There are plenty of people offering free icons for download for every site you can think of! A search for 'free social networking icons' will give you plenty of options. Or you can design your own to match in with the theme of your website.

The icons above were found on the following sites:
1, 4 & 5: http://blueblots.com
2: http://tydlinka.deviantart.com
3: http://www.blog.spoongraphics.co.uk/

There's also a wide variety of Facebook icons on www.facebookicons.net.

Facebook Badges & Boxes

Facebook has made a few pages to enable you to link from your website to your page. We have covered adding a Facebook 'Like' box in a previous post, and another option you have is to add a badge.

If you follow the tutorial above, get to step 3 and instead of 'Add a Like box to your website' click 'Get a Badge'.

on the left hand side you have a number of options to choose from - Profile badges, Like badges, Photo badges and Page badges. Click on Page badges (if you aren't already on the right page).

To see how you can change the badge, click on the 'Edit this badge' to the right hand side to see the options available. Then just copy the code and add it to your website (or send it to your web developer).

This is just a very quick overview of the options available to you with the new Facebook pages, so if you'd like any more details or have anything else to suggest please comment and let us know.

How to....add your business to Google Places

When you perform a search in Google you may have noticed that you now get a few different types of results. So before I carry on with this guide, I'll explain the differences.


(1) & (5) are paid for ads. You'll notice that (1) is in a slightly shaded box and that both tell you they are 'Ads'.

(2) is a natural or organic search listing, so these people are there thanks to SEO.

(3) are the results based on Google Places and conincide with the map (4) to show you physically where, in this case, each shoe shop is located. These results are not based purely on your location and you still need to optimise your website to ensure you're placed towards the top.

However, as the Google Places results often appear above many of the natural listings and take up most of the first page of results, if you rely on local searches and haven't added your business now is the time to do it!

In the example below, we’ll set up a cake making business in Swansea.

Step 1

In your web browser go to http://www.google.co.uk/places, if you have a Google account sign in. If you don’t yet have a Google account click on the ‘Sign up now’ link.

(If you already have a Google account, skip ahead to Step 2.)

All you need to set up an account is an email address. Enter your details and follow the on-screen instructions. You will need to validate your email address in order to continue.

When you validate your email address you should get the following message:

Use the 'Click here to continue' link and you should be directed back to the Google places page.

Step 2

Click 'Add new business' to get started, then on the next screen add your phone number and click 'Find business information'.

If your business is already on Google Maps, you'll see a message similar to this:

If this is your business, you can claim the listing by clicking 'edit'. If it is not your listing, click 'Add a new listing' to enter your details.

If you are setting up a new busines, it is unlikely that Google will have any data about your business, so you will get the following screen for you to input all of your information.

As you enter your details you'll notice the map on the right hand side move down the screen with you and update to match your details, see example below:

When you are happy, click the 'Submit' button.

Step 3

In order to publish the listing you need to validate it. At the moment Google offers validation by postcard, which unfortunately can take a few weeks!



Click Finish & you'll get the following message:



Within the next two weeks you should recieve a letter with your validation code. When you receive this, log in to your Google Places account and enter the PIN where indicated.

I'll update this post with further details when our validation letter arrives!

MODx Revolution Tutorial for beginners – Part 3 - Your first MODx site

Introduction
Ok, so in the last tutorial, we had a nice introduction to the MODx manager, looked at some important System Settings, had a quick look into Templates, and installed our first add-on.

Today, I’m going to look a little further into Templates, and actually build a new site (based on a free CSS Template).

Building Sites with MODx
In most cases, you’ll design you site in Photoshop, or your graphics program of choice, slice up all the images, then start coding it with squeaky clean XHTML and CSS. Or at least, that’s what we do! One of the nice things about MODx is that it’s incredibly flexible. You can build a site almost completely static, with just a few little MODx features used, or you can go the whole way, producing a dynamic website jam-packed with interactivity and space dust.

By using a CSS template, I can show you how to get your site up and running once you’ve coded it, then add in all those nice MODx features afterwards. The template I’m going to use can be found here. This template contains several different features that lend themselves well to a MODx site, like a site search, recent posts, recent comments, tags, categories and archives.

So after unzipping the template, I can see that it has an index file, folder for the images and a CSS file. These are the only files we’ll need to get the site up and running.



File Upload
So we want to transfer the images into our MODx installation. There are a few different ways that we can do this with MODx Revolution. We could either use an FTP client and simply drag the folders into the “assets/images” folder, or we can use the new file upload feature of MODx Revolution. Seeing as we’re here to learn, let’s do it the MODx way!

In your Manager, click on the Files tab. In the top right-hand corner, you’ll see a little blue and white icon.



This is your MODx Browser! A quick and easy way to see all of the files associated with your installation of MODx. So click on the icon, and your MODx Browser will open up, overlaying the manager screen.

On the left, you’ll see a number of folders. If you go into assets, then click on images, you’ll see all of the files in that folder on the right. Don’t have any images? Good. Me neither. We’re about to sort that out.



Click on the small icon that’s furthest right out of all the icons above the document tree on the left. This will open up the MODx file upload facility. When the file upload box has appeared, click the ‘Add’ button, and browse to the images in the free template.



Once you’ve selected all of them, you should see them all listed, ‘Queued for upload’. Then just click Upload, and you’re done. You should now see all of your images in your images folder.



So that’s the images done, let’s just get the CSS and pop that into our styles.css file. We already linked up our index file and our CSS in the last tutorial, so it makes sense just to copy the template CSS, and paste it into our CSS file. Once you’ve copied the CSS from the template file, you can use the MODx text editor to paste it into. One thing to note here is that the image paths shown in the Template CSS file are slightly different to what we’re going to need, so we need to amend them slightly. Instead of having ‘images/image_name.jpg’, we’ll need to change them to ‘../images/image-name.jpg’. Once that’s done, we’ll go and make the final change to the template.

Template editing
Open up your BaseTemplate (under the Elements tab, and then inside the Templates folder) and copy the contents of the index file from the template file. Paste all of this over whatever you already have in your BaseTemplate. If you hit Save, and refresh your website in a browser, you’ll see that we have a load of ugly, un-styled content. We need to adjust the path to our CSS file in our BaseTemplate.

The line that reads:


<link href="default.css" rel="stylesheet" type="text/css" media="screen">


Needs to be altered to:


<link href="assets/styles/styles.css" rel="stylesheet" type="text/css" media="screen">


Refresh your site now, and you should see something pretty similar to the template we downloaded.



Update the image path of the flowery image in your BaseTemplate, and you’ll be done.



CodeMirror
Going off on a little tangent, I just want to introduce this fantastic add-on. Its best to get this in now, because it can really help you while you’re building your site.

The add-on is called CodeMirror. It makes the MODx text-editors much more user-friendly from a coding point of view. You can download it from Package Management (Remember when we installed TinyMCE in the last tutorial??) and it can be found in MODx Add-ons > RichTextEditors. Once you’ve downloaded and installed it, you’ll notice that your BaseTemplate now has text highlighting and line numbers. It may be small, but it’s much easier to manage all of your coding inside MODx with this add-on.

MODx-ing your template
Now, we’ve essentially got a one page static site, with all of the code being stored in our BaseTemplate. But we’re using MODx, so we should take advantage of some MODx tags to help us along the way.

In all honesty, the coding shown in the BaseTemplate (that we got from our free template) is a little outdated. I’m going to update it, and add a few MODx tags in one sweep.

The current head tag looks like:


<meta equiv="content-type" content="text/html; charset=utf-8">

<title>Premium Series by Free CSS Templates</title>

<meta name="keywords" content="">

<meta name="Premium Series" content="">

<link href="assets/styles/styles.css" rel="stylesheet" type="text/css" media="screen">


I’ve changed mine so it reads:


<meta charset="[[++modx_charset]]">

<base href="[[++site_url]]">



<title>[[++site_name]] | [[*pagetitle]]</title>



<meta name="description" content="[[*description]]">

<meta name="keywords" content="">



<link href="assets/styles/styles.css" rel="stylesheet" type="text/css" media="screen">




Apart from adding a few MODx tags, I’ve added an HTML5 DOCTYPE, a base href tag and a meta description tag. This keeps things nice and up to date. We’ve also removed some of the bits that aren’t required when a HTML5 DOCTYPE is declared.

So let’s just take a look at each of the MODx tag and explain what they’re doing:

[[++modx_charset]] – This is the character encoding that is used for your site. You selected it during installation. MODx primarily works with UTF-8.

[[++site_url]] – This is the URL of your site and was determined when you installed the site.

[[++site_name]] – This is the name of your site, as specified in the System Settings.

[[*pagetitle]] – This is the title of each of your resources. The only one we have at the moment has the title of ‘Home’.

[[*description]] – Again, this is specified in your resources. This tag is very handy for the SEO of your site as generally, the content of the description tag is shown in the Google search results (other search engines are available!)

So if you now Save your BaseTemplate, and refresh the website, you won’t see too much change, but if you view the source, you’ll be able to see exactly what we’ve done.



Summary
In the next tutorial, we’ll look further into Chunks, and why they’re so cool.

If you have anything to say about this tutorial, or how it could be improved please feel free to leave a comment.

If you need help with a MODx website, why not give us a call or get in touch?

How to....Add a Facebook 'Like Us' Box to your Website

Happy Friday Folks!

Today I'm going to show you how to add a 'Like Us' bos for your Facebook page to your website. It's a bit of an update from our 'How to add a Find us on Facebook button' post.

Step 1: Go to your business page on Facebook.
(If you haven't already got one, see our guide on how to create a Facebook page for your business.)

Click the button labeled 'Edit Page' in the top right hand corner of the page.

Screenshot of Picseli's Facebook page

Step 2: Click on the Marketing link

From the menu on the left hand side, click on the 'Marketing' link.

Step 3: Get the box

Here you will see a list of the options available to help you market your Facebook page & get more 'likers'.

 

Click on the 'Add a Like Box to youu Website'

Step 4: Customise your box

On this page you'll see an example box that you can customise to suit your company.

As you make changes to this little form you should see the example box on the right update to reflect your changes. 


- Facebook Page URL: In this box you need to enter the URL or web address of your facebook page. In our case it is http://www.facebook.com/picseli.

(If you don't have a customised or vanity URL yet, then you'll need to open up another browser window or tab, so you don't lose your current place, and navigate to yoru Facebook page. Then in the address bar at the top of the browser copy the whole text that appears starting with http://www.facebook.com/....., then paste this into the Facebook Page URL box.)

- Width: If you have a special place for your Facebook box to go, you'll know how wide it needs to be, so enter this width - in pixels - in this box.

- Colour Scheme: You can either have 'Light' (which leaves it white) or 'Dark' (which turns it black), so select dark, see what you think and make your decision. For Picseli, we'll be leaving it as Light.

- Show Faces: If you untick this option, you won't see the icons or avatars of the people who currently like your page.

- Stream: If you untick this option you will be left with just the people who like your page, not the latest posts to your page.

- Show Header: Untick this if you don't want the 'Find us on Facebook' banner at the top of the box.

So you can make your box as complicated or as simple as you like, showing your latest posts and 'likers' - as we have done in the right hand bar on this blog - or just have a simple 'Your Company on Facebook' link, as in the image below.

When you're happy with your box, select the 'Get Code' button.

Step 5: Display on your website

You'll get a pop up box with 2 code options, so copy whichever one suits you best (or copy both & send them to your web developer) and add them to a suitable place on your website or blog.

And there you have it, visitors can Like your Facebook page from the comfort of your own blog. Hope it helps!

P.S If you do enjoy these posts, please do come and like us on Facebook - don't foget to say Hi!

MODx Revolution Tutorial for beginners – Part 2

Introduction
Ok, so following on from Part 1 of this guide, you should have your install of MODx Revolution up and running! If you use your username and password that you selected during the installation process, you’ll be able to login and see the MODx manager administration screen. Pretty, isn’t it?

With MODx Revolution, you start from a completely clean slate. If you’ve used MODx Evolution before, you’ll notice that there is no pre-installed site template, or content, or extras. All you get is a very basic template which just outlines the default HTML tags, and a single resource with no content in it. For me, this is a big plus for Revolution. I don’t have to go in and remove a load of bits I don’t want to use. I can just fetch add-ons when I want them.

Site Configuration
There are lots and lots of different ways you can configure MODx from the Manager. You’ll need to use the System Settings at various times throughout a project, so it’s probably wise to have a quick look into how it all works before we get started on anything too serious!

So, in the Manager, hover your cursor over ‘System’ and select ‘System Settings’ from the drop down menu. You’ll then be taken to the System Settings screen where you can set general preferences and configuration settings for the MODx manager interface, as well as how your MODx site runs.




Feel free to have a good look through all of the different options you can change here. There is a ‘Filter by area’ drop down where you can choose to look at settings associated with a certain area (Friendly URLs for example), a text search where you can simply type in the name of the setting you’re looking for, or a drop down where you can look at settings for some of your add-ons (don’t worry, you shouldn’t have any yet and by default, this option is set to ‘core’. You can also create your own settings, but that’s definitely for another day!

What I want to alter now is the name of your site. In your default template, the name of your site is currently being used in the title tag. In most cases, this would be the name of the company who’s website you’re building, or your name if it’s a personal site. To find the setting we want to change, use the ‘filter by area’ drop down menu, and select ‘Site’.



Your settings should change, and if you look half way down the list you’ll see a setting entitled “Site Name”. Double-click on the default Site Name (it will probably read ‘MODx Revolution’) and alter it to whatever you like. I’ve changed mine to “My new fabulous MODx site!”.



Hit the enter key, and you’re done. Easy eh? There’s no need to hit a save, or submit button, as soon as you’ve amended the setting and hit enter, you’re done. Now, if you go to another browser tab or window, and load up the front end of your site, you should see that the title of your page has changed to the Site Name you just entered. Have a look at the Source too. This will show you that the new Site Name has been placed inside the title tag. Now I’ll show you why it’s appeared there.



A quick intro to Templates
If you go back into your Manager, on the left-hand side you’ll see a box with three tabs called Resources, Elements and Files. We’ll be using Resources more in the next part, so for now, click on Elements. You’ll see a list of categories, all with different icons. Now don’t be afraid, you’ll learn what all of these are, and what they do throughout this series of tutorials. The one we’ll use for now is Templates. If you click the small arrow next to Templates, it should open and you’ll see one little file underneath it called ‘BaseTemplate’. This is the simple template that you’re provided with when you download MODx Revolution.

As the name suggests, templates provide your site with structure. You can apply a different template for every single page on your site if you wish, or, more likely, you’ll have just a few different templates ensuring that your site has the same look and feel throughout.
If you look at the code in the template, inside the title tag you’ll see an odd looking piece of code that looks something like [[++site_name]]. Yep, you guessed it, this is your Site Name! That specific syntax ([[++something_or_other]]) is used for MODx system settings. More about that later.



Installing Add-ons
So I think so far we’ve established that MODx Revolution is incredibly cool. Well, we’re just getting started, so be prepared for way more coolness. We can raise the cool factor tenfold by installing add-ons for our site.

Add-ons help us to perform tasks within MODx that make it much more dynamic. There are lots of different add-ons, way too many to go into, and the amount is growing on a daily basis. In MODx Evolution, some of the more popular add-ons were pre-installed, and to get others, you had to go to the MODx website, download the files, upload them to your site via FTP or copy and paste the code into a new snippet. Either way, it wasn’t ideal, and this has been addressed in MODx Revolution, where you can download and install add-ons within the manager. Brilliance!

One add-on that you’re likely to want to install (especially if you’re going to be handing the site over to somebody not code-savvy at some point) is TinyMCE. TinyMCE is a rich text editor, meaning we don’t have to delve through the code to add paragraphs, headings, images etc.

So, hover over ‘System’, and then select ‘Package Management’ (catchy eh?!).



You’ll see two buttons, one called ‘Add new package’ and the other called ‘Download Extras’.



Click on ‘Download Extras’, and you’ll see a dialog screen. This is another place that you’ll become very familiar with if you’re building MODx sites with some degree of complexity, so before we download anything, feel free to have a little look around to see what’s on offer.



There are a series of different categories on the left. A nice little explanation of these is given for each of these on the Codingpad, but for those too lazy to click a link, it is as follows:

• MODx Addons – these are functional bits and pieces that are not part of the MODx core, such as galleries, menu builders, tagging snippets, etc. They do not change the core but simply add functionality.
• Core Extensions – These are additions to the core itself that change how MODx works. They affect how parts of the core work.
• FrontEnd Templates – These are ready made templates that are packaged for an easy install and setup. If you don’t want to build/port your own template you can grab one of these and play with them, use them as they are, or modify them to suit your needs.
• Manager Templates – These are backend templates to change the look of your manager. These will affect just the look, not the functioning, of your manager.
• Site Packages – These are prebuilt complete sites that you can install and explore. This is great if you just want to demo MODx and see how it works. A prebuilt site like this can also be a great learning tool as you can explore the backend and learn how different things are implemented.

You’ll probably find yourself within the MODx Add-ons category most often (I do anyway), and thats where we’re going now.



By clicking the small arrow next to ‘MODx Add-ons’, you’ll see the categories within it drop down. Select ‘Rich Text Editors’ from the list, and you’ll see the items on the right change. The one we want is TinyMCE, so click on the ‘Download’ button that corresponds with it, wait until that button changes to read ‘Downloaded’ and then click ‘Finish’ in the bottom left.



You’ll now see that TinyMCE has been listed, ready to be installed! Click on the install button, follow through the steps shown, and then you’re done.



If you go to the ‘Resources’ tab in the box on the left (next to ‘Elements’) and click on your ‘home’ resource, you’ll see that you’ve got a nice text editor thats been added to your main content area. Thats TinyMCE!



I think that’ll do for now. In the next post, we’ll go through templating, creating some pages for your site, and possibly investigate some of the other add-ons that are available.

If you have any comments about this tutorial, useful additions, corrections or whatever, please leave a comment.

Thank for reading!

How to ... add a Twitter Feed to your Website

Yup, it's that time of the week again. Doesn't time fly?

This week I'll show you how to display your Tweets (or Twitter Feed) on your website or Blogger Blog using the Twitter Widget. This post does assume that you have a Twitter account and are using the 'new' version of Twitter, and have a website or blog to add it too!

1. First of all log in to your Twitter account, then click on your Twitter name in the top bar (highlighted by the pink arrow below) to access the menu & choose 'Settings'.

Screen shot from http://www.twitter.com/picseli on 14th January 2011

2. On the 'Settings' page click the 'Profile' tab and under where you can add a web address, you should see a message that says '(You can also add Twitter to your site here)', check out the pink arrow in the picture below, and click it - the link, not the pink arrow:

Screen shot from http://www.twitter.com/picseli on 14th January 2011

3. You'll then see a screen asking you to 'Select Your Widget'....

Screen shot from http://www.twitter.com/picseli on 14th January 2011

4. Choose 'My Website' and you'll get the following options:

Screen shot from http://www.twitter.com/picseli on 14th January 2011

Twitter explains pretty well what they do, so I won't go into that. To display your tweets click on the first option 'Profile Widget'.

5. On the next screen, on the right hand side, you'll see an example of how your feed will look. As you make chenges this will change so you can see exactly what you'll get. Check your username and if you are happy with what you've got, click the 'Finish & Grab Code' button and head to Step 9 below.

Screen shot from http://www.twitter.com/picseli on 14th January 2011

6. On the Preferences screen you can change how many tweets are displayed, how they are loaded etc. For every change you make, click the 'Test settings' button to view the changes. In the screen shot below I have:

• Ticked 'Poll for new results?'- This means that the feed will be updated in real time, so when you tweet, the latest tweet is displayed without having to reload the page.
  
• Ticked 'Include scrollbar?' - This means that if the space needed to display the twitter feed is longer than the box a scrollbar will be added.
  
• Upped number of Tweets to be displayed to 10.
• Ticked 'Show hashtags?' - if this is unticked it won't display any text that is preceeded with a #, so in the case of the #facebook tweet above, you wouldn't get the full meaning of the tweet.
• Ticked 'Show avatars?' - to display people's images by their tweets.
  

Screen shot from http://www.twitter.com/picseli on 14th January 2011

The settings I haven't mentioned are:

• Timed Interval - which will display tweets one at a time, rather than loading them all at the start.
• 'Show Timestamps?' - which displays the timings of the tweets.
  

When you are happy with your settings, click on the Appearance tab on the left hand side.

7. On this screen you can change the colours of the widget to match your website, so play around and find the colours that suit. Here we've updated it to better match Picseli's colours:

Screen shot from http://www.twitter.com/picseli on 14th January 2011

Click on the text box or coloured square you want to update and use the colour picker, or if you have a corporate brand and access to the Hex codes you need to use, you can simply enter these. You'll notice your demo widget updates as you change colours, no need to click the 'Test settings' button.

When you're done, click on the Dimensions tab.

8. Here you can resize the widget to fit the space you need. This can be a bit tricky and may require a bit of trial and error to get it spot on, however, the auto-width option can be very handy here! Tick this option to have your widget fill the space available. Unfortunately, as it says, you can't test your size settings here.

Screen shot from http://www.twitter.com/picseli on 14th January 2011

9. When you are happy with your widget, click on the 'Finish & Grab Code' button. Here you'll be taken to a page with your HTML code (or, if you want to add your feed to Blogger, a handy 'Add to Blogger' button.)

Screen shot from http://www.twitter.com/picseli on 14th January 2011

If you know what to do with HTML, copy the code and do with it what you will!

If you don't, copy the code and send it to your friendly web developer and ask them to install it for you.

If you want to add it to a blogger site click on the 'Add to Blogger' button.....

10. You will be directed to the Blogger website, where you will be asked to login (if you aren't already) and then asked to select a blog and enter a title for your widget.

Screen shot from http://www.blogger.com on 14th January 2011

(If you click the 'Edit Content' link, you'll see the HTML code thats been passed from Twitter to Blogger.)

Click 'Add Widget' and Twitter will be added to your blog.

If you look towards the bottom of this blog in the right hand bar, you'll see Picseli's Twitter Widget!

Good luck & have a great weekend!