Twitter: Embed Tweets in Your Blog or Website

Today I discovered Blackbird Pie, by way of a post on Noscope.

Blackbird Pie is a tool provided by the Twitter Media team that allows you to embed tweets directly in your blog posts or any website really. Here’s a good description of Blackbird Pie from a post at media.twitter.com:

The origin of the script is both self- and user-centered. Mostly, we just think it’s a pain to take screen grabs of tweets. But of course we also think it’s a much better user experience to have @-mentions, hashtags and the account itself all linked and clickable.

[blackbirdpie url=”http://twitter.com/#!/tlongren/statuses/13741976795″]
The tweet above is an example of what Blackbird Pie does, definately much better than having to take a screenshot and post the tweet that way. All you have to do is provide the URL to the tweet and Blackbird Pie will spit out code for you to post in your blog or website. Now you can actually link directly to the tweet and the tweets author, and have the tweets content visible to search engines, something not possible with screenshots alone. Hashtags and @ mentions are also linked.

It’s a neat tool, sure to be of use to folks who like to embed tweets in their site. Blackbird Pie is a way better option for embedding tweets compared to simply taking screenshots of tweets.

UPDATE 11/22/2010: A WordPress plugin for Blackbird Pie has been released. Check it out if you were using Blackbird Pie manually before. I’ve used the Blackbird Pie plugin to embed the tweet below:
[blackbirdpie url=”http://twitter.com/#!/tlongren/status/6171103173025792″]

0

Twee60: Automatic Xbox Live To Twitter

Twee60 is a web based application that tweets your status on Xbox Live to your Twitter account. The nice thing about Twee60 is there’s no software to install, unlike the Xbox Live to Twitter application I wrote about previously.
[ad]
Don’t get me wrong, Martin’s Xbox Live to Twitter app does a very nice job and offers many more customization options than Twee60. Twee60 is ideal for me though because it doesn’t require any software to be installed.

Twee60 is especially nice for Linux or Mac users who don’t even have a software package they could install to tweet their Xbox Live status. I installed a Windows box at home just so I could run Martin’s Xbox Live to Twitter app. Now that I have Twee60, I can take that box down.
[ad]
There’s only a few options you need to set in Twee60 before it’s ready to tweet your Xbox Live status. All you’ll need is your gamertag, twitter e-mail, twitter password, and zip code. Xbox Live members who are also Twitter users should check it out and register an account.

0

Xbox Live To Twitter

Duncan Mackenzie released an application in May of 2007 that checks your Xbox Live status and sends your status to Twitter so all your followers on Twitter can see what you’re playing on your Xbox 360.

A short while after the initial release, Microsoft made some changes to Xbox Live that broke Duncan’s software, so he came out with an update. Then, a short while later, both Xbox Live and Twitter made some changes which totally broke Duncan’s software. It hasn’t worked since those updates were made.

Since then, I’ve been looking for something similar every few weeks or so. The other day, I set out to find a replacement for Duncan’s software and I came across Martin Hinshelwood’s blog.

Martin has picked up where Duncan left off with his Xbox Live to Twitter application. Martin was having trouble getting Duncan’s software to work, so he just wrote his own. I’ve been using Martin’s Xbox Live to Twitter app for a few days now and haven’t had any problems with it. It’s been posting my Xbox Live status to Twitter like mad.

If you use Twitter and have Xbox Live, you should give Xbox Live to Twitter a try. You can download the Windows installer or the source code at the CodePlex.

0

TwitThis Plugin For WordPress

TwitThis is cool. The TwitThis plugin adds a “TwitThis” badge for each post on your WordPress site. TwitThis doesn’t send tweets when you’re writing a new post or editing an existing post like the Twitter Updater plugin. TwitThis makes it easy for your readers to let the world know they’re reading one of your posts or performing some other action on your site.

TwitThis is an easy way for people to send Twitter messages about your
blog post or website. When visitors to your website click on the
TwitThis button or link, it takes the URL of the webpage and creates a
shorter URL using TinyURL. Then visitors can send this shortened URL
and a description of the web page to all of their friends on Twitter

If you don’t use WordPress, you can still make use of TwitThis. There’s a simple piece of javascript code you can insert on your page to get a TwitThis badge for non-WordPress websites. Head over to the TwitThis website for more information.

You can see TwitThis in action right here at longren.org. The TwitThis badge should be immediately below the Share This badge.

0

Twitter: Show Your Latest Entry On Your Blog

Want to show your latest entry to Twitter on your WordPress blog or website? It’s really very simple. Don’t be scared off by the vague instructions for adding a badge at the Twitter Badge page. The Twitter Badge page has some Flash badges at the very top and some javascript badges immediately below the Flash badges.

We’re mostly interested in the javascript badges. I don’t give two shits about Flash and refuse to add something to this site that will cause unnecessary lag just because it’s “pretty”. I’m a pretty devout follower of the K.I.S.S. philosophy. And besides, all we’re covering here is how to show your latest Twitter entry, pretty basic. Take a look below to see how I display “My Latest Twitter” in my sidebar.

1. Open your themes sidebar.php file (probably in /wp-content/themes/theme_name/).

2. Determine where you would like your Recent Twitter Status to appear in your sidebar.

3. Copy the following code and paste it into sidebar.php in the location you chose in step 2.

<div class="sb-lasttwitter">
<h2><a href="http://twitter.com/<em>yourTwitterUsername</em>/"><?php _e('My Latest Twitter'); ?></a></h2>
<ul><li>
### insert javascript for Twitter Badge here ###
</li></ul>
</div>

4. Open your themes style.css file and add a class called sb-lasttwitter. You can expand on the styling for the sb-lasttwitter class all you want. The CSS I use is below, it should work for most people as-is.

/*- most recent twitter*/
.sb-lasttwitter ul li {
	list-style-type: none;
	}

5. After adding the sb-lasttwitter CSS class, save your style.css file and upload the newly modified file to your website.

6. Login to your Twitter account and click the “Badge” link at the top.

7. Click the first javascript badge, it should automatically select all of the code when you click on it. Copy the selected javascript code to your clipboard (right-click and copy).

8. After you’ve copied the badge javascript, go back to sidebar.php and find the line that reads: ### insert javascript for Twitter Badge here ###. Replace that line with the javascript you copied from step 7.

9. Save sidebar.php and upload it to your website, it goes in the same directory you uploaded style.css to.

10. Done! Visit your blog to (hopefully) see your latest twitter in the sidebar.

Once you’re done with that you should see “My Latest Twitter” in your sidebar. Immediately below that text you should see your most recent Twitter and how long ago it was entered.

You should also note that the code from step 2 may not work for every WordPress theme, in fact, it probably won’t. However, you should be able to make a few simple changes to make it fit perfectly with your blog’s theme. My point is, you may have to modify that code (and the CSS) to make this show properly with the rest of your blog theme.

Please be aware that the Twitter javascript badge breaks XHTML 1.0 Transitional validation. Fortunately, it’s an easy fix to get pages including the Twitter javascript badge to validate again. Remember, this is the javascript we copied in step 7.

Anyway, to make it pass XHTML 1.0 Transitional validation, have a look at the very last line of the javascript, towards the end of the line, should look similar to this:

?callback=twitterCallback&count=1"></script> 

Replace the text above with the following text:

?callback=twitterCallback&amp;count=1"></script>

Modifying the last line of the javascript as described above will make your site/blog pass XHTML 1.0 Transitional validation, assuming nothing else in your site is broken. WDG has some good information on why this change will help your site pass validation.

If you have any problems with this, please let me know! I will try to help people as much as I can, no promises though. If there’s enough interest, I may end up throwing together a very simple wordpress plugin to do all this automatically. It would seem the only Twitter WordPress plugins currently available require the WordPress Widgets plugin, which I don’t use. I just want a simple plugin to include the basic javascript badge without the need for Widgets. If nothing pops up within the next few weeks I’ll probably get to work on a plugin of my own.

There are two full featured Twitter WordPress plugins currently in development, both should be fantastic. The first plugin is Twitter Tools from Alex King. Twitter Tools aims to provide full integration between Twitter and WordPress. The second plugin in development is Twitt-Twoo from Dean J. Robinson. Twitt-Twoo isn’t aiming to be a full integration plugin like Twitter Tools. Twitt-Twoo is much more basic, although I believe it will allow you to post to twitter right from the sidebar of your blog, provided you’re logged in. I’m not sure if that functionality will be included in Twitter Tools as well or not.

0