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
Using the Concrete Migration Tool Addon
Apr 27, 2023

How to use the Concrete CMS Migration Tool

How To Add Page Last Updated To Your Concrete CMS Pages
Mar 7, 2023

Concrete CMS has a page attribute you can add to a global area called "Page Date Modified." Here's how to add it

How To Exclude Subpages from Navigation
Dec 24, 2022

How to exclude subpages from navigation - useful for a news or blog link in your main navigation where you don't want all the subpages to appear in a drop down menu.

How Can I Change The Maximum Size Of Uploaded files
Dec 13, 2022

This tutorial explains how to update your php settings.

Updating Concrete Themes from Version 8 to Version 9
Nov 24, 2022

This tutorial covers commonly encountered issues when upgrading a Concrete CMS theme from version 8 to version 9

Transferring ownership of an add-on and a theme
Nov 15, 2022
By katzueno.

If you encounter a Concrete CMS add-on or theme that you love but not being maintained, you may want to ask the author to help or take over the add-on or theme. Here is the quick step-by-step guide of how to transfer the ownership.

Was this information useful?
Thank you for your feedback.