Forcing a Facebook share thumbnail for posts

Discuss PivotX 2.0.x here. Non-PivotX related discussions go in The Drain.

Re: Forcing a Facebook share thumbnail for posts

Postby Colp » Sun Apr 01, 2012 8:53 pm

Ok, I think I've worked it out :geek: This is the code I have in my <head></head> section of the _sub_header.html file:

Code: Select all
    [[ if $pagetype=="entry" || $pagetype=="page" ]]
        <meta name="title" content="[[title]]" />
        <meta name="description" content="[[introduction strip=1]]" />
        <meta property="og:title" content="[[title]]" />
        <meta property="og:description" content="[[introduction strip=1]]" />
        [[ if $entry.extrafields.image != "" ]]
            <meta name="image" content="[[$paths.host]][[$paths.upload_base_url]][[$entry.extrafields.image]]" />
            <meta property="og:image" content="[[$paths.host]][[$paths.upload_base_url]][[$entry.extrafields.image]]" />
        [[ else ]]
            <meta name="image" content="[[$paths.host]][[$paths.upload_base_url]]logos/256/friedhornetsitelogo256.png" />
            <meta property="og:image" content="[[$paths.host]][[$paths.upload_base_url]]logos/256/friedhornetsitelogo256.png" />
        [[ /if ]]
    [[ else ]]
        <meta name="title" content="[[sitename]]" />
        <meta name="image" content="[[$paths.host]][[$paths.upload_base_url]]logos/256/friedhornetsitelogo256.png" />
        <meta property="og:title" content="[[sitename]]" />
        <meta property="og:image" content="[[$paths.host]][[$paths.upload_base_url]]logos/256/friedhornetsitelogo256.png" />
    [[ /if ]]


First I check for an entry or a page. If it is then I set the page title to the post title. I then set the page description to the introduction stripping out any html code. Facebook shares use both of these entries.

(You'll notice that as well as setting <meta name=...> I've followed Facebook's recommendations for setting <meta property="og:..."> but I think this is overkill.)

I then check if the extrafield.image exists. If it does I set the page image to use it. If it isn't I use a standard logo image in my images folder. $entry.extrafields.image records the relative URL from the images folder, but the meta tags need the absolute URL. To get that I've used two $paths variables to fill in the blanks.

The last [[ else ]] is for pages that aren't entries or pages (frontpage, archive, search pages). In this case I set the page title simply to the name of my site and the page image to my standard logo image. Since I don't share these pages, this is probably irrelevant, but maybe Google will use it.

So when someone shares a post they will get an image, the page title, the website and the introduction, which looks right to me. If I don't specify an extraimage for the entry I get a standard image, otherwise I can use the extraimage field to fix an image more appropriate for the entry. Facebook doesn't look beyond this setting though, so the user doesn't get a choice of other images in the post if there are any. I have control.

Harm10, thanks for giving me the hints. I do wonder if there's a more elegant solution, but the code's working and I'm sticking with it for now.

The good news is that with all the sharing I've been doing to experiment, AddThis and Google Analytics will be thinking I'm popular! :D
Colp
 
Posts: 45
Joined: Thu Nov 17, 2011 12:36 am
Location: Middlesbrough, UK

Re: Forcing a Facebook share thumbnail for posts

Postby Colp » Sun Apr 01, 2012 10:20 pm

...and it goes on :x

The AddThis Twitter button doesn't recognise <meta name="title"...> or <meta property="og:title"> so it used the absolute URL instead in the tweet. It doesn't look nice. I've added <title>[[title]]</title> back in and now both Facebook and Twitter shares work. Heaven knows how other sharing tools read this data.

... but the original issue is fixed. ;)
Colp
 
Posts: 45
Joined: Thu Nov 17, 2011 12:36 am
Location: Middlesbrough, UK

Re: Forcing a Facebook share thumbnail for posts

Postby Harm10 » Sun Apr 01, 2012 10:24 pm

Looks good! But are you sure you need an image tag if you also use an opengraph one?
And I guess you have more og tags than you post right now? Because I also use them (fixed on all pages) and I have og:url, og:site_name, og:type, og:locale and of course fb:admins extra.

And if you are experimenting than you could also check Google+ because I am fairly sure they also use the opengraph protocol.
Quality is in the detail of things............

Want to change or update your PivotX site? Mail or PM me!
I can also convert your site to a Wordpress site!
Harm10
Developer
 
Posts: 2011
Joined: Wed Jun 17, 2009 9:37 am
Location: Somewhere in The Netherlands (aka Holland)

Re: Forcing a Facebook share thumbnail for posts

Postby Colp » Sun Apr 01, 2012 10:53 pm

I don't think I need to double up on the tags, but I did it just in case something else didn't understand the Open Graph protocol - as I discovered Twitter didn't! I don't use any other og: but wondered if I should. Now you say you do, I'll give it a go. Thanks for your help.
Colp
 
Posts: 45
Joined: Thu Nov 17, 2011 12:36 am
Location: Middlesbrough, UK

Previous

Return to 2.x Discussion

Who is online

Users browsing this forum: No registered users and 1 guest