UBB.threads Twitter Custom Island

It seems as if Twitter is the rage nowadays, so it is at least logical to have the option of a UBB.threads Custom Island to display your latest tweets.

Let’s do one!

This tutorial will assume you know your way around the Admin control panel for UBB.threads, but if you don’t, go the [ this ] article and look at the pictures ;)

It should tell you what you need to know.

First things first: Know your Twitter username.

Now paste this code into one of your Custom Islands:

# Author: SD
# Website: https://sirdude.com
# Description:
#   Fetches a twitter feed via their .js library
# Version: 1.1
# Dependencies: Twitter .js API

$body = <<<EOF
<center>
	<script src="http://widgets.twimg.com/j/2/widget.js"></script>
	<script>
		new TWTR.Widget({
			version: 2,
			type: 'profile',
			rpp: 8,
			interval: 6000,
			width: 280,
			height: 400,
			theme: {
				shell: {
					background: '#FEFEFE',
					color: '#000000'
				},
				tweets: {
					background: '#FAFAFA',
					color: '#000000',
					links: '#ff0000'
				}
			},
			features: {
				scrollbar: false,
				loop: false,
				live: false,
				hashtags: true,
				timestamp: true,
				avatars: false,
				behavior: 'all'
			}
		}).render().setUser('Sirdude').start();
	</script>
</center>
EOF;

Lines of interest that you want to change:

• Line 17 to specify the width in pixels of the Twitter insert within your Custom Island
• Line 18 for the desired height in pixels
• Line 21 wants to probably match the background color (leftalt-1 or rightalt-1) of your style’s container
• Line 22 would be the text color
• Lines 25 thru 27 are for individual tweets and their links
• and finally Line 39 needs to replace ‘Sirdude’ with your Twitter name

Also, if you want a nicer looking title with an icon, paste the following into the ‘Name’ of the Custom Island:

<h3><a href="http://twitter.com/Sirdude" title="Follow me"><img src="https://sirdude.com/forum/styles/images/wp-portal/ico-twitter.png" alt="RSS" / ></a> <a href="http://twitter.com/Sirdude">Tweet!</a></h3>

You will probably want to change the following things:

• The img URL would probably be to your ‘styles/images/stylename’ directory and you can find a nice looking icon around the web for it or steal mine!
• Change the URL of the feed and you’re done

That’s about it and here’s what mine looks like:

The llama approves :llama: