Forum Discussion

peterlu's avatar
peterlu
Champion
10 years ago

code snippet for social meta tags (open graph and twitter)

Hi All,

 

I am thinking sharing these codes that I have been using for ages. I hope it can help someone.

 

<#if page.name == "CommunityPage">
<meta property="og:title" content="${coreNode.title?html}"/>
<meta property="og:description" content="Making it easier to join the conversation, get help, and share your thoughts."/>
<#elseif page.name == "ForumTopicPage">
<meta property="og:title" content="${page.context.thread.topicMessage.subject?html} - ${community.title?html}"/>
<meta property="og:description" content="I found this useful post on XXX Forum"/>
</#if>

<meta property="og:image" content="${asset.get("/html/assets/community-icon.png")}"/>
<meta property="og:site_name" content="${community.title?html}"/>
<meta property="og:type" content="website"/>

<meta name="twitter:card" content="summary"/>
<meta name="twitter:image" content="${asset.get("/html/assets/community-icon.png")}"/>
  • PaoloT's avatar
    PaoloT
    10 years ago

    Hi peterlu

     

    thanks for sharing. For information, if using the above (or similar custom tags) ode make sure that the Lithium Opengraph configuration is turned off (see more here), to avoid conflicting tags on the pages.

     

    Cheers,

5 Replies

Sort By
  • PaoloT's avatar
    PaoloT
    Lithium Alumni (Retired)
    10 years ago

    Hi peterlu

     

    thanks for sharing. For information, if using the above (or similar custom tags) ode make sure that the Lithium Opengraph configuration is turned off (see more here), to avoid conflicting tags on the pages.

     

    Cheers,

  • Juulia's avatar
    Juulia
    Contributor
    8 years ago

    Hi PaoloT

    does this code snippet for OG meta tag still work? Since July it's not possible to change the headline, body text and image that appeared in the News Feed preview on Facebook. To get Facebook optimized posts we need OG meta tags for our blog posts published on our community.

     

    Cheers,

    Juulia

     

     

  • PaoloT's avatar
    PaoloT
    Lithium Alumni (Retired)
    8 years ago

    Hi Juulia

    if you have noticed a change since recently - that might be a bug one of the recent releases, or a change in configuration. My suggestion is to raise this with our Support department so that they can investigate and help you in setting it up correctly, or flagging it to the relevant Lithium team.

     

    Kind Regards,

  • miles's avatar
    miles
    Director
    8 years ago

    Does anyone know if there's a way to dynamically control or overirde the image used in the twitter card image tag?

     

    For instance, rather than specifying a single image that displays in the card for all pages, I want to try and use the cover image for a topic to drive the image shown in the twitter card. 

     

    Something like:

    <meta name="twitter:image" content=" <variable that pulls in cover image for page in question, if it exists!> "/>

  • peterlu's avatar
    peterlu
    Champion
    8 years ago
    miles you can use API v2 to get the message cover photo

    SELECT cover_image FROM messages WHERE id = '${page.context.thread.topicMessage. uniqueId}'

    And you need to add some <#if logic just in case the cover_image is empty