Page 1 of 1

Open Graph protocol

PostPosted: Tue Jan 15, 2013 12:51 pm
by marcotics
Has anyone been able to include the Open Graph protocol tags in their template? I've tried but it makes my page go blank/white. I was suggested to add these tags as they would improve Social traffic/indexing, but it ruins the lay-out.

Re: Open Graph protocol

PostPosted: Fri Jan 18, 2013 1:31 am
by jondaley
You probably need {literal} tags to make smarty not try to interpret the tags. I'm guessing that is the problem. If you post the code you are pasting in, that will help me figure it out as well.

Re: Open Graph protocol

PostPosted: Fri Jan 18, 2013 7:14 pm
by marcotics
{literal} works and would be a solution if i didn't need smarty to fill in some details for me, as you can see in my code:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$locale->getLanguageId()}" lang="{$locale->getLanguageId()}" dir="{$locale->getDirection()}" prefix="og: http://ogp.me/ns/website#">

<head>
<title>{$pageTitle|escape:"html"}</title>

<meta http-equiv="Content-Type" content="text/html;charset={$locale->getCharset()}" />
<meta name="generator" content="{$version}" />
<meta http-equiv="Content-Language" content="{$locale->getLanguageId()}" />

<link rel="stylesheet" type="text/css" media="screen" href="{$url->getTemplateFile("style.css")}" title="Spollo" />
<link rel="shortcut icon" type="image/x-icon" href="{$url->getTemplateFile("imgs/favicon.ico")}" />

<link rel="alternate" type="text/xml" title="RSS 2.0" href="{$url->rssLink("rss20")}" />
<link rel="alternate" type="text/xml" title="RSS 1.0" href="{$url->rssLink("rss10")}" />
<link rel="alternate" type="text/xml" title="RSS 0.90" href="{$url->rssLink("rss090")}" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="{$url->rssLink("atom")}" />

<meta property="og:title" content="{$pageTitle|escape:"html"}" />
<meta property="og:type" content="website" />
{if $OnMainPage}
<meta property="og:url" content="{$url->postPermalink($post)}" />
{else}
<meta property="og:url" content="{$url->postPermalink($post)}" />
{/if}
<meta property="og:image" content="http://www.marcotics.nl/siteicon.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="181" />
<meta property="og:image:height" content="182" />
<meta property="og:locale" content="nl_NL" />
<meta property="og:site_name" content="Marcotics.nl" />


Added are the <html ...prefix> and the last few lines of <meta property> code

Re: Open Graph protocol

PostPosted: Mon Jan 21, 2013 12:02 pm
by jondaley
Hrm - that should be fine. You shouldn't need the literal stuff.

What error do you get in the apache logs?

You could try adding the lines one at a time to see which one causes the problem.

Re: Open Graph protocol

PostPosted: Mon Jan 21, 2013 4:40 pm
by marcotics
I don't think i have acces to those logs. I'll try adding them one at a time, see what happens.
jondaley wrote:Hrm - that should be fine. You shouldn't need the literal stuff.

What error do you get in the apache logs?

You could try adding the lines one at a time to see which one causes the problem.


The problem seems to be a coding error i made. The blank page was only shown on the main page, i never noticed that. Looking at the code it makes sense, there is no postPermalink($post) on the main page.
The code should be.
Code: Select all
{if $OnMainPage}
<meta property="og:url" content="{$url->blogLink()}" />
{else}
<meta property="og:url" content="{$url->postPermalink($post)}" />
{/if}


For those interested, i'll post the complete code later, wich i think should work.

Re: Open Graph protocol

PostPosted: Mon Jan 21, 2013 5:38 pm
by marcotics
Edited 22 Januari 2013: Let LifeType select the locale
So, the code as i implemented it, line by line. A lot of lines depend on what kind of blog you're running, but this should help you get started. More details are on the ogp.me official site.
I added all these changes to header.template

The first thing is an alteration of the <head> tag. In my case it was a rather long tag, so i added it on the end, like this:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$locale->getLanguageId()}" lang="{$locale->getLanguageId()}" dir="{$locale->getDirection()}" prefix="og: http://ogp.me/ns/website#">

After that it are just a few <meta> tags. Since you probably allready have some of those tags, you can just add them behind the excisting meta tags.
The first four are required!

Works like the <title> tag, in this case it fetches the data from the <title> tag, as created by Lifetype.
Code: Select all
<meta property="og:title" content="{$pageTitle|escape:"html"}" />


Specifies what type of page it is. In this case i've set it as website, but if you run a audioblog or videoblog, this can be set to different thing. I suggest you read the ogp.me pages about these.
Code: Select all
<meta property="og:type" content="website" />


This one was a bit tricky. This tag defines the permanent url to the page. So what better than to let Lifetype create this url and enter it in this tag?
The first bit is only entered by Lifetype when on the main page of a blog. In this case the permanent URL is a link to this page, say http://www.yourpage.com/blog/1, depending on your settings.
When on a page with the full post, and the comment form if you use comments, the second bit of code is used, and the URL is specified as the URL of this current post, say http://www.yourpage.com/blog/1/100, depending on your settings.
Code: Select all
{if $OnMainPage}
<meta property="og:url" content="{$url->blogLink()}" />
{else}
<meta property="og:url" content="{$url->postPermalink($post)}" />
{/if}


An image URL which should represent your object within the graph. This could be a static one, as it is in my case, but if you have a movieblog this could be a dynamic one. You'll have to figure out yourself how to implent this, as i don't use it and don't know how.
Code: Select all
<meta property="og:image" content="http://www.yourpage.com/siteicon.png" />



The following bits of code are not required, but i use them anyway. The following three apply to the image you've just set, and provide a little more information: first the MIME type for this image, then the number of pixels it is wide followd by the number of pixels it is high.
Code: Select all
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="181" />
<meta property="og:image:height" content="182" />


The next one is the locale these tags are marked up in. Of the format language_TERRITORY. Default is en_US. Since Lifetype uses the same standard, we let Lifetype insert this.
Code: Select all
<meta property="og:locale" content="{$locale->getLocaleCode()}" />


If your object is part of a larger web site, you might want to specify the next one, the name which should be displayed for the overall site.
Code: Select all
<meta property="og:site_name" content="YourPage" />


There are a lot of extra tags and options depending on the type of blog, so once again i urge you to check out the ogp.me original site.

Re: Open Graph protocol

PostPosted: Tue Jan 22, 2013 2:29 pm
by jondaley
Looks good, thank you for the write-up.

One change you should probably make is to use the locale object, rather than hard-coding the locale:
Code: Select all
  <meta property="og:locale" content="{$locale->getLocaleCode()}" />

Re: Open Graph protocol

PostPosted: Tue Jan 22, 2013 4:03 pm
by marcotics
jondaley wrote:Looks good, thank you for the write-up.

One change you should probably make is to use the locale object, rather than hard-coding the locale:
Code: Select all
  <meta property="og:locale" content="{$locale->getLocaleCode()}" />


Great idea, i edited my code and the write-up accordingly :)