[JoyFreak] Set Open Graph Image

[JoyFreak] Set Open Graph Image

JoyFreak

Well-known member
JoyFreak submitted a new resource:

[JoyFreak] Set Open Graph Image - Set the open graph image for your threads. Increase visibility across social media platforms.

This guide will help you to set your forum's open graph image. It will use the first image in your thread, whether linked directly or attached.

Open template: thread_view

Find:
Code:
<xf:set var="$fpSnippet" value="{{ snippet($firstPost.message, 0, {'stripBbCode': true}) }}" />

Add below:
Code:
<xf:if is="$thread.cover_image">
<xf:macro template="metadata_macros" name="metadata"
    arg-description="{$fpSnippet}"
    arg-shareUrl="{{...

Read more about this resource...
 
Last edited:
Thanks for this.

Any reason why we can't just put the If around the added line instead of the whole block?
Code:
arg-imageUrl="{{ link({$thread.cover_image}) }}"
 
You have to add the picture in the post. It pulls the first image in the post.

Here are some published images but it doesn't work either.
The logo of the website does not appear either
 

Here are some published images but it doesn't work either.
The logo of the website does not appear either
That's strange because your website's page source is reading the attachment as the OG:Image:
Code:
<meta property="og:image" content="/foro/index.php?//cloudbit.es/foro/index.php?attachments/altavoz_-jpg.118931/" />

But Facebook debugger is using your logo image. I can't explain why that's happening.

Can you copy and paste the whole block you've edited, to see if it's correctly done?
 
That's strange because your website's page source is reading the attachment as the OG:Image:
Code:
<meta property="og:image" content="/foro/index.php?//cloudbit.es/foro/index.php?attachments/altavoz_-jpg.118931/" />

But Facebook debugger is using your logo image. I can't explain why that's happening.

Can you copy and paste the whole block you've edited, to see if it's correctly done?

I added it here because I couldn't publish it in the post

Thanks
 
I added it here because I couldn't publish it in the post

Thanks
It looks ok to me. It should really work. You can also try this and let me know:

Find:
Code:
arg-imageUrl="{{ link({$thread.cover_image}) }}" />

Replace:
Code:
arg-imageUrl="background-image: url('{$thread.cover_image}')" />
 
It looks ok to me. It should really work. You can also try this and let me know:

Find:
Code:
arg-imageUrl="{{ link({$thread.cover_image}) }}" />

Replace:
Code:
arg-imageUrl="background-image: url('{$thread.cover_image}')" />
I've tried it, but it doesn't work
 
That's strange because your website's page source is reading the attachment as the OG:Image:
Code:
<meta property="og:image" content="/foro/index.php?//cloudbit.es/foro/index.php?attachments/altavoz_-jpg.118931/" />

But Facebook debugger is using your logo image. I can't explain why that's happening.

Can you copy and paste the whole block you've edited, to see if it's correctly done?

I'm thinking it's because they aren't using "full friendly URLs" and that makes the URL outputted by this mod to not work (i.e. the weird /foro/index.php?//cloudbit.es part at the start of the og.image url).
I did a quick test and changing the
arg-imageUrl="{{ link({$thread.cover_image}) }}" />
to
arg-imageUrl="{$thread.cover_image}" />
should make it work (and it also works when full friendly URLs are being used).
 
I'm thinking it's because they aren't using "full friendly URLs" and that makes the URL outputted by this mod to not work (i.e. the weird /foro/index.php?//cloudbit.es part at the start of the og.image url).
I did a quick test and changing the
arg-imageUrl="{{ link({$thread.cover_image}) }}" />
to
arg-imageUrl="{$thread.cover_image}" />
should make it work (and it also works when full friendly URLs are being used).
Thanks for sharing that. If the others can confirm this works for them, I’ll update the resource.
 
  • Like
Reactions: TMC
I'm thinking it's because they aren't using "full friendly URLs" and that makes the URL outputted by this mod to not work (i.e. the weird /foro/index.php?//cloudbit.es part at the start of the og.image url).
I did a quick test and changing the
arg-imageUrl="{{ link({$thread.cover_image}) }}" />
to
arg-imageUrl="{$thread.cover_image}" />
should make it work (and it also works when full friendly URLs are being used).
Works fine! thanks
 
Top Bottom