{"id":3219,"date":"2011-06-16T07:00:45","date_gmt":"2011-06-16T14:00:45","guid":{"rendered":"http:\/\/restlesspilgrim.net\/blog\/?p=3219"},"modified":"2015-03-19T14:06:22","modified_gmt":"2015-03-19T21:06:22","slug":"thumbnails-in-facebook","status":"publish","type":"post","link":"https:\/\/restlesspilgrim.net\/blog\/2011\/06\/16\/thumbnails-in-facebook\/","title":{"rendered":"Thumbnails in Facebook"},"content":{"rendered":"

As you know, I write my blog entries a while before they actually get posted. Since writing this entry I have found better ways of achieving the desired effect using WordPress Plug-ins. However, I decided to post it anyway since I think it’s still quite a neat exercise in tricking computers to do what you want… \ud83d\ude42<\/span><\/em><\/p>\n

Today is purely a technical blog for my fellow bloggers.<\/p>\n

I’ve had a problem that has been bugging me for some time. \u00a0If I post a link to a blog entry on Facebook which\u00a0contains no images, then no thumbnail image is displayed:<\/p>\n

\"\"<\/a><\/p>\n

I’ve noticed that when I don’t have a thumbnail image, the web traffic generated by people visiting my blog from Facebook seriously declines.<\/p>\n

This is particularly problematic for my “Friday Frivolity” posts. Since these entries are usually just a few lines of text and a YouTube video, they have no thumbnails when shared on Facebook.<\/p>\n

Tonight, I found a fairly simple solution to this problem…<\/p>\n

<\/p>\n

Step 1: Setup A CSS Class<\/h2>\n

First of all, you have to setup a “CSS style” in your WordPress Theme. This is done by logging into your Dashboard and clicking on “Appearance”<\/span> and then “Editor”<\/span>. A large text area is then displayed. Add the following line to the text:<\/p>\n

img.facebook { display: none; }<\/p>\n

…and then click the “Update File” button:<\/p>\n

\"\"<\/a><\/p>\n

You may need to refresh you cache at this point to make sure that your browser picks up the newly-generated CSS file (this can be a little bit fiddly and varies from browser to browser – email me<\/a> if you have problems).<\/p>\n

You then write your blog entry as usual.<\/p>\n

 <\/p>\n

Step 2: Insert the Image<\/h2>\n

Next, you want to create the image which will be used by Facebook as a thumbnail. I usually take a screenshot of the running video. I then resize it to the dimensions 90×90 pixels. Now insert this image into the blog post as you would any other image.<\/p>\n

If you published the post now, the image would be visible. So, switch to the “HTML” view in the WordPress editor and add the\u00a0“facebook”\u00a0class to the image you just inserted:<\/p>\n

<a img=”http:\/\/myblog.com\/thumbnail.png” class=”facebook”\/><\/span><\/p>\n

\"\"<\/a>Adding the “facebook” class causes the image element to be hidden when the post is viewed by your readers.\u00a0However, when Facebook<\/em> looks for a sample thumbnail, it doesn’t check the CSS… \ud83d\ude42<\/p>\n

\"\"<\/a><\/p>\n

Unfortunately, neither does the Visual Editor, so it’ll still appear there \ud83d\ude41<\/p>\n

You can’t win them all… \ud83d\ude09<\/p>\n

UPDATE: Since writing this (most posts get finished a week or two before they actually get posted), I think there is an easier way of doing this using plug-ins. Oh well, it was still a fun challenge… \ud83d\ude42<\/span><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

As you know, I write my blog entries a while before they actually get posted. Since writing this entry I have found better ways of achieving the desired effect using WordPress Plug-ins. However, I decided to post it anyway since I think it’s still quite a neat exercise in tricking computers to do what you want… \ud83d\ude42 Today is purely<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[17],"tags":[265,62,2969,264,266],"class_list":["post-3219","post","type-post","status-publish","format-standard","hentry","category-faith","tag-css","tag-facebook","tag-featured","tag-thumbnails","tag-wordpress"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/restlesspilgrim.net\/blog\/wp-json\/wp\/v2\/posts\/3219","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/restlesspilgrim.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/restlesspilgrim.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/restlesspilgrim.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/restlesspilgrim.net\/blog\/wp-json\/wp\/v2\/comments?post=3219"}],"version-history":[{"count":26,"href":"https:\/\/restlesspilgrim.net\/blog\/wp-json\/wp\/v2\/posts\/3219\/revisions"}],"predecessor-version":[{"id":56248,"href":"https:\/\/restlesspilgrim.net\/blog\/wp-json\/wp\/v2\/posts\/3219\/revisions\/56248"}],"wp:attachment":[{"href":"https:\/\/restlesspilgrim.net\/blog\/wp-json\/wp\/v2\/media?parent=3219"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/restlesspilgrim.net\/blog\/wp-json\/wp\/v2\/categories?post=3219"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/restlesspilgrim.net\/blog\/wp-json\/wp\/v2\/tags?post=3219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}