Post preview on LinkedIn

[karolinalinda]

Hi experts,

I experience this annoying behavior every time I want to link a Community post on LinkedIn: the preview displays the avatar of the author instead of the cover image.

Do you know how to overcome this undesired behavior? Do I miss something?

Thanks for any hints,

Karolina

[AbhishekGu · Accepted solution]

Hello @karolinalinda,
This is how we are dealing with it in our community:

<#assign images = (liql('SELECT large_href FROM images WHERE messages.id = "${page.context.message.uniqueId}"').data.items) />
   <#if images?? && (images?size gt 0) >
       <#assign img_url = images[0].large_href />
       <#assign lengthOfDomain = page.context.message.webUi.url?index_of("/t5") />
       <#assign communityDomain = page.context.message.webUi.url?substring(0,lengthOfDomain) />
       <#assign message_img_url = communityDomain + img_url />
    <meta property="og:image" content="${message_img_url}" />
<#else>
    <meta property="og:image" content="${asset.get("/html/assets/<some default image>")}"/>
</#if>

The above code should be added to the head.ftl file.

Code Explanation: First we are pulling the image from the message body and check if any image exist, then use it otherwise use a default image from assets.

Let me know if that helps or we can connect sometime if you want me to replicate same on your community.

Regards,
Abhishek Gupta

[karolinalinda]

Thank you, Abhishek - we'll test it! 🙂 

[stehrani71]

hello @AbhishekGu 

We're having the same issue. Can you tell me where is the head.ftl? Is Studio? 

[AbhishekGu · Accepted solution]

Hello @stehrani71 
Yes, that's in studio. Exact location is as follows:

Studio > Community Style > Wrapper 

Here choose your community skin and on the right hand side you can see Page Head Bottom Content (head.ftl).

[nbalogh]

Hi Abhisek,

I tried to implement this script on our staging site, but i get an error:

InvalidReferenceException:The following has evaluated to null or missing:
==> page.context.message  [in template "HeadBottomCustom" at line 5, column 79]

Do you have any idea what could go wrong? 

[AbhishekGu]

Hello @nbalogh 
Can you update the code with the following:

<#if page.context.message??>
<#assign images = (liql('SELECT large_href FROM images WHERE messages.id = "${page.context.message.uniqueId}"').data.items) />
<#if images?? && (images?size gt 0) >
<#assign img_url = images[0].large_href />
<#assign lengthOfDomain = page.context.message.webUi.url?index_of("/t5") />
<#assign communityDomain = page.context.message.webUi.url?substring(0,lengthOfDomain) />
<#assign message_img_url = communityDomain + img_url />
<meta property="og:image" content="${message_img_url}" />
<#else>
<meta property="og:image" content="${asset.get("/html/assets/<some default image>")}"/>
</#if>
</#if>

Or
you can add the below code for the specfic pages like ForumTopicPage, BlogArticlePage, ForumPageCategoryPage, ViewProfilePage, UserBadgesPage etc. where you have message object so that opengraph code will not execute over non-message page.

<#assign images = (liql('SELECT large_href FROM images WHERE messages.id = "${page.context.message.uniqueId}"').data.items) />
   <#if images?? && (images?size gt 0) >
       <#assign img_url = images[0].large_href />
       <#assign lengthOfDomain = page.context.message.webUi.url?index_of("/t5") />
       <#assign communityDomain = page.context.message.webUi.url?substring(0,lengthOfDomain) />
       <#assign message_img_url = communityDomain + img_url />
    <meta property="og:image" content="${message_img_url}" />
<#else>
    <meta property="og:image" content="${asset.get("/html/assets/<some default image>")}"/>
</#if>

Regards,
Abhishek Gupta