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
Customize locale icons
Oct 29, 2024
By myq.

How to customize locale (language region) flags

Concrete CMS Caching Guide
Oct 16, 2024

An overview of types of caching in Concrete and considerations when using them.

Redirect all requests to HTTPS
Oct 9, 2024
By myq.

How to follow best practices for a secure web

Upgrade Concrete versions 9.3.1 and 9.3.2
Sep 10, 2024
By myq.

How to get past a bug in versions 9.3.1 and 9.3.2 that prevents upgrading the Concrete core through the Dashboard

How to use Composer with Marketplace extensions
Aug 22, 2024

Composer can be used to manage third-party extensions from the marketplace

Controlling Google Tag Manager Tags Based on Concrete CMS Edit Toolbar Visibility
Aug 13, 2024

This document provides a step-by-step guide on how to control the firing of Google Tag Manager (GTM) tags based on the visibility of the Concrete CMS edit toolbar. It explains how to create a custom JavaScript variable in GTM to detect whether the edit toolbar is present on a page and how to set up a trigger that ensures GTM tags only fire when the toolbar is not visible. This setup is particularly useful for developers and marketers who want to ensure that tracking and analytics tags are not activated during content editing sessions, thereby preserving the accuracy of data collected.

Improvements?

Let us know by posting here.