How to Put a Twitter Badge on a Website

When you want to share Twitter updates with your website visitors, you can add a Twitter badge directly into the sidebar of your website's home page. A Twitter badge updates in real time to show your most recent Twitter posts and conversations. You can select a Flash badge or an HTML/JavaScript badge that can be customized with CSS.

Difficulty:

Moderately Easy

Instructions

1. Log into your Twitter account. Enter your username or e-mail address, and your password into the Twitter.com home page. This will take you to your profile page on Twitter.

2. Scroll down to the "More Info URL" field. This is the fifth field from the top and allows you to add your website's URL to your profile page.

3. Select the "Add Twitter badge" feature. This is the highlighted text that reads "You can also add Twitter to your site here." Select it to be taken to the "Get a Badge for Your Site" page.

4. Select "Other" from the options listed. You will see a set of radio buttons with different badge publishing options. Selecting "Other" will give you the options for a Flash or HTML widget for a standard webpage.

5. Select the type of badge you want to embed into your website. You can choose from "Flash, Just Me" to display only your updates in Flash; "Flash, With Friends" to show all of the updates that typically show up on your Twitter profile page; or HTML/JavaScript that shows your most recent updates in a basic format.

6. Copy the code for your website. Twitter will automatically generate the code based on your selection in Step 5. You can choose to copy the embed code to place the badge anywhere on your site, or the HTML code to place it in a sidebar.

7. Open your website admin page in a new browser window. Enter your website administration section where you want to modify the script for your webpage.

8. Paste the code for your Twitter badge. Add the code to your website by pasting it directly into your sidebar or another area of your webpage.

9. Save changes and refresh your browser. Your badge will appear immediately on your website.

Tips & Warnings

• You can customize the HTML/JavaScript badge using CSS codes.

• You can select a custom color for the 'Flash, Just Me' option.

• You can customize the 'Flash, With Friends' badge to select a unique size, shape and color palette.

• The HTML/JavaScript badge will not work on MySpace.

• You have to change the colors and appearance of the badge before allowing Twitter to generate the code.

Resources

• Add a Twitter Badge