XF 2.0 Set pictures from the post as thumbnail for Facebook and Twitter

[Breixo]

Hi!
Now all post sent to Twitter or Facebook via IFTTT go with the same og image.
I saw that it was possible to use first images in a post and use them for posting in these sites:
https://xenforo.com/community/threa...humbnail-for-facebook-feed.18284/#post-237150

Is something like this possible at XF2?
Thanks!

 

[Nirjonadda]

@au lait SEO add-on does this.

 

[Breixo]

@au lait SEO add-on does this.

Thanks, it was already in my mind but didn't know that it also does this.
I'll buy it asap

 

[Nitaaiji]

@Chris D @Brogan @Mike @Jake Bunce, please this is the only basic feature which I miss in Xenforo. Sharing our thread links on Whatsapp, Facebook, Linkedin, Twitter, Telegram, etc. brings in almost half the traffic we get from Google search, at least in the beginning. And we really need these visitors, as Google gives more SEO preference to Wordpress than Forums as you already know.

Since Xenforo thread links shows the same og image in all the thread links for different thread titles, no one feels to click them on social networks just on the basis of the different titles. As you already know, a picture speaks a thousand words. Few want to read long text nowadays, so we have to make it attractive to them to click the link to read by large photos on social networks.

I am sorry for telling all this which you all already know more better than me. After paying for Xenforo, not everyone will have another $136 to pay for a SEO addon which also adds these og images, especially if one does not need the other SEO features in that add-on.



So in order for us, your xenforo customers, for our threads to better compete with Wordpress posts, please please can you consider adding this large size og:image from the first image (if present) in the thread feature? I know it is not just me, but so many of us are interested to bring in more visitors from social networks to our threads. I have seen many threads asking for this here. Also, as a NGO, we request our volunteers to share our thread links on their social networks. Without this all-attractive new og image for each thread, we won't feel much enthusiastic to ask them to share our thread links. Wordpress.com posts can so much instant reach because it has an auto-sharing to connected accounts on publish where every post link with large images is auto-posted on facebook, twitter, linkedin, etc. Wordpress.org has many plugins like Snap which do this. So please do consider our request. So sorry for such a lengthy post after a long time.

 

[tohaitrieu]

@Breixo I use [bd Attactment] Store for XF2.

This addon allow we can upload image with extensions as .jpg or .png

Then, I use this code:

Open template thread_view, search:

<xf:macro template="metadata_macros" name="metadata"
        arg-description="{$fpSnippet}"
        arg-shareUrl="{{ link('canonical:threads', $thread) }}"
        arg-canonicalUrl="{{ link('canonical:threads', $thread, {'page': $page}) }}" />

Replace with:

<xf:if is="{$thread.FirstPost.Attachments.first().thumbnail_url}">
    <xf:macro template="metadata_macros" name="metadata"
        arg-description="{$fpSnippet}"
        arg-shareUrl="{{ link('canonical:threads', $thread) }}"
        arg-canonicalUrl="{{ link('canonical:threads', $thread, {'page': $page}) }}"
        arg-imageUrl="{{ link('canonical:attachments', $thread.FirstPost.Attachments.first()) }}" />
<xf:else/>
    <xf:macro template="metadata_macros" name="metadata"
        arg-description="{$fpSnippet}"
        arg-shareUrl="{{ link('canonical:threads', $thread) }}"
        arg-canonicalUrl="{{ link('canonical:threads', $thread, {'page': $page}) }}" />
</xf:if>

Check my demo: https://fx.tohaitrieu.net/threads/n...ut-ho-tro-manh-muc-tieu-0-6561-va-0-6428.100/

​

Addon: https://xfrocks.com/resources/bd-attachment-store-for-xenforo-2-0.35/

 

[Breixo]

Great, thanks a lot.
I'll try it

 

[djbaxter]

@tohaitrieu

I use this code:

Open template thread_view, search:

<xf:macro template="metadata_macros" name="metadata"
        arg-description="{$fpSnippet}"
        arg-shareUrl="{{ link('canonical:threads', $thread) }}"
        arg-canonicalUrl="{{ link('canonical:threads', $thread, {'page': $page}) }}" />

Replace with:

<xf:if is="{$thread.FirstPost.Attachments.first().thumbnail_url}">
    <xf:macro template="metadata_macros" name="metadata"
        arg-description="{$fpSnippet}"
        arg-shareUrl="{{ link('canonical:threads', $thread) }}"
        arg-canonicalUrl="{{ link('canonical:threads', $thread, {'page': $page}) }}"
        arg-imageUrl="{{ link('canonical:attachments', $thread.FirstPost.Attachments.first()) }}" />
<xf:else/>
    <xf:macro template="metadata_macros" name="metadata"
        arg-description="{$fpSnippet}"
        arg-shareUrl="{{ link('canonical:threads', $thread) }}"
        arg-canonicalUrl="{{ link('canonical:threads', $thread, {'page': $page}) }}" />
</xf:if>

The template edits do work partially in that at least in preliminary tests they do seem to pull the image from the first post.

However, on Twitter it still uses the image in the Twitter default summary card:



Can this be modified to change the Twitter card to the large summary card? This would be done by adding the following meta tag:

<meta name="twitter:card" content="summary_large_image">

But only if the thread starter contains an image. Otherwise, it should not be added and the Xenforo default image to the left of the tweet should be used.

 

[Kevin]

Can this be modified to change the Twitter card to the large summary card? This would be done by adding the following meta tag:

In the edit, add arg-twitterCard="summary_large_image" to the list of arguments.

Something like...

