How to fix Facebook Thumbnails of blogger posts using Google image resizer web service

Ok, so bear with him for a bit as this is quite a technical issue, but I hope that it may help someone that had to go through the same frustrations as me while trying to fix the post snippets that show up when you share a post in Facebook.

For the most part, Facebook does a good job at figuring out what to show when you share a post. But for that to happen your blog/site/page need to have some specially crafted open graph tags that it can interpret. You can simply say its a way for Facebook to know what to show: the title, url, what kind of item it is, and what image to show.

Well, most of the time you'd just rely on a social sharing plugin and be done with it - but sometimes you'll want/need to to it yourself and implement it in your blogger template. It's something that I won't recommend for anyone not comfortable enough in dealing with blogger templates, but even if you are, you'll end up facing a seemingly inescapable fate. You see, there's only so much that you can do with blogger preprocessing directives, and while you'd think it would be enough to set the open graph image tag to the first image that shows up on your blogger post... there isn't any way to get it automatically in code. The second best thing you can get is the post thumbnail image.

Ok, that should take care of it... but then you'll notice it doesn't. This thumbnail image is only 72x72 pixels, and Facebook requires an image to be at least 200x200 pixels. When it isn't it will try and find a more suitable image, and more often than not, it will pick up a completely inappropriate image, like your profile photo, an ad, your banner... etc.

So, while all this could be simply avoided by Blogger providing a suitable way to return the first post image link, we're on our own and have to figure out a way to fix this.

The most simple way to do it is by simply resizing the image so it fools Facebook into accepting it, and for that we can use a useful Google web service that does just that: a url accessible image resizer!

• https://images1-focus-opensocial.googleusercontent.com/gadgets/proxy?container=focus&gadget=a&rewriteMime=image&resize_h=200&resize_w=200&url=

The links is self explanatory, you just throw your image URL in there and specify its width/height ("resize_h" and "resize_w"), and it returns you a resized image. So, you only need to apply it to your blogger open graph meta tag, and your thumbnail image can be resized to 200x200 and satisfy Facebook's requirements

[left: url resized image; right: original image (check URLs)]

There's only one last thing, due to some bug, the resulting resized images are downloaded as files with the name "p.txt" - at least on Chrome. Should you need to download it, you just need to rename it to the proper file extension (jpg/png/etc.) to sort it out.