How to set pictures from the post as thumbnail for Facebook feed?

Fossor

Member
I assume FB tag <meta property="og:image" /> is set to show logo or user picture, but how to show thumb on Facebook from picture attached to the post on XF?
 
This code is a little ugly. I couldn't find a way to access the first attachment from $firstPost.attachments without using foreach. There may be an easier way, but this code works in my testing. Also... I have since discovered that this code only works on the first page of the thread. Or rather, it pulls the first attachment from the first post on the current page.

I came up with this template edit that sets the thumbnail of the first attachment in the first post as an og:image. Otherwise it will fall back to using the avatar of the thread author which it already does by default.

Edit this template:

Admin CP -> Appearance -> Templates -> thread_view

Replace this code:

Code:
<xen:container var="$head.openGraph"><xen:include template="open_graph_meta">
		<xen:set var="$url">{xen:link 'canonical:threads', $thread}</xen:set>
		<xen:set var="$title">{$thread.title}</xen:set>
		<xen:set var="$avatar">{xen:helper avatar, $thread, m, 0, 1}</xen:set>
	</xen:include></xen:container>

With this:

Code:
<xen:comment>extract first thumbnail URL from first post, for use in open_graph_meta below</xen:comment>
<xen:if is="{$firstPost.attachments}">
	<xen:foreach loop="$firstPost.attachments" value="$attachment" i="$i" count="$count">
		<xen:if is="{$i} == 1 AND {$attachment.thumbnailUrl}">
			<xen:set var="$ogThumb">{xen:helper fullurl, $attachment.thumbnailUrl, 1}</xen:set>
		</xen:if>
	</xen:foreach>
</xen:if>

<xen:container var="$head.openGraph"><xen:include template="open_graph_meta">
		<xen:set var="$url">{xen:link 'canonical:threads', $thread}</xen:set>
		<xen:set var="$title">{$thread.title}</xen:set>
		<xen:set var="$avatar"><xen:if is="{$ogThumb}">{$ogThumb}<xen:else />{xen:helper avatar, $thread, m, 0, 1}</xen:if></xen:set>
	</xen:include></xen:container>

For referenece:

http://xenforo.com/community/threads/changing-og-image-thumbnail.17141/
 
This code is a little ugly. I couldn't find a way to access the first attachment from $firstPost.attachments without using foreach. There may be an easier way, but this code works in my testing.

I came up with this template edit that sets the thumbnail of the first attachment in the first post as an og:image. Otherwise it will fall back to using the avatar of the thread author which it already does by default.

Edit this template:

Admin CP -> Appearance -> Templates -> thread_view

Replace this code:

Code:
<xen:container var="$head.openGraph"><xen:include template="open_graph_meta">
<xen:set var="$url">{xen:link 'canonical:threads', $thread}</xen:set>
<xen:set var="$title">{$thread.title}</xen:set>
<xen:set var="$avatar">{xen:helper avatar, $thread, m, 0, 1}</xen:set>
</xen:include></xen:container>

With this:

Code:
<xen:comment>extract first thumbnail URL from first post, for use in open_graph_meta below</xen:comment>
<xen:if is="{$firstPost.attachments}">
<xen:foreach loop="$firstPost.attachments" value="$attachment" i="$i" count="$count">
<xen:if is="{$i} == 1 AND {$attachment.thumbnailUrl}">
<xen:set var="$ogThumb">{xen:helper fullurl, $attachment.thumbnailUrl, 1}</xen:set>
</xen:if>
</xen:foreach>
</xen:if>
 
<xen:container var="$head.openGraph"><xen:include template="open_graph_meta">
<xen:set var="$url">{xen:link 'canonical:threads', $thread}</xen:set>
<xen:set var="$title">{$thread.title}</xen:set>
<xen:set var="$avatar"><xen:if is="{$ogThumb}">{$ogThumb}<xen:else />{xen:helper avatar, $thread, m, 0, 1}</xen:if></xen:set>
</xen:include></xen:container>

For referenece:

http://xenforo.com/community/threads/changing-og-image-thumbnail.17141/

is this applicable still in 1.1 ?
 
is this applicable still in 1.1 ?

Yes it should still work in 1.1.

One thing I learned recently is that $firstPost (which is used in my code) refers to the first post on the page, not necessarily the first post in the thread. So if you are viewing page 2 or higher then it will no longer pull attachments from the first post in the thread, but rather the first post on the page. This is different behavior than I intended, but it's the best that can be done without an addon (to make the first post in the thread available on all pages of the thread).
 
The template mod I posted uses the thumbnail for the first attachment in the first post. If there is no attachment to use then it will default to using the avatar of the thread author. And in addition to those content-specific images there is the default og:image that is also used:

Admin CP -> Appearance -> Style Properties -> Header and Navigation -> Facebook Open Graph Logo
 
The template mod I posted uses the thumbnail for the first attachment in the first post. If there is no attachment to use then it will default to using the avatar of the thread author. And in addition to those content-specific images there is the default og:image that is also used:

