How to set facebook image on like link?
By: Brendan Fitzpatrick
Wow.. what can I say, another simple technical request that took weeks to figure out… Let me start by defining exactly what this blog post will help you with…
I have a blog, a website, a pinterest account, a facebook account and several other social networking accounts for my small business (http://anniversariesbyyear.com – an anniversary gift idea site) and all I want to do is link the articles on this site to my social networks (in this example, specifically to facebook).
I consider myself an advanced HTML developer/programmer/designer but a relative newbie when it comes to HTML5 and CSS, although I can hold my ground there as well.How hard could it be to figure out how to set an image for my facebook like link? Easy, I thought.. Wrong! well, Yes simple .. Once you figure it out.
Of all the articles I read I kept seeing a single reference to Facebook’s Open Graph (og:) technology <meta property=”og:image” content=”image_to_display”/>.. Great! Simple! .. Wrong! I tried placing this tag everywhere in my site, in the header, in the <div> tags of the Like button, you name it – lot’s of hair pulling.
After about 2 months (part time, maybe 15 minutes to an hour some weeks) and I finally figure this out tonite.. I don’t know why there are no simple articles on this but here is how to make this work for your site using ordinary anchor tags:
*SIMPLY PUT THESE LINES IN YOUR HEADER TAG, THEY ARE REQUIRED (replace the OBVIOUS values [everything in CAPITAL] with yours):
<meta property=”fb:admins” content=”YOUR-FACEBOOK-ID” />
<meta property=”og:title” content=”TITLE-OF-YOUR-PAGE” />
<meta property=”og:type” content=”website” />
<meta property=”og:image” content=”http://URL-OF-YOUR-IMG” />
<meta property=”og:url” content=”http://URL-OF-LINK-THAT-IMG-WILL-LINK-BACK-TO” />
<meta property=”og:site_name” content=”SITE-NAME_HERE” />
If you don’t know what your FACEBOOK-ID is then read (courtesty of) http://www.hyperarts.com/blog/how-to-control-facebook-image-thumbnail-text-popup-dialogs/
If this works for you I’d love to hear back from you on how long it took you to find this article and how hopeful (if at all) it was.. if this article didn’t help (yet) then I’d also love to hear back from you and I’ll try to assist .. KEEP IN MIND, this is for ordinary anchor links and META tags, if you are trying to make this work via CSS or javascript then that is beyond the intent of this posting which I suspect you will figure out by google’ing further.