On the CYM Facebook page you may have noticed that our links are just a little sexier than they used to be. By creating a fun little image and telling Facebook where to look, we can control which thumbnail is used with all of our links. This, hopefully, will increase your click-through rate and help your links get a little more attention.
Sound techie? It is, a little. Just follow these 4 simple steps to take control of your thumbnails!
-
Create the Image
Create an image no more than 200 pixels wide. I have found that tall (portrait) images work better as FB thumbnails than wide (horizontal) images. Facebook has a width limit so they will shrink a horizontal image down to the point where it is not really useful.
I suggest creating an image that is related to the linked page but also draws the attention of the viewer. Your link has to stand out from all of the other links and updates in the reader’s Facebook feed.
-
Upload the Image
Now, simply upload the image to your FTP server or to an image hosting site such as www.photobucket.com. -
Add the Code
This is where things go a little crazy. You will need access to the html code for every page. You can edit your html file in any text editor. (Notepad in Windows) You will need to find the “head” tags found near the top of the code directly under the beginning “html” tag. There should be some other html code in there, usually a “title” tag, “meta” tags and possibly some other “link” tags. You will put your Facebook link thumbnail tag under all of these but before the end of the “head” tag. Whew.
<head> <title>Your page's title</title> <meta>meta stuff</meta> -> -> Put below code here <- <- </head>
Before the closing head tag (bottom – with the “/”) copy and paste the following code, customized with your domain and image location (or the image’s html link from photobucket). Be sure not to delete those ” ” marks before and after the link.
<link rel="image_src" href="http://yourdomain.com/yourpicture.jpg" />After you have made these changes, save your html file and re-upload it to your server.
(If you work with Bludomain or another website service you may be able to email them this image and the html code and ask them to put it in the page for you)
-
Test it out!
Yay! You did it! … Maybe. Go to Facebook and post a link to the page you just edited to see if you were successful. If not, come back here and post a comment and we will help you through it.
As long as Facebook is correctly pulling the right thumbnail images from your blog posts you may not want to implement this on your blog. It is good to have session-specific thumbnails as far as that goes. A great application here would be your main website. If your site is HTML you can even set a different thumbnail for each page of your site!
How did it go? Need help? Post a comment!
If you enjoyed this article, you might also like...
- How to Get More Facebook Fans
- How to Batch Watermark Your Photos for Blogs or Facebook
- How to Split Posts in WordPress to Reduce Loading Times
- How to design a logo for your photography business
