Embed Open Graph Protocol into your concrete5 site

Permalink 2 users found helpful
Open Graph Protocol is very useful if you want the site visitor to share the link onto Facebook.

In short, this is meta data of your website for facebook.

When you share the link of your website on Facebook. Facebook tries to look for page title, website name, URL and thumbnail image.

If nothing is set, Facebook guess those properties.

However, if you've set them correctly, Facebook will display how you want.

For example, your site page title displays "site name :: page title". For google, you want this way. But for Facebook, you only want to display page title.

When you are sharing a link on the Wall od Facebook, it'll fetch the image on the page, and generate the thumbnail.

However, you may want to specify the particular image for facebook sharing.

This is why you want to use OGP.


I just finished implementing onto my website


When a user want to share any of the page in YokosoNews.com on Facebook, it will first fetch the information I want them to show.

Here is how... You need to know how to customize or make a theme file...

I was debating to use /elements/header_required.php but I ended up implementing within the theme file.

Here are the list of what you need to do.

- Create "thumbnail" page image file attribute
- Prepare a default image if any page couldn't deliver the thumbnail image
- For "og:type" value, check out the list & modify it accordinglyhttp://ogp.me/#types

Here is the code

global $c;
$YokosoTitle = $c->getCollectionName();
$YokosoDescription = $c->getCollectionDescription();
$YokosoPageThumbnaillfb = LibraryFileBlockController::getFile($c->getAttribute('thumbnail')->fID);
$YokosoPageThumbnailSrc = $YokosoPageThumbnaillfb->getURL();
if ($YokosoPageThumbnailSrc == BASE_URL . DIR_REL . '/files/') {
   $YokosoPageThumbnail= "Path to default image";
   } else if ($YokosoPageThumbnailSrc) {
   $YokosoPageThumbnail= $YokosoPageThumbnailSrc;
   } else {
   $YokosoPageThumbnail= "Path to default image";
<meta property="og:type" content="website" />

After reading the OGP specs.... I think concrete5 page attribute system can work really well with OGP.

View Replies:
katz515 replied on at Permalink Reply
Forgot to mention.

You place the code onto theme file within <head> tag.
katz515 replied on at Permalink Reply
Oh, I forgot to mention

You need to declare OGP in <html> tag like the following.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#" xml:lang="<?php echo LANGUAGE?>" lang="<?php echo LANGUAGE?>">

The sample also has Facebook's <fb> declaration.
andreyman3d2k replied on at Permalink Reply

This is a very helpful post, thanks!

Just wanted to clarify a few things (for dummies):

1. Why do all the lines of code start with Yokoso (ex: $YokosoTitle) - how does FB pick that up?

2. When you say to place the code into the "theme file", what is that, exactly?

3. When you say to declare the OGP in the <html> tag, where is that?

4. Can you explain about the og:type, and how that's assigned to the pages dynamically?

5. From reading the OGP documentation, I thought each page has to wind up with info in the <head> with this format:
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>

How does your code get that in there?

Many thanks for any info!

onetrickdog replied on at Permalink Reply
I agree. I need a little more explanation. I'm not sure what a theme file is or how to create one. Could we get answers to these questions?