2 minutes to a more beautiful business Facebook page
Your Facebook page might be ugly. It is probably littered with random links with seemingly unrelated thumbnails. You can and should fix it. It only takes 2 minutes so keep reading to take the ugly out of your Facebook page.
Why I use custom Facebook link thumbnails
When you post a blog post link to Facebook you are usually presented with several options for the link thumbnail. These include the images from your blog post as well as your logo and other images on the page. Usually this works fine but sometimes the images are just not suited for use as a thumbnail.
For instance, I format my blog images so that two vertical images are side by side. I do this in Photoshop so the images I upload are either full horizontal images or a composite of two vertical images.
This works out great for my blog but makes for small link thumbnails when I post the link to Facebook.
A while back I published a post about how to customize your Facebook link thumbnails. The problem with this method is that you are limited to one specific thumbnail for every post on your site.
I have a new method. We are going to use WordPress’ built in featured image tool to customize our business Facebook page by taking control of our link thumbnails.
Note: This will only work if your blog theme supports featured images.
Creating your Facebook Link Thumbnail Image
You will first need to choose the image to use for your thumbnail.
As it turns out, all Facebook link thumbnails are not created equal.
Facebook has limited the thumbnail space to 90px X 90px. All vertical or horizontal images will be reduced to 90px at their longest point. Meaning that your image will use less than the space allotted for your link thumbnail.
In order to optimize your image, you will want to crop it to a square ratio before uploading. The size doesn’t really matter, as long as it is over 90px X 90px.
Be sure to use an image that will still look good at such a small size. You will also want to be sure that it is a good representation of the post.
The image won’t show up anywhere else so you don’t have to use one of the images you have already posted. I think it is fun to use a detail shot from the shoot/wedding to give a feel for the style of the photos.
When inside the post editor, choose set featured image from the featured image module in the post editor sidebar.
The uploading tool will open just as it would for uploading an image to insert in your post. Follow the prompts to upload your image.
Once the image has been uploaded, you will need to look under the sizing options and choose Use as featured image.
Click save all changes and be sure to update the post or publish if it isn’t already published.
Tell Facebook where to look
Now that your featured image is set you will need to tell Facebook that it should use it for your thumbnails.
In your WordPress menu, go to Appearance -> Editor. In the right side you will see a list of the various pages and parts of your WordPress theme. Click on the Header file to open it for editing.
Between the <head>...</head> tags copy and paste the following code.
<?php if(is_single()) { ?> <?php // Featured Image for FB Like $feature_image = get_the_post_thumbnail($post->ID); // Get image source $doc = new DOMDocument(); $doc->loadHTML($feature_image); $imageTags = $doc->getElementsByTagName('img'); foreach($imageTags as $tag) { $image_url = $tag->getAttribute('src'); } ?> <link rel="image_src" href="<?php echo $image_url; ?>" /> <?php } ?>
Click Update File to save your changes.
Test your new Facebook Link Image
Now you can go to Facebook and post the link to your blog post using your newly customized link thumbnail. Bring on the pretty!
Extra Credit: Add a call to action text layer to your link image in Photoshop. Tell your users to “Click Here”. It just might get you a few more clicks.
Want more help with Facebook? Check out my guest post over at Zach Prez’s Photography Web Marketing on optimizing the new Facebook layout for your business. Check out Zach’s Photography Web Marketing Guide for more help with online marketing.
Here you can see how it works! I build it using PHP + jQuery. The source code is available to download. Hope you enjoy! http://lab.leocardz.com/facebook-link-preview-php--jquery/
Any mod for this to work on any php page? I get the error "Fatal error: Call to undefined function is_single() in /hermes/... ... on line 109", any idea?
Just discovered your post after reading another blog - always love reading information relating to photography. Thanks for sharing.
Thanks for visiting Kathie. Glad to have you! Let me know if you have any questions or need help with anything.
[...] Are your Facebook links sexy? March 10, 2010 2 Comments by Bethany Gilbert This technique creates a single Facebook thumbnail for every link on your site. Check out the updated technique that allows custom Facebook thumbnails for individual posts [...]
[...] I decided to try a little tip I found here so that I can set an image to be the Featured Image of a particular post and it will be recognized [...]