1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Discussion in 'XenForo Questions and Support' started by Fossor, Jul 25, 2011.

  1. Fossor

    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?
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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/
     
    THLove, Bram, tenants and 4 others like this.
  3. Panupat

    Panupat Well-Known Member

    Do you think adding images from [ img ] is possible?
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Nope. Not without an addon. You need to operate on the post message to extract IMG URLs.
     
  5. Fossor

    Fossor Member

    Thankx Jake for your help... I doesn't show it yet but I believe FB cache is the problem.
    I use linter to refresh and check again.
     
  6. swatme

    swatme Well-Known Member

    is this applicable still in 1.1 ?
     
  7. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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).
     
  8. swatme

    swatme Well-Known Member

    thanks jake.
    does this mod also covers if images posted from photobucket or other sources?
     
  9. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    No.
     
  10. swatme

    swatme Well-Known Member

    thanks jake
    how to set the first thumbnail posted in fb is your posted image and not the default xf image?
     
  11. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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
     
  12. swatme

    swatme Well-Known Member

    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
     
  13. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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:

    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>
    
     
    swatme likes this.
  14. Mutt

    Mutt Well-Known Member

    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?
     
  15. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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.
     
  16. DBA

    DBA Well-Known Member

    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.
     
    gordy likes this.
  17. Mutt

    Mutt Well-Known Member

    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.
     
    Klaudius, ibenick, Chris D and 2 others like this.
  18. DBA

    DBA Well-Known Member

    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.
     
  19. zooki

    zooki Active Member

    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?
     
  20. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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

    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).
     

Share This Page