I just discovered BM Shots, an awesome WordPress Plugin that grabs screenshots from sites and makes thumbnails out of them. It’s my new favorite plugin.
Here it is doing its thing to the Yahoo! homepage:
In order to achieve the thumbnail, all I have to do is put [browsershot url="http://www.yahoo.com" width="450"] in my post.
Read how the plugin got started, by Ben Gillbanks.
UPDATE (1-23-13): It looks like there’s a WordPress Plugin that has this same functionality. I haven’t installed it, but it’s out there for those who use WordPress: Pinterest Pin It Button for Images PluginUPDATE (8-13-12): AddThis has recently added this feature to their toolbar. Since things are likely to change in the future and AddThis is more likely to keep things up-to-date, I would recommend using their toolbar. If you still want to just do it yourself, continue reading.
Here’s what it might look like.
When MAF decided to explore Pinterest as another opportunity to spread awareness and increase social engagement, I thought it would be cool to be able to add a ‘Pin It’ button to each of the images on the site. This would give pinners an easy way to pin things to their boards from the MAF site.
To see it in action, click the demo button above.
Since I love open source and I want to contribute, I thought I’d share what I came up with to accomplish this.
So, without further jibber jabber, here’s the code (with comments):
First, you need to load jQuery between the <head> and </head> tags:
<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
This is the Pinterest graphic that I used, but feel free to use whatever you want:
Also between the <head> and </head> tags or in your stylesheet, put these styles:
Download the Plugin<style type="text/css">
.pinned {
position: absolute;
}
.pinned .pin {
opacity:.5;
position: absolute;
}
.pinned .pin:hover {
opacity:1;
}
.pinned .pin:active {
opacity: .7;
}
</style>
Just before the </body> tag, place this:
<script type="text/javascript">
$(document).ready(function() {
/* surround each image (inside the
wrapper div) with span class='pinned.' You may want to
only do this for images inside a certain div; in that
case, change this to:
$('#ID-OF-DIV img').each(function() {*/
$('img').each(function() {
/* SET THE MINIMUM HEIGHT AND WIDTH OF IMAGES THAT
SHOULD INCLUDE A 'PIN IT' BUTTON AND WRAP THEM
WITH SPAN.PINNED: */
if ($(this).height() >= 175 && $(this).width() >= 175) {
$(this).wrap("<span class='pinned' />");
}
});
// grab each image div with class of .pinned
var each_image = $('span.pinned');
// iterate through all .pinned spans after the page loads
window.onload = function() {
$('span.pinned').each(function() {
//get the image's width and height and set .pinned's width and height
var pinned_width = $(this).find('img').width();
var pinned_height = $(this).find('img').height();
$(this).css('width',pinned_width);
$(this).css('height',pinned_height);
$(this).append('<span class="pin"><a href="" count-layout="vertical"><img src="/IMAGEPATH/pin-it-button.gif" /></a></span>');
/******POSITION THE PIN IT BUTTON (DEFAULT IS TOP LEFT)******/
//UNCOMMENT THIS FOR TOP RIGHT:
/*$('.pin').css('margin-left',pinned_width-($('.pin img').width()));*/
//UNCOMMENT THIS FOR BOTTOM RIGHT:
/*$('.pin').css('margin-left',pinned_width-($('.pin img').width()));
$('.pin').css('margin-top',pinned_height-($('.pin img').height()));*/
//UNCOMMENT THIS FOR BOTTOM LEFT
/*$('.pin').css('margin-top',pinned_height-($('.pin img').height()));*/
// cache 'this'
var $this = $(this),
// grab image src
image_source = $this.find('img').attr('src'),
// grab current page title
web_title = $(location).attr('href'),
image_height = $this.find('.pinned').height(),
// grab img alt text
description = $this.find('img').attr('alt'),
// find the Pinterest link
slug = $this.find('a.pin-it-button');
if (image_source.indexOf(".com") == -1) {
image_source = window.location.protocol + "//" + window.location.host + image_source;
}
// modify Pinterest href with new image details
slug.attr('href', 'http://pinterest.com/pin/create/button/?url=' + web_title + '&media=' + image_source + '&description=' + description + '');
var isAligned = $(this).find('img').attr("align");
//if the img is aligned left, also float .pinned to the left
if (isAligned == "left") {
$(this).css('float','left');
$(this).find('img').css('margin-right','0px');
}
//if the img is aligned right, also float .pinned to the right
else if (isAligned == "right") {
$(this).css('float','right');
$('.pin-it-button').css('margin-left',pinned_width);
}
});
});
/****end pin it button****/
</script>
If you ‘get it,’ then here’s the code with minimal comments:
<script type="text/javascript">
$(document).ready( function($) {
$('section article img').each(function() {
if ($(this).height() >= 150 && $(this).width() >= 150) {
$(this).wrap("<span class='pinned' />");
}
});
window.onload = function() {
$('span.pinned').each(function() {
var pinned_width = $(this).find('img:last').width();
var pinned_height = $(this).find('img:last').height();
$(this).css('width',pinned_width);
$(this).css('height',pinned_height);
$(this).prepend('<span class="pin"><a href="" count-layout="vertical"><img src="/wp-content/themes/H5/images/pin-it.png" /></a></span>');
//UNCOMMENT THIS FOR TOP RIGHT:
/*$('.pin').css('margin-left',pinned_width-($('.pin img').width()));*/
//UNCOMMENT THIS FOR BOTTOM RIGHT:
$('.pin').css('margin-left',pinned_width-($('.pin:last img').width()));
$('.pin').css('margin-top',pinned_height-($('.pin:last img').height()));
//UNCOMMENT THIS FOR BOTTOM LEFT
/*$('.pin').css('margin-top',pinned_height-($('.pin img').height()));*/
var image_source = $(this).find('img:last').attr('src');
var web_title = $(location).attr('href');
var image_height = $(this).find('.pinned').height();
var description = ""+$(this).find('img:last').attr('alt');
var pinLink = 'http://pinterest.com/pin/create/button/?url=' + web_title + '&media=' + image_source + '&description=' + description + '';
$(this).find('.pin a').attr('onload','javascript: window.load('+pinLink+')');
$(this).find('.pin a').attr('href', pinLink);
var isAligned = $(this).find('img:last').attr("align");
if (isAligned == "left") {
$(this).css('float','left');
$(this).find('img').css('margin-right','0px');
}
else if (isAligned == "right") {
$(this).css('float','right');
$('.pin-it-button').css('margin-left',pinned_width);
}
});
}
});
</script>
I know there are many out there who are much more skilled in jQuery, so if you have any suggestions or changes, leave a comment. The more useful, the better.
So it’s getting around the Web quite a bit lately that Outlook 2007 and 2010 no longer render HTML emails properly. 
The biggest issue relates to background images. At MAF (www.maf.org) where I work, I create the marketing emails that go out. I only realized this issue about a month ago because I was using Microsoft Entourage 2004 (Outlook for Mac) and it works fine. I have since installed Outlook ’07 for testing purposes and have had a major headache getting it to render the emails properly.
As I usually do, I asked Google to help me solve the problem and I eventually found this post by Brian Thies on the Campaign Monitor forum: http://www.campaignmonitor.com/forums/viewtopic.php?id=3862. I tried his suggestion and it worked great!
Since I found something that might be useful for someone else, I wanted to post the link here, just in case it could help someone else.