Monday, July 6, 2015

Facebook for your Website: What you need to know

When a Facebook user links to your site, FB generates a preview that might not always be what you want users to see.

Here is how to control it.

IMPORTANT! Once anybody has linked to your site, FB will store a cache, and you'll have to wait 24-hours before FB will listen to any meta-tags you update the page with.

(a quick hack around this is to just create a new page, like "index2.html", or "indexFacebook.html", to use for sharing)

Put this in your page:


<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://ogp.me/ns/fb#">
 <head>
<title>Vaudeville Book</title>
<meta property="og:image" content="http://www.yourwebsite.com/vaudeville/img0.jpg" />
<meta property="og:url" content="http://www.yourwebsite.com/vaudeville/indexFacebook.html"/>
<meta property="og:title" content="How to Enter Vaudeville"/>
<meta property="og:site_name" content="How to Enter Vaudeville: The Website"/>
<meta property="og:description" content="The new economy is here, and the non-monied classes must learn how to amuse and entertain the monied classes."/>
</head>
<body>...

Probably most significant is the og:image value, because that is the picture that will be used for the the "preview" in the Facebook status post.

Then, to check out how it works, go to:

https://developers.facebook.com/tools/debug

and enter in the url to your page.

Incidentally, this is all called "Open Graph", and here is a link to the page with info about it:
http://ogp.me/
and trusty Wikipedia:
http://en.wikipedia.org/wiki/Facebook_Platform#Open_Graph_protocol



No comments: