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,

  • 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