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.

Chrome Super Sync Sports

Google never ceases to show off what you can do using "simple" web technologies. This time, it brings us a multiplayer game where up to four players can share a single browser screen as playing field, but with each one using his/her own mobile device acting as a controller. It's quite ingenious really, and you can see it in action in here: Chrome Super Sync Sports.

You just need to visit the game page in your desktop browser, choose the game and players, and then visit the same site in your mobile browsers to sync the devices with the game session.

Then, all you have to do is to gesture away like crazy so you don't end up last. :)

The first Web Page on the Internet

We might not even think twice about it: the internet and the web. Things that these day are considered to be a fundamental right for everyone, but that - like most other things - had to be invented and created by someone. And as something worth remembering, CERN is keeping the first web page ever created,  by Tim Berners-Lee in 1991 on a NeXT computer.


Well, actually it really isn't the exact first html web page, as it underwent nearly daily pages as the World Wide Web project was being developed... so, we can only see a version of it, as it was in 1992. But even so, it's amazing to see just how far the web has evolved in the last two decades. From html web pages where text was king and even images were rare... to the web we all know and love today, where sound and video have become quite common (need I say YouTube?) and the browser has become nearly an operating system capable of executing complex routines that turn it into a limitless tool.

Who can imagine how the internet would look like today if it weren't for the invention of the "web", even if it started as simple and basic as we can see on that first web page?

Facial Animation using WebGL

Here's another great "experiment" that shows us just how capable modern browsers can be and what can be achieved with HTML, Javascript - and best of all - WebGL. In this demo you tweak a 3D CGI head facial expressions as much as you want.

... Though I find this example to be impressive as it is; just imagine what this kind of technology will be able to do with a few more years of improvement and development. Do you still think it will be "impossible" to create Pixar-quality animations designed entirely within your web broser?... I wouldn't be so sure, and the proof that it will be possible one day is right here, right now! :)



http://www.chromeexperiments.com/detail/ginger-facial-rigging/

Draw a Stickman

Whether you're a graphic artist capable of drawing your own comic books or have to stick to a simple stickman figure, I can assure you'll love this Draw a Stickman just the same.  This site invites you to draw your own stickman, which will then embark in a fantastic adventure with some surprises along the way.

I won't tell you more about it so I don't spoil it for you... But be sure to give it a go and don't forget to tell me what you think in the comments. :)

... And if you right click on it, you'll see this is done without using Flash. In case you might need to convince anyone what you can currently achieve using nothing but "plain" HTML and Javascript.

SVG Edit - Javascript Vector Drawings Editor

One more example on what modern browsers can do when someone decides to put to good use all the capabilities of HTML5, Javascript, CSS, etc. If you ever wanted to try a SVG drawing editor on your browser, now you can with this SVG Edit.

What you get is a not so basic vector drawing program. One that besides allowing you to draw freehand, lines, and geometric shapes, can also fill those up using solid or gradient colors. And, in modern browsers, you can even use it to open local SVG files on your own computer. (Everything is running in your own browser, nothing is being sent to the "cloud".)

Although it's still in development, you can giv it a try: SVG Edit demo.

HTML5 Official Logo

If until now, talking about HTML5 was kind of an abstract thing... from now on we'll be able to put a face on it. Or better yet: a logo!

The World Wide Web Consortium (W3C) has decided it's time for HTML5 to have an official logo, and this is the result:

There are several different logo versions for download, and as always, you can also get free stickers or buy T-Shirts showing your love for the future of the web standards.

CSS3 Generator

If you want to start using CSS3 but have no idea where to start, this CSS3 generator might be the ideal starting point.

You just need to select whatever you're interested in, from font selection to round corners, to transitions and gradients, or anything else - and immediately see the results, together with CSS code you can simply paste to your own web site. Mastering CSS3 has never been easier.

Flash vs HTML5

Want to know who will the web battle between Flash and HTML5?

Thise Flash vs HTML5 puts both to the test, on opposite sides of a Pong playing field: Flash on one side, HTML5 on the other.

Let the games begin! :)

Zwibbler - Drawing on HTML5

Need a site where you can draw at will without any Flash plugin requirements? Check out this Zwibbler which uses nothing but HTML5 and Javascript.

Only the text rendering is done server side, but everything else is done in your browser using javascript. You can find more about it here, including how the mouse management was done using the concept of abstracted Mouse Behaviours.

Defintely worth a read and trying it out.

Mobile Web Development

With the iPhone 4 and its retina display, web designers are now forced to think about high resolution content for their web pages and web apps - if they want it to look good!

