Menu Mobile

Twitter Widget Ready

01-Dec-2009

We've just updated our WIKI with some information on how to install a Twitter Widget into your Online Business. The instructions are below...

Steps To Embed a Twitter Widget

Step 1. Generate the code

Go to: http://twitter.com/goodies/widget_profile, enter your Twitter username and click "Test Settings" to see a live preview of the default widget.

Image:1username.png

From this page, you can also customize the behaviour of the widget, it's appearance (the background and font colors), and it's size. If you know where you're going to insert the widget, customize the colors so it matches the look and feel it's surroundings.

Image:2appearance.png

For this example, we'll customize the color scheme to match that of our site-wide template, where we'll be inserting the widget.

Step 2. Grab The Code

Once you're finished customizing, click "Finish & Grab Code" to see the code that renders the widget on your HTML page.

Image:3grabcode.png

Highlight the code then "Copy" it to your clipboard (CTRL-C)

Image:4copycode.png

Step 3. Paste The Code In Your Template

You can place the widget on any page, but for this example we'll place it in the sidebar of our Site Wide Template, so that our status updates are displayed on every page of the site.

Under Admin > Manage Site Wide Templates, select the appropriate template and switch to HTML view.

Image:5pastecode.png

Paste (CTRL-V) the copied code where you'd like the widget to be rendered.

In this example, we'll place it inside our sidebar div container so that we can control it's position using CSS.

Step 4. Save & Publish!

Save & Publish the template, then visit the front-end of your site to view the changes.

Image:6saveandpublish.png

With some knowledge of CSS, you can quickly customize the look and feel of your Twitter widget. You can also edit the variables inside the code at any point in the future, without having to re-generate the widget.

What Visitors Will See

On the front-end of your site, a profile widget will be dynamically generated and display your most recent Tweets.

Image:Twitterfrontend.png

This is a great way to spice up your static pages and keep visitors up-to-date with the latest news surrounding your business.


Comment

No Very




Captcha Image