Added 1 new A* page:Like a lot of people, I post my latest pages on Facebook so people who follow my work there will be notified of an update; Facebook is supposed to scan the URL you paste into its "Share..." text box and convert that into a nice handy link with your page's title and even a little thumbnail image of a graphic from the linked page; this is particularly handy for comics because it shows readers that there's some new artwork they can check out by clicking the link.
Facebook, however, is a fitful beast, and when left to its own devices does not always accomplish its thumbnail conjuring correctly: sometimes it won't come up with any thumbnail, and sometimes it will come up with a thumbnail of nearly every graphic on the page *except* the comic image itself.
It was on a particularly persistent tear of doing that to me lately, so I finally got fed up and looked around to see if there was a way to put Facebook's thumbnails to the screw. Fortunately, there are several ways, all, as it turns out, invented by Facebook themselves.
The theoretically nearly ideal one is the Open Graph protocol, a system of HTML header tags for specifying stuff, including thumbnail parameters; Facebook came up with this and then made it public domain, so it is now also used by other social networking sites, such as Google+ and tumblr. It's a pretty straightforward syntax, and you can find out all you need to know about it in clear and surprisingly concise detail on the Open Graph page. Technically, all you need to do is add one line to the HTML header of the web page you want thumbnailed, and that is the "og:image" meta property. For instance, if I wanted a particular comic graphic (https://smbhax.com/ep/0019/d/0025.png)
from a particular page (https://smbhax.com/?e=0019&d=0025) thumbnailed when I pasted the page URL into Facebook's "Share..." box, I'd just need to add this to my page's header
<meta property="og:image" content="https://smbhax.com/ep/0019/d/0025.png">
and Facebook should make a nice little thumbnail out of the comic image.
Well, it doesn't always work. If you go to Facebook's Debugger (which used to be called by the very odd name of "Linter") and punch your page URL in there, it may give you some funny error message like "Provided og:image is not big enough. Please use an image that's at least 200x200 px" when you know darn well your image is bigger than 200x200 pixels.
This seems to be some kind of caching problem on Facebook's end--it hasn't loaded the image correctly, or something. Fortunately, when you plug a page URL into their Debugger, it forces Facebook to re-cache the page; so, if you now go back to your Facebook status page and plug the URL into the "Share..." box, it just might make the correct thumbnail for you! Voila, mission complete. That might even help you out without having to use an "og:image" header tag at all--worth a shot, anyway!
Now, the Open Graph protocol has some additional parameters you can use that may make Facebook's caching a little more reliable so you don't have to bop their Debugger over the head--or perhaps I'm just imagining it. Anyway, you can give the dimensions of the image you want thumbnailed (the one you used for "og:image") with a few additional header lines: "og:image:width" and "og:image:height," like this (being sure to use the actual correct pixel sizes for your image):
<meta property="og:image:width" content="956">
<meta property="og:image:height" content="475">
That might help; then again, it may not; I've come across various arcane theories about this, such as that you should make your image's dimensions over 1500 pixels, that they should be rounded to multiples of 100, and that they should be perfectly square; I don't know about all that; I DO know that I'm not going to resize my thumbnails just to try to hack around weird Facebook problems, and that giving Facebook fake rounded dimension numbers has no discernible effect one way or another.
Now, if you want to get a little fancy, note that you can use any online image for your "og:image" thumbnail--it doesn't necessarily have to be one that appears on the page you're generating the thumbnail for. For instance, I have high-definition versions of all my comic pages, so I could use the URL for the high-res version of the comic page as "og:image"--and set the "width" and "height" lines to match--if those matter--and then Facebook would generate an imperceptibly higher quality thumbnail for the page because it would have more sample image data to work from.
A little more usefully, you can specify an image that is, say, zoomed in on some particularly interesting part of the comic page image to which you're linking; not only will a detail be much more legible at thumbnail size, but this way you can focus on the most eye-catching part to grab people skimming through their Facebook feed, and you can avoid spoiling some part of the page in miniscule thumbnail size. I've actually been generating thumbnails along those lines for tumblr (since making a "Photo" post on tumblr and then adding a link to the custom thumbnail image you've made in effect lets you post a giant thumbnail, rather than a small one with their ugly auto-formatted text link that their "Link" post type makes), so I figured since I have them, I might as well use them for Facebook and Google Plus as well by specifying them with the og:image header tags. So for this example page, I have this giant custom thumbnail I made in Photoshop
and to get Facebook and the other services to use it as the thumbnail when linking to the page, I use these lines in my page header:
<meta property="og:image" content="https://smbhax.com/ep/0019/t/0025.png">
<meta property="og:image:width" content="500">
<meta property="og:image:height" content="400">
which tells the sites to use that customized giant thumbnail image as the source for the small thumbnails they'll generate when linking to the page, like so from Facebook:
Super fancy! But don't lose that link to Facebook's Debugger because you will probably still need it once in a while to get Facebook to double-check your page for the correct thumbnail to use.
|
