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.
http://ogp.me/
I just finished implementing onto my website
http://yokosonews.com/
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
After reading the OGP specs.... I think concrete5 page attribute system can work really well with OGP.
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.
http://ogp.me/
I just finished implementing onto my website
http://yokosonews.com/
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
<?php 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" />
Viewing 15 lines of 19 lines. View entire code block.
After reading the OGP specs.... I think concrete5 page attribute system can work really well with OGP.
Oh, I forgot to mention
You need to declare OGP in <html> tag like the following.
The sample also has Facebook's <fb> declaration.
You need to declare OGP in <html> tag like the following.
The sample also has Facebook's <fb> declaration.
Hi,
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"/>
etc...
How does your code get that in there?
Many thanks for any info!
Andrey
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"/>
etc...
How does your code get that in there?
Many thanks for any info!
Andrey
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?
You place the code onto theme file within <head> tag.