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/