Admin CP -> Appearance -> Style Properties -> Header and Navigation -> Facebook Open Graph Logo

yup but the weird thing is when you copy the url of your thread and post it in fb,
it will display the default og.logo of xenforo , and 2nd thumbnail is the first image posted in the message.

just wondering why fb wont display by default your first image in your message and not the default og.logo of xf
 
yup but the weird thing is when you copy the url of your thread and post it in fb,
it will display the default og.logo of xenforo , and 2nd thumbnail is the first image posted in the message.

just wondering why fb wont display by default your first image in your message and not the default og.logo of xf

That because XF defines two images:

Admin CP -> Appearance -> Templates -> open_graph_meta

You may want to modify this template to omit the default image if a custom one is defined by adding the red code:

Rich (BB code):
<xen:if is="{$xenOptions.facebookAppId} OR {$xenOptions.facebookAdmins}">
	<meta property="og:site_name" content="{$xenOptions.boardTitle}" />
	<xen:if is="{$avatar}"><meta property="og:image" content="{$avatar}" /></xen:if>
	<xen:if is="!{$avatar}"><meta property="og:image" content="{xen:helper fullurl, @ogLogoPath, 1}" /></xen:if>
	<meta property="og:type" content="article" />
	<meta property="og:url" content="{xen:raw $url}" />
	<meta property="og:title" content="{xen:raw $title}" />
	<xen:if is="{$xenOptions.facebookAppId}"><meta property="fb:app_id" content="{$xenOptions.facebookAppId}" /></xen:if>
	<xen:if is="{$xenOptions.facebookAdmins}"><meta property="fb:admins" content="{xen:helper implode, {$xenOptions.facebookAdmins}, ','}" /></xen:if>
</xen:if>
 
on my old VB site I feel like fab book would find every image on the page including avatars & [ img ] tags. then let me pick one. would deleting the og:image lines all together give that back to me? is that a bad idea & if so, whats the down side?
 
on my old VB site I feel like fab book would find every image on the page including avatars & [ img ] tags. then let me pick one. would deleting the og:image lines all together give that back to me? is that a bad idea & if so, whats the down side?

Hmm. I don't know. I'm not a facebooker. You can try it to see if it works. The template can be reverted if it doesn't yield the desired result.
 
on my old VB site I feel like fab book would find every image on the page including avatars & [ img ] tags. then let me pick one. would deleting the og:image lines all together give that back to me? is that a bad idea & if so, whats the down side?
I miss that, I'd rather have an image that's related to the thread then some generic one.

I removed the og:image and it uses the first avatar instead. No option to choose which image we want like we did with vB.
 
if you comment out the og:image lines in open_graph_meta
Code:
    <xen:comment><xen:if is="{$avatar}"><meta property="og:image" content="{$avatar}" /></xen:if></xen:comment>
    <xen:comment><meta property="og:image" content="{xen:helper fullurl, @ogLogoPath, 1}" /></xen:comment>

and the avatar line in thread_view
Code:
<xen:comment><xen:set var="$avatar">{xen:helper avatar, $thread, m, 0, 1}</xen:set></xen:comment>

it goes back to letting you chose from any of the embedded [ img ] images & the attachments but now you don't have the option to use the avatar or the regular og:image

and I'm not sure it it's wise to do all this. there may be some reason that turns out it's better to set the image in the tags.

PS - facebook seems to cache the images that are available so if you are making changes & then testing, use a different page next time.
 
That worked, thanks Mutt.

I did notice though that all links will pull the image(s) from the first page and not necessarily the page you posted.
 
Its pretty important to have OG:Image pickup a relevant image from the page. I may resort to commenting out the lines, but perhaps there should be a better way of dealing with this?
 
Its pretty important to have OG:Image pickup a relevant image from the page. I may resort to commenting out the lines, but perhaps there should be a better way of dealing with this?

If you wish to choose an image from the page at the time of sharing the link then you need to remove the og:images from this template:

Admin CP -> Appearance -> Templates -> open_graph_meta

Rich (BB code):
<xen:if is="{$xenOptions.facebookAppId} OR {$xenOptions.facebookAdmins}">
	<meta property="og:site_name" content="{$xenOptions.boardTitle}" />
	<xen:if is="{$avatar}"><meta property="og:image" content="{$avatar}" /></xen:if>
	<meta property="og:image" content="{xen:helper fullurl, @ogLogoPath, 1}" />
	<meta property="og:type" content="article" />
	<meta property="og:url" content="{xen:raw $url}" />
	<meta property="og:title" content="{xen:raw $title}" />
	<xen:if is="{$xenOptions.facebookAppId}"><meta property="fb:app_id" content="{$xenOptions.facebookAppId}" /></xen:if>
	<xen:if is="{$xenOptions.facebookAdmins}"><meta property="fb:admins" content="{xen:helper implode, {$xenOptions.facebookAdmins}, ','}" /></xen:if>
</xen:if>

It should allow you to choose an image when no og:image is defined (so I'm told, I don't use facebook).
 
Top Bottom