How To Add A Twitter Feed To Your Website

It is universally known that Twitter is one of the main marketing tools used by food truck owners. Having a lot of followers means a higher chance of people finding your location on the days you operate. Getting them to come out of their homes or workplace to visit your truck however is a completely different story.

To get a lot of followers, you need to make it easy to for people to know you have a Twitter feed. Most trucks will have Twitter logos positioned quite visibly on their truck graphics. But your website is also a place where people can find you on Twitter. Inserting your Twitter stream on your website is easy to do thanks to the official Twitter Widget. You can see an example of how the widget works by visiting http://minneapolisfoodtrucks.com.

Add Twitter To Food Truck Website

When you’re on the site, just click on any of the food trucks listed there and you’ll see a customized Twitter widget I’ve applied to every listing. I’ve matched the color and size to fit the area I wanted it displayed in. WordPress is the website management system I choose to work with and that makes it easy to apply the code to embed the Twitter feed.

Adding the Twitter Widget to Your Website

The Twitter Widget can be applied almost anywhere on your site but the most common areas would be the main content area like on the Minneapolis food truck example or in the sidebar. Here are step-by-step instructions for adding the Twitter Widget.

Step 1

Go to http://twitter.com/about/resources/widgets

Step 2

Click on My Website.

Add Twitter To Food Truck Website

Step 3

Now click on the Profile Widget.

Add Twitter To Food Truck Website

This will display your most recent Twitter messages on your webpage. Type in your Twitter username. For example, my profile is @startafoodtruck so I type in StartAFoodTruck in this box.

Add Twitter To Food Truck Website

Step 4

Next, click on Preferences on the left. I leave these on the default settings. You can see what the other options do by selecting them and then clicking the Test Settings button at the bottom after every change.

Add Twitter To Food Truck Website

Step 5

Now click on Appearance on the left column. Here, you can customize the colors of the widget. On the Minneapolis Food Trucks site, I matched the widget colors to the color theme of the website. I usually do this by taking a snapshot of my webpage by doing  Print Screen function. Then I paste that image into Photoshop and use the color picker to find out exactly what the color settings are for each portion of the site. I only do this because I don’t keep a list of the colors I used.

Step 6

Next, click on Dimensions on the left side of the screen. This is where you can size your widget. You can specify an exact size with pixel dimensions or use the Auto Width to have it automatically fit the space you need. Please note that sizing is the only attribute that will not change when you preview your changes with the Test Settings button but it will display correctly on your website.

Add Twitter To Food Truck Website

Step 7

Repeat any of the steps above until you get everything set the way you like.

Add Twitter To Food Truck Website

Step 8

When you’ve built the widget to your liking, simply click the Finish & Grab Code button at the bottom of the screen. Copy the HTML code shown in the new window.

Add Twitter To Food Truck Website

Installing The Twitter Widget On A WordPress Page

Log into your WordPress based website as an adminstrator.

You can now add the widget to any Page, Post or Sidebar. For installing the widget on a Page or Blog Post, simply create a new page or edit an existing page. The code needs to be pasted in the HTML editor and not the visual editor.

Add Twitter To Food Truck Website

You can tell which editor you’re in by looking at the tab at the top right of the text window.

Add Twitter To Food Truck Website

After you’ve activated the HTML tag, just paste the widget code somewhere in the text window. Then hit Save Draft, Publish or Update depending on whether you are working with a new page or an existing page.

Now you can preview the page to determine if you need any changes. Please note that this widget will only appear on the particular page that the code has been pasted on.

Installing The Twitter Widget On A WordPress Sidebar

Installing the Twitter Widget on a sidebar is almost the same as adding it to an individual page. The sidebar is one of the most popular places to install the widget. To do this, go to Appearance > Widgets.

Add Twitter To Food Truck Website

Grab a Text widget and drag it to the sidebar area of this window.

Add Twitter To Food Truck Website

Click the dropdown arrow on the right to open the box. Paste your Twitter Widget code into the bigger text box on the bottom.

Add Twitter To Food Truck Website

This box accepts regular text and HTML code. Leave the title blank. Hit Save and you’re done! Go to your website and see your Twitter feeds in your sidebar. By placing the Twitter Widget in your sidebar, it now appears on every page of your website. Kinda slick, eh?

I hope you enjoyed this tutorial. I plan to have more tutorials on WordPress in the future so you can actually learn to build your food truck website yourself and save a bit of money by not having to hire a web designer to create your website. If you found this article useful, please leave a comment below and let us know!

Tagged As: , ,

Comments are closed.