Adding OpenGraph tags to your theme or site

This is a community-contributed tutorial. This tutorial is over a year old and may not apply to your version of Concrete CMS.
Feb 22, 2017

The following code will help you site when you are shareing your site on facebook and twitter.

Place this code in the header of everypage.

My theme uses a include called head.php in the elements folder. By adding the following code you will get different infomation for each page.

    <?php
    $siteName = Config::get('concrete.site'); //Gets Name of the site
    $page = Page::getCurrentPage(); 
    $title = $page->getCollectionName(); //Gets the title of the page
    $description = $page->getCollectionAttributeValue('meta_description'); //Gets the meta description of the page
    $url = $page->getCollectionLink();//Gets the URL of the page
    ?>


    <!-- Open Graph -->
    <!-- This is facebooks default app ID, it stops facebook showing errors in the debugger below -->
    <meta property="fb:app_id" content="966242223397117" />
    <meta property="og:site_name" content="<?php echo $siteName  ?>"/>
    <meta property="og:title" content="<?php echo $title ?>"/>
    <meta property="og:description" content="<?php echo $description ?>"/>
    <meta property="og:url" content="<?php echo  $url ?>"/>


    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="<?php echo $siteName ?>" />
    <meta name="twitter:description" content="<?php echo $description ?>" />
    <meta name="twitter:url" content="<?php echo  $url ?>" />
    <!-- You make an iamge and upload on your site which will always so for facebook and twitter when your page is shared. -->
    <meta property="og:image" content="http://www.yoursite.com/images/facebookimage.jpg"/>
    <meta name="twitter:image" content="http://www.yoursite.com/images/twitterimage.jpg" />

You can now test your code and see what results you get. For Facebook: https://developers.facebook.com/tools/debug/og/object/

Click the "Fetch new scrape information" button

For Twitter https://cards-dev.twitter.com/validator

I have expanded on this code to add images for each page, which i will try and update soon.

Recent Tutorials
Create custom Site Health tasks
Apr 19, 2024
By myq.

This tutorial will guide you through the creation of a new Site Health task

Reusing the same Express entity in multiple associations
Apr 11, 2024
By myq.

How to create and manage multiple associations in Express

Express Form Styling
Apr 11, 2024
By myq.

Different ways to style Express forms

Setting addon/theme version compatibility in the marketplace
Jan 9, 2024

For developers worn out with setting the latest addon or theme version manually across too many core versions, here is a JavaScript bookmarklet to do it for you.

How to get the locale of a page
Jan 8, 2024
By wtfdesign.

Now, why don't we just have a getLocale() method on Page objects beats me, but here's how you work around it

Using a Redis Server
Jun 16, 2023
By mlocati.

How to configure Concrete to use one or more Redis servers to persist the cache.

Improvements?

Let us know by posting here.