I’ve been tinkering around with adding Twitter streams to websites and blogs lately.
From what I’ve seen so far, adding a Twitter stream to a site is a great way to bring any website or blog to life with fresh content that is continually updated.
Plus, if you build the Twitter stream right, you can make the streaming content very targeted to match the content on your site.
See the Twitter stream I’ve added below to this article. I’m using the keyword phrases “website”, “website design”, and “wordpress”.
As you can see, this Twitter stream adds a unique dynamic to an otherwise very normal web page. I’ve also noticed that on some of my posts where I have the Twitter stream, the time on site has increased – which means, people are hanging out a little bit longer to see what people are saying on Twitter!
Here’s how to add a Twitter stream to your website or blog:
1) Login to your Twitter profile and click “Settings”. Under “settings”, you’ll see a link called (You can also add Twitter to your site here). This is located right underneath the “More info URL” box. Go ahead and click that link
2) You’ll then be taken to the “Widgets” section of your Twitter profile. The widget I’m using to add a Twitter stream is the search widget. So go ahead and click “My Website” and then select “Search Widget”.
3) Starting with the “Search Query” box – go ahead and type in a keyword that matches the content you want streaming on your website. You can use keyword phrases as well, but if you want your phrases to be matched exactly, make sure to put your phrase in quotes like this “keyword phrase”. You can also add more than one keyword or phrase, but you have use the proper tags for Twitter search with is putting the “OR” (without quotes) between your keywords or phrases – and the word OR has to be capitalized.
So an example string of keywords or phrases would look like this:
website OR “website design” OR wordpress OR “wordpress design”
4) Next, go ahead and give your Twitter stream widget a title and description. You’ll be able to see what this looks like at the right as you type.
5) Proceed next to the preferences. I’m not going to go into details here about what each of the preferences mean – I’ll reserve that for another post. The settings I use consistently for all of my streams are as follows:
6) The appearance is self explanatory. If you’ve never created a stream widget before, just play around with the colors and you’ll see what box has what affect on the look of your widget. Another thing I do here is I use photoshop to get exact hex colors. For example, if I’m creating a stream widget for the New York Yankees, I’ll open a picture of the Yankees logo in Photoshop and get the exact hex colors from the team logo to use in my stream widget.
7) Next is “dimensions” – depending on where you’re going to be embedding the code will depend on the size of the widget box. If you’re unsure as to what width to use, you can use the “auto width” option and your stream widget will expand to fit the page it’s embedded into.
8) Finally, you can “Test” your Twitter stream by hitting “Test” and when you are ready, click “Finish And Grab Code”
Adding The Code To Your Site
Now comes the cool part! Adding the stream widget code to your site requires you to simply have access to the HTML of your pages on your website or blog.
Then you just add the snippet of code to your site, publish, and you’re done!
If you did everything right, you should now have a dynamic element added to your website or blog that is updating with new Twitter updates automatically. Again, this brings new life to your web pages. And if your website is static, and there is never any new content added, then this is a great way to bring new life to your website!
Let me know if you have any questions by posting comments below, or contacting me anytime here.