[JoyFreak] Set Open Graph Image

[JoyFreak]

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:

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

Add below:

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

Read more about this resource...

 

[est3ban129]

it doesn't work for me, just doesn't appear any image now

 

[JoyFreak]

it doesn't work for me, just doesn't appear any image now

How did you test it? Can you share the url you are trying to test, either here or PM.

 

[CivilWarTalk]

This looks cool, now if you could do this for XFRM, using the custom icon, I'd be impressed!

 

[briansol]

Thanks for this.

Any reason why we can't just put the If around the added line instead of the whole block?

arg-imageUrl="{{ link({$thread.cover_image}) }}"

 

[est3ban129]

How did you test it? Can you share the url you are trying to test, either here or PM.

Spain - Irrigador dental

Irrigador dental Si te interesa , mándame privado

cloudbit.es

this post for example

 

[JoyFreak]

Spain - Irrigador dental

Irrigador dental Si te interesa , mándame privado

cloudbit.es

this post for example

You have to add the picture in the post. It pulls the first image in the post.

 

[JoyFreak]

Thanks for this.

Any reason why we can't just put the If around the added line instead of the whole block?

arg-imageUrl="{{ link({$thread.cover_image}) }}"

There's no reason. If that works for you, then use it.

 

[est3ban129]

You have to add the picture in the post. It pulls the first image in the post.

Spain - Altavoz Bluetooth 5.0 Portatil IPX7 FINALIZADO

Reembolso completo por Paypal cubrimos tasas, acepto cuentas nuevas, pero no cuentas con reviews borradas Mandar privado con correo paypal y perfil de Amazon Bluetooth 5.0 y Llamadas con manos libres 8 horas de reproducción (volumen medio) Radio FM incorporada Sistema estéreo TWS Sonido...

cloudbit.es

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

 

[JoyFreak]

Spain - Altavoz Bluetooth 5.0 Portatil IPX7 FINALIZADO

Reembolso completo por Paypal cubrimos tasas, acepto cuentas nuevas, pero no cuentas con reviews borradas Mandar privado con correo paypal y perfil de Amazon Bluetooth 5.0 y Llamadas con manos libres 8 horas de reproducción (volumen medio) Radio FM incorporada Sistema estéreo TWS Sonido...

cloudbit.es

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:

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

 

[est3ban129]

That's strange because your website's page source is reading the attachment as the OG:Image:

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

<xf:title page="{$page}">{{ prefix('thread', $thread, 'escaped') }}{$thread.titl - Pastebin.com

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

pastebin.com

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

Thanks

 

[JoyFreak]

<xf:title page="{$page}">{{ prefix('thread', $thread, 'escaped') }}{$thread.titl - Pastebin.com

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

pastebin.com

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:

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

Replace:

arg-imageUrl="background-image: url('{$thread.cover_image}')" />

 

[est3ban129]

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

Find:

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

Replace:

arg-imageUrl="background-image: url('{$thread.cover_image}')" />

I've tried it, but it doesn't work

 

[JoyFreak]

I've tried it, but it doesn't work

I honestly can't explain why that's happening. Maybe someone can shed light on that?

 

[briansol]

i'm also not getting it to work... doesn't show up in my fb shares as i thought it would.

 

[TMC]

That's strange because your website's page source is reading the attachment as the OG:Image:

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

 

[JoyFreak]

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.

 

[est3ban129]

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

 

[est3ban129]

Spain - reloj inteligente with 12 functions

all the fees included. just pm with your profile and pp??

cloudbit.es

test

 

[JoyFreak]

JoyFreak updated [JoyFreak] Set Open Graph Image with a new update entry:

Code updated

Updated arg-imageUrl from: {{ link({$thread.cover_image}) }}
to: {$thread.cover_image}

Thanks to @TMC for troubleshooting.

Read the rest of this update entry...