Updating the Out of the box meta data to enable twitter 'summary-with-large-picture' cards

[allensmith81]

Hi all,

It's my understanding that the Atlas community team made a custom change to the code base to change the community meta data to support twitter summary cards with large images.

We are wanting to leverage the same change and so I was wondering if you could provide some examples or pointer on what you changed so we can mirror you work.

Allen

[AbhishekGu · Accepted solution]

Hello @allensmith81,

here are the confluences which helped us to develop metadata:

For Twitter : https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup

For LinkedIn : https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=e...

For Facebook : https://developers.facebook.com/docs/sharing/webmasters/

Sharing some code examples as well : 

For Twitter :

<meta name="twitter:image" content="${asset.get("/html/assets/Khoros_Atlas_opengraph.png")}"/>
<meta name="author" content="${page.context.message.author.login}">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:label1" value="Author">
<meta name="twitter:data1" value="${page.context.message.author.login}">
<#assign contentKudos = rest("/messages/id/${page.context.message.uniqueId}/kudos/count").value />
<meta name="twitter:label2" value="Kudos">
<meta name="twitter:data2" value="${contentKudos}">
<#assign contentViews = rest("/messages/id/${page.context.message.uniqueId}/views/count").value />
<meta name="twitter:label3" value="Views">
<meta name="twitter:data3" value="${contentViews}">

For LinkedIn and Facebook :

<meta property='og:title' content="${page.context.message.subject} - ${community.title}"/>
<meta property="og:image" content="${asset.get("/html/assets/Khoros_Atlas_opengraph.png")}"/>
<meta property='og:description' content="<#attempt><#if page.context.message??>${utils.html.truncate(199, utils.html.stripper.from.gdata.strip(page.context.message.body), "…")?replace("\"", "'")}</#if><#recover>${community.title}</#attempt>" />
<meta property='og:url' content="https://community.khoros.com/" />

Thanks,

Abhishek Gupta

[allensmith81]

Thanks and were these put in the head for the page? I understand you set it up as a Boolean setting in SLE so you could choose summary cards or summary cards with large images on a per node basis correct?

Also how did you or did you turn off the out of the box implimentation?

@AbhishekGu 

[AbhishekGu]

Hello @allensmith81 ,

Opengraph metadata used to keep inside the head of the page. yes for the second question.

No, i didn't turn off the out of box implementation.

Thanks,

[AndyK]

One admin change we made was we cleared out the field in Admin -> Features -> Open Graph