Add Open Graph tags to your Concrete5 site for social media

With some simple coding, we can generate Open Graph tags automatically, so you can set it and forget it!

What are Opengraph tags?

Open Graph is a protocol that interacts with Facebook and allows us to control what content appears when someone shares our page on Facebook.

By controlling how our content gets shared on Facebook,  we can influence how well our content performs when shared via social media.

How to Add Dynamic Open Graph tags in Concrete5

The following code will add Open Graph tags for new pages of the "Article" pagetype and dynamically grab all the details such as article name, url, image url and image information such as width and height.

It uses the article title for the alt attribute, but you could change that if you have set your images alt attributes.

Note, this was developed for Concrete5 v5.6, it may need some tweaks for 5.7/8:

        <?php
        // Open Graph for articles
        $pageType = $c->getCollectionTypeHandle();
        
        if($pageType === "article") {
            $url = 'https://' . $_SERVER['HTTP_HOST'] . $c->getCollectionPath();
            $title = $c->getCollectionName();
            $desc = $c->getCollectionDescription();
            $ih = Loader::helper('image');
            $thumbnail = $c->getAttribute('featured');
            if($thumbnail) {
                $imageUrl = 'https://' . $_SERVER['HTTP_HOST'] . $ih->getThumbnail($c->getAttribute('featured'), 1200, 600)->src;
            }
            else {
                $imageUrl = "";
            }
        ?>
        <meta property="og:type" content="article" /> 
        <meta property="og:url" content="<?php echo $url ?>" /> 
        <meta property="og:title" content="<?php echo $title ?>" /> 
        <meta property="og:description" content="<?php echo $desc ?>" /> 
        <meta property="og:image" content="<?php echo $imageUrl ?>" /> 
        <meta property="og:image:type" content="image/<?php echo strtolower($thumbnail->getType()) ?>" />
        <meta property="og:image:width" content="<?php echo $thumbnail->getAttribute('width') ?>" /> 
        <meta property="og:image:height" content="<?php echo $thumbnail->getAttribute('height') ?>" /> 
        <meta property="og:image:alt" content="<?php echo $title ?>" />
        <?php } ?>

Article by David Reeder. LinkedIn Profile: https://www.linkedin.com/in/david-e-reeder/