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

Sort by date Sort by votes
Nitaai Kumar said:
@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.

View attachment 191870

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.
Click to expand...

So true!

So only the SEO-Adon can help here? The link doesnt work anymore. Which Adone I have to use for XenFor 2.1., for showing individual (from Post/Thread) Fotos on Twitter, etc. if I share a Post/Thread?
 
Upvote 0 Downvote
Ok, so I just have to make this replacement and then it works without Add-On, etc.?

tohaitrieu said:
@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:

Code: 
<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:

Code: 
<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/
Click to expand...
 
Upvote 0 Downvote
I replaced the code, tryed to share Posts on Twitter with Fotos, but there is no pre-show of Foto(s) from this post.

Before I added a Metada Logo URL for basic options of the default Style. I removed it, to test, if something change. But there is no foto from the shared post on Twitter. :(
twitter-problemlxjop.png
 
Upvote 0 Downvote
1. Replace Code.
2. In The First Post must have at least 1 picture attacted and Insert to your post.
3. Clear Cache for that url and Use debug

- Facebook: https://developers.facebook.com/tools/debug/og/object/ paste your link and click Fetch new scape information Once or Twice.

- Twitter: https://cards-dev.twitter.com/validator do the same thing as facebook.

Check Live URL: https://fx.tohaitrieu.net/threads/x...-can-nap-tien-loi-nhuan-duoc-rut-toan-bo.129/

Screen Shot 2019-06-14 at 1.30.17 AM.webp​

PeterUwe89 said:
I replaced the code, tryed to share Posts on Twitter with Fotos, but there is no pre-show of Foto(s) from this post.

Before I added a Metada Logo URL for basic options of the default Style. I removed it, to test, if something change. But there is no foto from the shared post on Twitter. :(
twitter-problemlxjop.png
Click to expand...
 
Upvote 0 Downvote
Thx, I check it later...., so every thread needs fotos in the first Post?

But if I share the newest post of the thread, which contains fotos, the foto from the first post gets shared and not the one from the actual post?

Card preview

6A9rp0tL_mini.jpg

Berliner Neubaumelder

@Berlinerneubau

The card for your website will look a little something like this!

Unable to render Card preview

Log


INFO: Page fetched successfully

INFO: 4 metatags were found

ERROR: No card found (Card error)
Click to expand...

Even with Foto in the first post of the thread it doesnt work, or its not enouth, just to enter a picture by link? It needs to be an attached picture to the first post?
 
Upvote 0 Downvote
tohaitrieu said:
<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>
Click to expand...
I've noticed a bug with this.

When sharing to a Facebook business page, and the thread only has one image in it which has been inserted in the post, the image will not be displayed in the thumbnail, it will be blank and the output will be a smaller blank image with the text wrapped around it on the right.

But if that same thread is shared on a normal FB account, it works fine with the larger landscape thumbnail (no text wrapping). It even works fine in comments (wraps the text, to be expected).

The error I see on the FB debugger in this instance, is this:

204619

I think what is happening is that the OG image url is picking up on the friendly URL of the image, rather than the direct image URL, and this is causing the problem. I noticed that this can be fixed if you upload the image a second time, and leave it not inserted in the post, however this is not practical as I have multiple authors and this is not good for a few reasons.

I run articles through my forum now (I got rid of wordpress and a bridging addon), so most posts I share on social media only have one image, and this problem happens every time.

Is there some code I could put in to resolve this?
 
  • Like
Reactions: WxP
Upvote 0 Downvote
I realize this can be a template modification easily, but if someone would just make this into a quick addon again that would be great, since there isn't currently an option any longer.
 
Upvote 0 Downvote
doublespaces said:
I realize this can be a template modification easily, but if someone would just make this into a quick addon again that would be great, since there isn't currently an option any longer.
Click to expand...
(.... and @djbaxter) Do you have a test site that you could use to test something? So I can quickly do the same changes on all of my XF sites at the same time (and to keep the changes synched) I usually package stuff up like this as an add-on instead of doing template edits. With that said I do have an add-on that'll do these template edits & and few others things if you want to test it out. Just remember though, guests need permissions to view attachments else doing this kind of template edit won't work.
 
Upvote 0 Downvote
Kevin said:
(.... and @djbaxter) Do you have a test site that you could use to test something? So I can quickly do the same changes on all of my XF sites at the same time (and to keep the changes synched) I usually package stuff up like this as an add-on instead of doing template edits. With that said I do have an add-on that'll do these template edits & and few others things if you want to test it out. Just remember though, guests need permissions to view attachments else doing this kind of template edit won't work.
Click to expand...

Yes I do
 
Upvote 0 Downvote
FYI: If anybody else wants to play around with it, you can grab a copy from Alien Soup. There's a few other options in there that people might be interested in.

aliensoup.com

XenForo 2 - [CinVin] Style & Meta Tweaks (use attachments for og:image & others)

This is a collection of several options related to XenForo meta tags and miscellaneous display tweaks. This is how, for example, we are using attachments for the og:image at Cameraderie photography forum. After installing go into your XF Options...
aliensoup.com aliensoup.com
 
Upvote 0 Downvote
Kevin said:
FYI: If anybody else wants to play around with it, you can grab a copy from Alien Soup. There's a few other options in there that people might be interested in.

aliensoup.com

XenForo 2 - [CinVin] Style & Meta Tweaks (use attachments for og:image & others)

This is a collection of several options related to XenForo meta tags and miscellaneous display tweaks. This is how, for example, we are using attachments for the og:image at Cameraderie photography forum. After installing go into your XF Options...
aliensoup.com aliensoup.com
Click to expand...
This works great when you are linking to a thread, but when you link to a forum I get an image of an avatar from the first to post in that forum I guess. Do you know of a way to insert an image for a forum?
 
Upvote 0 Downvote
Motobaka said:
This works great when you are linking to a thread, but when you link to a forum I get an image of an avatar from the first to post in that forum I guess. Do you know of a way to insert an image for a forum?
Click to expand...
Do you have an example link so I can see that in action and do you have a default meta logo defined in your URL?
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

Fossor
  • Question Question
How to set pictures from the post as thumbnail for Facebook feed?
2
Replies
29
Views
14K
otto
otto
Top Bottom