With a few changes to your header file you can make sharing your web pages a whole lot better on your concrete 5 website. Facebook uses a protocol called opengraph to determine what information is displayed to the person's stream, and you can control how that is set from the metadata of your page. Keep reading to find out exactly how.

I'm writing this working with concrete 5.4.2.2, so you may need to adjust slightly to match the actual code in your header file if you are using a different version of concrete 5. I thought about making this into a package then realized that I would need to make a version to work with every version of concrete 5 and that didn't sound like a lot of fun to test. So I think a tutorial works - if you are a developer looking to put the fine detail finish on your websites you will probably create your own copy of the header_required.php and copy it from project to project. That's what I do. If you are a site owner you'd need to do this or hire someone to do this each time there is an update to concrete 5.

Please note that the code samples here are messed up a little bit, they add ' print(" ' at the beginning and ' "); ' at the end. Please view the tutorial on my website if you want to actually copy paste a little better, or read it without the extra code included.

The first thing you're going to need to do to get started is to override your 'header_required' file. Copy it from /concrete/elements/header_required.php to /elements/header_required.php. Look for the 'if (is_object($c){' call at the top of the file. Change it from this:

if (is_object($c)) {
$pageTitle = (!$pageTitle) ? $c->getCollectionName() : $pageTitle;
$pageDescription = (!$pageDescription) ? $c->getCollectionDescription() : $pageDescription;
$cID = $c->getCollectionID();
$isEditMode = ($c->isEditMode()) ? "true" : "false";
$isArrangeMode = ($c->isArrangeMode()) ? "true" : "false";

} else {
$cID = 1;
}

to this:

if (is_object($c)) {
$pageTitle = (!$pageTitle) ? $c->getCollectionName() : $pageTitle;
$pageDescription = (!$pageDescription) ? $c->getCollectionDescription() : $pageDescription;
$cID = $c->getCollectionID();
$isEditMode = ($c->isEditMode()) ? "true" : "false";
$isArrangeMode = ($c->isArrangeMode()) ? "true" : "false";
$nav = Loader::helper('navigation');
$og_url = $nav->getLinkToCollection($c, true);
} else {
$cID = 1;
}

We're defining the sharing url here, to output later. This will be used by facebook when it indexes and caches your content, so you want to make sure it's defined. This way even if you have a page alias or if you have ?cID=## style links you can still define a pretty link to your page.

After this we're going to want to define the sharing image. Add a collection attribute of type image/file called "Sharing Image" with the handle "sharing_image." Scroll down a little further in the file and look for where it defines the attributes for meta title, description and keyword, add this after to define the value of the sharing image:

$akk = $c->getCollectionAttributeValue('meta_keywords');
$akpp = $c->getCollectionAttributeValue('sharing_image');
$home = Page::getByID(HOME_CID);
$akhpp = $home->getCollectionAttributeValue('sharing_image');

if ($akpp) {
$sharing_image = $akpp;
} else {
$sharing_image = $akhpp;
}

First we check the value for the current page, then we check the value for the home page. If there's nothing defined for the current page, then we inherit from the home page. This means that the home page sharing image must be defined. This will be the main 'fallback' image for your site, so it should be something like your corporate logo or something. Keep in mind that it will be in a small square box when shared, so keep your proportions even.

Next we want to define the title for sharing. Look for the part saying if $(akt) and change it from this:

if ($akt) {
$pageTitle = $akt;
?><title><?php echo htmlspecialchars($akt, ENT_COMPAT, APP_CHARSET)?></title>
<?php } else {
$pageTitle = htmlspecialchars($pageTitle, ENT_COMPAT, APP_CHARSET);
?><title><?php echo sprintf(PAGE_TITLE_FORMAT, SITE, $pageTitle)?></title>
<?php }

to this:

if ($akt) {
$pageTitle = $akt;
?><title><?php echo htmlspecialchars($akt, ENT_COMPAT, APP_CHARSET)?></title>
<meta property="og:title" content="<?php echo htmlspecialchars($akt, ENT_COMPAT, APP_CHARSET) ?>" />
<?php } else {
$pageTitle = htmlspecialchars($pageTitle, ENT_COMPAT, APP_CHARSET);
?><title><?php echo sprintf(PAGE_TITLE_FORMAT, SITE, $pageTitle)?></title>
<meta property="og:title" content="<?php echo sprintf(PAGE_TITLE_FORMAT, SITE, $pageTitle) ?>" />
<? }

After this we do the same thing with description. Change this:

if ($akd) { ?>
<meta name="description" content="<?php echo htmlspecialchars($akd, ENT_COMPAT, APP_CHARSET)?>" />
<?php } else { ?>
<meta name="description" content="<?php echo htmlspecialchars($pageDescription, ENT_COMPAT, APP_CHARSET)?>" />
<?php }

to this:

if ($akd) { ?>
<meta name="description" content="<?=htmlspecialchars($akd, ENT_COMPAT, APP_CHARSET)?>" />
<meta property="og:description" content="<?php echo htmlspecialchars($akd, ENT_COMPAT, APP_CHARSET) ?>" />
<?php } else { ?>
<meta name="description" content="<?=htmlspecialchars($pageDescription, ENT_COMPAT, APP_CHARSET)?>" />
<meta property="og:description" content="<?php echo htmlspecialchars($pageDescription, ENT_COMPAT, APP_CHARSET) ?>" />
<?php }

Open graph doesn't have the notion of keywords, so leave that portion of the document untouched. Next up the file checks to see if the page is added to the search index, we don't want to change this either. Look for the closing php tag after that if statement, and then add in the following after. It should look something like this:

if($c->getCollectionAttributeValue('exclude_search_index')) { ?>
<meta name="robots" contents="noindex" />
<?php } ?>

<meta property="og:url" content="<?php echo $og_url ?>"/>
<?php if (isset ($sharing_image)){?>
<link rel="image_src" href="<?php echo($sharing_image->getVersion()->getURL()) ?>" />
<meta property="og:image" content="<?php echo($sharing_image->getVersion()->getURL()) ?>" />
<?php } ?>
<meta property="og:site_name" content="<?php echo SITE;?>" />

Here we've actually output the url for the sharing image and set the link rel="image_src" for other search engines that support it. We've also output the url we defined at the top of the file. To show which site this is from, we've also defined the site name as well.

And that's really all the more there is to it. You should be able to share your pages to facebook now and see the information from your metadata fields properly defined to the title and description. The thumbnail you define for the page will be used as the thumbnail image, and the site name and url will be defined exactly as you specify.

There's one attribute in the opengraph protocol that we're not using here, and that's 'type.' You could set up a select attribute type for this and add in the list of supported types as options, then output the value for that to another og:type meta tag if you wanted, I haven't really had the need to get that detailed in any projects that I've done so I haven't gotten into it.