TwitPic Image Previews for Twitter Posts on my WordPress widget.

I was looking for a way to incorporate my Twitter tweets into my blog in a way that the TwitPic.com photos are displayed as images on my blogs instead of links. I looked over a ton of plugins and even installed a few.

In disappointment at finding nothing useful ‘out there’, I decided to come at the problem sideways. I started to look for unobtrusive javascript scripts that would do what I wanted. Again, nothing.

But, I did find a jQuery example that does something similar. It will create an image of a website’s favicon as part of the link. This is pretty cool, so I added it to my blogroll in the side menu of my site. This is also functionally what I am wanting to do, so I used this as the base for creating my TwitPic.com image linker.

The author of the CC favicon script is Andreas Lagerkvist and his work can be found at http://andreaslagerkvist.com/jquery/favicons/

I did a little bit of tweaking to his script and came up with exactly what I needed. I edited the footer file of my template to add the javascript code. If you view the source of this page, you should see something that looks a lot like:

<!-- http://andreaslagerkvist.com/jquery/favicons/ -->
<script type="text/javascript">
jQuery.fn.favicons = function (conf) {
var config = jQuery.extend({
insert: 'appendTo',
defaultIco: 'favicon.png'
}, conf);

return this.each(function () {
jQuery('a[href^="http://"]', this).each(function () {
var link = jQuery(this);
var faviconURL = link.attr('href').replace(/^(http:\/\/[^\/]+).*$/, '$1') + '/favicon.ico';
var faviconIMG = jQuery('')[config.insert](link);
var extImg = new Image();

extImg.src = faviconURL;

if (extImg.complete) {
faviconIMG.attr('src', faviconURL);
}
else {
extImg.onload = function () {
faviconIMG.attr('src', faviconURL);
};
}
});
});
};

jQuery.fn.twitpic = function (conf) {
var config = jQuery.extend({
insert: 'appendTo',
defaultIco: 'http://twitpic.com/favicon.ico'
}, conf);

return this.each(function () {
jQuery('a[href^="http://twitpic.com"]', this).each(function () {
var link = jQuery(this);
link.attr('target','_blank');
var faviconURL = 'http://twitpic.com/show/thumb' + link.attr('href').replace(/^(http:\/\/[^\/]+)(.*)$/, '$2');
var faviconIMG = jQuery('')[config.insert](link);
var extImg = new Image();

extImg.src = faviconURL;

if (extImg.complete) {
faviconIMG.attr('src', faviconURL);
}
else {
extImg.onload = function () {
faviconIMG.attr('src', faviconURL);
};
}
});
});
};

jQuery('.blogroll').favicons({insert: 'insertBefore'});
jQuery(document.body).twitpic();

</script>

So, now I have my TwitPic.com image previewer and it works anywhere on my site, whether it’s on a blog post or in a widget. I am quite happy with the results.