Customizing your Facebook Promo Icon

A feature that many Facebook users take advantage of is that they post links to pages they really enjoy. When a Facebook user is on their Facebook page and they paste in a link that they like, Facebook automatically shows a small thumbnail next to that link promotion. Here is how to customize that icon.

First, the icon is going to end up being 90 x 90 in size, so it's in your best interest to make an image that takes up that full 90 x 90 space to optimize your marketing message space. So in your favorite drawing package create a blank image that is 90 x 90 and 300 pixels resolution.

Now to make an icon to represent your site. Think about making this as clear and meaningful as possible. Avoid intricate landscapes. Avoid fonts with curly parts or hard to see letters. You need this to stand out as your branding message so that people glance at it and immediately know what this site is about. You want it to be something the users come to recognize after a few views and have a desire to click on.

If you can fit your website name in there with large letters, then that would be good. If not, try to find an image that clearly presents the theme of your website. If your website is all about cats, but you ended up with an 80 character long URL, it's best to go with the cat message. Choose the cutest, clearest cat face you can find - make sure you have legal rights to the image of course! - and use that. The key is that you're aiming for instant recognition, and a clear message.

When your image is done, save it as a JPG file. I call mine facebook-link.jpg but you can call it anything you want. Put it on your website.

Now, to tell your website pages to use this image. I have a incHead.asp include file that I include into every page on my site. That way when I want to add or delete content to my header area I just change that one include file and it affects every single page on my site. If you are not using ASP or PHP or another language which allows includes, you'll have to make the following change to every page on your site.

Go into the HEAD section of your page. Into that HEAD section add the following line -

<meta property="og:image" content="http://www.yourwebsite.com/facebook-link.jpg"/>

Of course change the "yoruwebsite.com" part to point to your actual website. Make sure that this location is where your image file lives.

Load those changed pages onto your website.

To test this out, go to Facebook to your personal account. Cut and paste a link to one of your website pages as your status message. Facebook will automatically try to link to it and show an icon along with the title and description of that page. The icon which comes up should be the one you specified.

Here's my Facebook icon I use for this site:



Pros and Cons of Allowing Multiple Images
In general I highly suggest that you create one site wide image that all visitors will use when bookmarking all of your pages. That way it builds a brand recognition of your posts throughout Facebook. When people see that icon, they know it's for you, and they equate that with your high quality content. It's as if you were looking at Coke promotions. They'll always have the Coke logo. They wouldn't suddenly have a photo of a hawk, because that wouldn't help brand the Coke message nor would it be instantly recognizable by visitors as being a page having to do with Coke.

That being said, there are a few specific cases when you might want to add another image choice *in addition to* the standard default site choice you've created. Let's say you run a small site which currently nobody seems to be linking to. The only time any links show up for your website is when you yourself make posts about your new pages on your Facebook fan page. So for the moment you're really the only person using the link feature, on your own Facebook fan page, and you want each of those links to have a different image relating to its topic to draw people in. The posts are already on your Facebook fan page so the branding is already being done there.

In that case, you can use the above technique to create a link on every single page of your site to the main site image. That's the important first step. But in addition you can then ALSO add a secondary link on specific pages to help promote what those pages are about.

For example let's say you run a dogs website. You might have a series of pages on Great Danes, Rotweilers, Chihuahuas, and so on. You might be posting a link to each of these pages on your Facebook fan site and want each post to have the matching dog's photo to go with the post. Your Facebook fan site itself is already branding your main topic information. These links might be helped if each one stood out clearly with the dog it was describing.

So in that case, you would simply add a second "og:image" line beneath the first one. In the second line, set the content to point to a 90 x 90 image that matched that page's content. For example, for the Great Dane page you would hand make a 90x90 image of a Great Dane. You would save that to your website. You would then use that Great Dane image's URL in the second og:image line for that Great Dane webpage. When you went to your dogs Facebook fan page, to its status line, and added a link to the Great Dane webpage, there would now be two choices to choose from instead of just one. One would be the site-wide image. The second would be the Great Dane image.

Again, I wouldn't recommend on doing this regularly. You're losing the value of the site-wide branding. But if you're building yourself up and nobody else is yet linking to you externally, then this might be a helpful way to kick start the process.

Facebook Social Networking
Updating your Facebook Fan Page from Twitter

Social Networking Websites

Marketing your Small Business

Work from Home