How do you set the first image on XenForo to show on X and Facebook?

[Otherwise Film]

How do you set the first image (or attachment) on XenForo to show on X (formerly Twitter) and Facebook when sharing a thread or an article instead of the logo that's in the Basic Options?

 

[Brilliant Mammoth]

You need to open the XenForo Admin Panel (ACP) and navigate to Appearance> Templates. Search for thread_view, including metadata_macros, and edit those templates.

Template modifications​

Search for this in the thread_view template:

<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 the above code with this:

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

Also, make sure you edit the metadata_macros template to this:

<xf:macro id="metadata"
    arg-siteName=""
    arg-title=""
    arg-description=""
    arg-type=""
    arg-shareUrl=""
    arg-canonicalUrl=""
    arg-imageUrl=""
    arg-twitterCard="summary_large_image">