<xf:if is="{$thread.FirstPost.Attachments.first().thumbnail_url}">
    <xf:macro template="metadata_macros" name="metadata"
        arg-description="{$fpSnippet}"
        arg-shareUrl="{{ link('canonical:threads', $thread) }}"
        arg-canonicalUrl="{{ link('canonical:threads', $thread, {'page': $page}) }}"  
        arg-imageUrl="{{ link('canonical:attachments', $thread.FirstPost.Attachments.first()) }}" 
        arg-twitterCard="summary_large_image"               
    />
<xf:else/>
<xf:macro template="metadata_macros" name="metadata"
    arg-description="{$fpSnippet}"
    arg-shareUrl="{{ link('canonical:threads', $thread) }}"
    arg-canonicalUrl="{{ link('canonical:threads', $thread, {'page': $page}) }}" />
</xf:if>

Ideally, though, the conditional 'if' statement would also take into account the dimensions of the attachment to avoid getting tripped when the first attachment of the first post is something small like a 32x32 smiley instead of an actual image you'd want as the image.

 

[djbaxter]

Unfortunately, that didn't work.

Same problem: pulls image from the thread but not posted as the large summary card.

 

[Kevin]

Unfortunately, that didn't work.

Same problem: pulls image from the thread but not posted as the large summary card.

View attachment 201967

If you do a view source on the page in your browser, do you see the changed meta tag for the card type? And does the first post of the thread actually have an image attachment? I haven't tried posting to Twitter yet but playing around on my test site I see the meta tags changed from 'summary' to 'summary_large_image'.

 

[djbaxter]

Okay, this is strange.

I checked page source and it correctly shows

<meta property="og:image" content="https://www.localsearchforum.com/attachments/1557406877388-png.4121/" />
<meta property="twitter:image" content="https://www.localsearchforum.com/attachments/1557406877388-png.4121/" />
<meta property="twitter:card" content="summary_large_image" />

Then I checked the Card Validator | Twitter Developers and it shows this:

 

[djbaxter]

Browser cache issue. Cleared history. Hard refreshed the twitter page. now it looks like this.



Thank you, @Kevin!

 

[Kevin]

According to the Twitter doc, it should be:

<meta name="twitter:card" content="summary_large_image">

not

<meta property="twitter:card" content="summary_large_image" />

and I get an error in the validator and the image does not display in Twitter.

How should the template be used to switch from 'property' to 'name' ?

The difference between using property vs. name is HTML5 vs. RDF specs. But it shouldn't matter as the edit I posted above passes the Twitter validator with no issues and is posting to Twitter as expected.

Here's a recent example showing how a recent link looks in Twitter and attached is a screenshot of the same URL passing the validator. The screenshot from djbaxter above shows the same working results.

If you post a copy of the exact edit you did to your template along with a link to the URL in question it might help sort out what kind of problem you're having.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

 

[vicos]

@Kevin, I deleted my post, but I guess you saw it first. Basically, unregistered users could not view images, even with the direct URL. The validators didn't tell me they couldn't load the pic and instead gave me these other errors/warnings. All is well now. Sorry.

 

[djbaxter]

Like Google, Twitter never stops tweaking things. I've noticed since applying this template edit that sometimes the large image appears above and sometimes below your tweet. It doesn't really matter to me - just an observation.

 

[Kevin]

@Kevin, I deleted my post, but I guess you saw it first. Basically, unregistered users could not view images, even with the direct URL. The validators didn't tell me they couldn't load the pic and instead gave me these other errors/warnings. All is well now. Sorry.

Ooooh, very good point! Yes, guests need to be able to view attachments, else a security error will get tossed when trying to retrieve the image. On the photography site I'm doing it on guests can view attachments (only images are allowed so we don't have to worry about zips or anything else) but you've got me thinking about what to do on a different site.


If anybody else is out there reading this.... if you want to use the image cards then you'll either need to allow guests to view attachments or use something else for the image URL values that is viewable to them.

 

[Laron]

Then, I use this code:

Open template thread_view, search:

I just implemented this and after some tests, it's doing what I was hoping it would with Facebook shares. I've also tested on the sharing debugger.

Two things:

1) I couldn't find the code to replace for my UI.X style. I am not using this style yet as I'm slowly designing one to eventually replace the default style we use. Should I check in with the UI.X folk to find the solution? (I have not tested this style with sharing on FB) I'm on Xenforo 2.1.1 and the same UI.X version.

2) I completely forgot what I was going to say so I will just say thanks for your time ... oh wait, I remembered... I did not install that addon you specified. I was wondering if I will run into any issues from not installing it?

 

[djbaxter]

I did not install that addon you specified. I was wondering if I will run into any issues from not installing it?

No. That's something separate.

 

[tohaitrieu]

I just implemented this and after some tests, it's doing what I was hoping it would with Facebook shares. I've also tested on the sharing debugger.

Two things:

1) I couldn't find the code to replace for my UI.X style. I am not using this style yet as I'm slowly designing one to eventually replace the default style we use. Should I check in with the UI.X folk to find the solution? (I have not tested this style with sharing on FB) I'm on Xenforo 2.1.1 and the same UI.X version.

2) I completely forgot what I was going to say so I will just say thanks for your time ... oh wait, I remembered... I did not install that addon you specified. I was wondering if I will run into any issues from not installing it?

I haven't test without that addon because I install that addon before I try.

ANW. Some members test and it work without installing addon.

 

[frm]

Any way of adding an og:image that you upload yourself to specific forums? I have some forums with SEO2 using custom 1200x628 images for sharing too.