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 } ?>

Who are we?

We are a digital agency specialising in Web Design, Development, Concrete5 and digital marketing, based in London & West Sussex.

We make digital simple. Our purpose is to simplify your frustrations in digital and solve the challenges you face to help make you more money and progressively grow your business or organisation.

Tell me more

Keep up to date

May special offer...

FREE hosting in year one

We'll give you FREE hosting when you buy a website from us. The hosting includes full 24x7 UK support, FREE SSL cert, FREE domain, daily backups and is optimised for high levels of speed and security. Worth up to £480 a year!

Tell me more
Call us