For App developers, Apple has made it quite easy to transform an existing app into a high-resolution one - you just need to provide higher-resolution artwork, and the iOS handles the rest; but for the web... things aren't quite as simple: as you can find out in this post about creating high-resolution web content.


On a similar note, when dealing with mobile browsers, it's always nice to know cache limits for Android and iPhone browsers.

Smokescreen - Flash to Javascript Converter

When someone tells us javascript can do anything... it really means everything.
How about running Flash using nothing but Javascript and HTML5?

It sounds crazy, but that's exactly what this Smokescreen does - allowing some devices (iPhone, iPad, cof cof) to finally run Flash content using nothing but regular javascript and HTML5.

Sure, there's still a lot of work to do; lots of advanced features are not implemented, and performance is still a long way off... but it doesn't mean it isn't quite an interesting project.

Besides, there was a time when the thought of having a ZX Spectrum emulator made entirely  in javascript would have sounded just as crazy. :)


Smokescreen - iPad demo #1 from Chris @ RevShockAds on Vimeo.

Nissan Leaf ditches Flash

It was under the spotlight in Apple's keynote, but if you've missed it recommend you give it a try: here's the site for the new zero-emmissions electric Nissan Leaf.
It might look just any other regular site... until you realize it doesn't use Flash! Everything is rendered in HTML5 and shows you why - in most cases - you could do very well without Flash.

Flash or no flash, this is a car I wouldn't mind driving around. :)

HTML5 e CSS3 Readiness

Curious about what browsers support what HTML5 and CSS3 features?

All you need to do is visit this useful html5readiness page.

In a single page, at a single glance, you can find which browsers support which features, allowing you to better plan for you site specifications and cross browser compatibility.

CanvasMol - 3D Chemistry

Ever wondered how some of molecules look in 3D? With this CanvasMol you can do it right in your browser windows, and you don't even need Flash as it is all done using HTML5's canvas element.

It has never been easier to see how Aspirin, caffeine, glucose, or even a Diamond, DNA, or adenovirus looks like in 3D.

(It goes without saying that you'll need an HTML5 compatible browser, of course.)

HTML 5 - a Video Introduction

Still haven't had the time to get onboard the new HTML5 bandwagon? Worry not; here's a nice intro video that will show you some of its new (and amazing) features, with nice examples to get you started:

• Web vector graphics with the Canvas tag and Scalable Vector Graphics (SVG)
• The Geolocation API
• HTML 5 Video
• The HTML 5 Database and Application Cache
• Web workers

Introduction to HTML 5 from Brad Neuberg on Vimeo.

CSS Polaroid Effect on Photos

When you first visit a web page like this one you'll be tempted to believe it's a Flash page.

There's animation when you move the mouse over the photos, with dynamic shadows and rotation, etc. But, if you look closer, you'll see it's all being done with nothing but plain old HTML and (not so plain and old) CSS.
Of course, you better be using a decent browser, as some don't properly recognize all these advanced techniques. ;)

If you want to dig a bit deeper and find out to do these CSS transition animations or just add the always cool polaroid effect to your pictures, just jump into this CSS transition tutorial and play a bit with it.

Google Browser Size

Here's one more tool every web designer will want to keep in his bookmark collection: Google's Browser Size.

This web tools allows you to quickly figure out which parts of your site are immediately visible to your visitors, and which parts require scrolliing. Best of all, there's no download involved: it's all web based. :)

Firefox 3.5 arrives on June 30

Get ready, it's nearly here: Firefox 3.5 the version that will mark the transition from the old pre-HTML5 web to a newer and more exciting internet.

Besides the mouch touted video tags, that allow us (at last) to embed a video in a web page without requiring 3rd party plugins, and local DB offline storage, there are a lot of new stuff under the hood - things you can find in the 35 days of Firefox 3.5 where you'll see examples of previously "impossible" things you couldn't do on the web.

Of course, much of it relies on the new and much improved Javascript performance. It even allows you to implement seamcarving resizing in realtime (just as an example, but... would you even consider it doing it in javascript until now?)

Or maybe you're more of a video kind of guy; how about using javascript to create a realtime pop-art video version of another video?

I've been using Firefox 3.5 RC2 for some time now, and have no big issued to point out. So, this will certainly be a  required update if you'd like to keep up with the improving web standards.

What's new in Firefox 3.5?

With Firefox 3.5 RC (release candidate) already available and indicating the final version is nearly here, it's a good time to check what new tricks this new Firefox browser has learned:



Short list:

• Even faster browsing
• Private browsing mode
• Re-opening closed tabs and windows
• HTML audio and video support - goodbye 3rd party plugins/flash for that
  
• Geolocation services
• and much more...

I'm sure this Firefox 3.5 will be a major milestone in our path to a better web.