Forcing a Facebook share thumbnail for posts

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

Forcing a Facebook share thumbnail for posts

Postby Colp » Sat Mar 31, 2012 10:09 pm

I use AddThis to provide social linking buttons to my entries. For Facebook shares it connects and shows the page title, link, author and date, and an image; generally the wrong one.

I've read in a few places that Facebook searches the page for images and chooses one at random. For a while I had posts without any images at all so this share screen never offered me any image at all. So to solve that I found that Facebook used the <link rel="image_src"...> and <meta property="og:image"...> (better) tags in the header section. I've got <link rel="image_src" href="[[ template_dir ]]images/sitelogo.png" /> and <meta property=”og:image” content=”[[ template_dir ]]images/sitelogo.png”/> and every time I share I get the site logo just as I wanted.

I'm starting to put images into my posts and when sharing, I'd like to select one of them specifically for the post rather than always showing the site logo. Facebook can collect them all and allows you to select which one to use for the thumbnail. Unfortunately with the <link rel...> and <meta property...> set Facebook doesn't offer me any more thumbnails except for the site logo.

I had assumed that setting the image in Edit Entry page would force Facebook to use a specific thumbnail for the page overriding the header tags but it doesn't. In fact if I remove the header tags from the template and set the image, Facebook ignores it altogether.

It might seem odd that I'm posting this on the PivotX forum, but I can't see a way through... In summary what I'm looking for is: If a post has no images then I want the site logo or a specific image; If the post has images I want the site logo or a specific image or a choice of the images in the post. (I hope that made sense!?)

It seems the only way I can do this is to disable the header tags and have at least one image in every post - even if that's the site logo - which is rubbish.

So... Has anyone else come across this and found a solution? and... What is the image field in Edit Entry used for?

Cheers

Colp
http://www.friedhornet.co.uk
Colp
 
Posts: 45
Joined: Thu Nov 17, 2011 12:36 am
Location: Middlesbrough, UK

Re: Forcing a Facebook share thumbnail for posts

Postby Harm10 » Sat Mar 31, 2012 10:25 pm

Colp wrote:So... Has anyone else come across this and found a solution? and... What is the image field in Edit Entry used for?
It creates an extra field that can be used in your template for example like this:
Code: Select all
[[ if $entry.extrafields.image != ""]]
     <div><img class="align-left" src="[[pivotx_url]]includes/timthumb.php?src=[[$extraimage]]&amp;w=150&amp;zc=3"
               title="[[$entry.extrafields.image_description]]" /></a></div>
[[ /if ]]
I am not really clear on your story about the facebook thumbnail. I personally use the meta tag for a fixed image. Do you want to change this per page depending on your content?
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 12:39 pm

I didn't think it was clear... Yes the meta tag gives me the same fixed image, but sometimes I would like to display an image applicable to the article. Using the metatag in the template header means I can never change the image. Without the meta tag I have to put images in the article.
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 12:43 pm

The extra field would then associate a specific image to the post in my frontpage or entry page without me having to place an image in the entry itself. I thought that was the case, and that's what I want Facebook to do.
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 12:54 pm

Just to be clear: you now know where to go on your own site? The meta tag is placed there by yourself and you can influence what's on the page as per first image by using the extrafield or not. If there is no extra image defined you can add a fixed image by using the [[ else ]] construction.
If Facebook doesn't pick up the right image there is not much PivotX can do about that (I think).
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 2:15 pm

Harm10 I'm not sure I understand? I set the image explicitly to sitelogo.png using <meta property=”og:image” content=”[[ template_dir ]]images/sitelogo.png”/> in the header section of template. In that case every post gets the same image.

Are you saying that I could set the meta data programmatically in the header by using [[$extraimage]] instead of sitelogo.png?

Actually now I'm asking the question it makes sense to do it that way than be explicit. I'll take a look.

Thanks
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 2:56 pm

That's not what I meant but it sounds feasible to do that whenever you have selected an entry or an page. It won't work on the front or archive page because you don't have such a selection.

What I meant was if you leave out the meta tag on the entry and page template facebook will pick up the first image or not? If that's your extraimage or the fixed one if there is no extraimage then you got what you want or not? After all different templates are used when displaying an entry and a page.
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 4:11 pm

I didn't think this would get so complicated. Thanks for putting up with me! ;)

The meta tag is in the header section in _sub_header.html so technically it's used by all the template files frontpage, search, entrypage and page. The header template sets the <head></head> section then initates the <body> section so I don't think I could later set the <meta property="og:image..."> later... (or can I?)

Anyway, when I leave it out of the header, Facebook picks up all the fixed images in the entry, that is if the entry has fixed images. If the entry has no images then Facebook doesn't have a thumbnail. This happens whether the extraimage is set or not. Facebook seems to ignore the extraimage setting, probably because I'm not using it anywhere.

I guess I'm thinking that I could leave the header section as is, but check for an entry or page condition [[ if $pagetype=="entry" || $pagetype=="page" ]] (I already have that for setting the <title>). Then I can check for the [[ $extraimage ]] before setting the metatag to the extraimage [[ else ]] sitelogo.png.

I know my syntax is rubbish but I hope the logic still applies.
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 4:51 pm

I think you got the logic! You could also use 2 header templates: 1 specific for entry/page and 1 for all other templates. But there are more solutions possible because of this dynamic environment!
Let me know how you get on with this and if you would share your working solution with all other readers then that would be great!
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 6:46 pm

Thanks. I will do. It's been doing my nut in to be honest, but I'm getting there.

From what I've learned so far (if anyone is interested):

Facebook infers meta data from a number of places. For instance, the simple title can come from <title>, <meta name="title"...> or <meta property="og:title"...>. The latter is the Open Graph protocol and although Facebook can infer the value from the other entries, the debugger says you should specify the Open Graph data too. :? At this rate, with title, description, image my <head> section is going to be huge!

Another thing I learned is that the image needs to be presented with the absolute URL, so I have to prefix with [[$paths.host]][[home]].
Colp
 
Posts: 45
Joined: Thu Nov 17, 2011 12:36 am
Location: Middlesbrough, UK

Next

Return to 2.x Discussion

Who is online

Users browsing this forum: No registered users and 1 guest

cron