Automating Open Graph with PHP

By: Luringen Mentor For: ComputerMentor Published: 16 July, 2016 Modified: 16 July, 2016

Open graph is a way to optimize your social media presence trough specifying how your content is shown.

If you want more information on what it is and why it is beneficial for you to use it, you can read more about it on this article describing Open Graph

How to use this

It may look a little confusing at first. To make it easies I made it color coded. Just edit in the orange to fit your setup. The blue is the variables it gets assigned to.

The head of your website

This first one is a typical start on your website when you use PHP to automate Open Graph. If you take notice to the comment section you see what kind of <meta> tag they fill.

A typical start on a webpage

<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/WebPage">
<head>
<?php
/* Variables. Changes every page */

/* Canonical URL - <meta name="twitter:url"> - <meta property="og:url"> */
$pageUrl = "https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
/* /URL */
$pageIdentifier = $_SERVER['REQUEST_URI'];
/* <title> - <meta itemprop="name"> - <meta property="og:title"> */
$pageTitle = 'Webpage title. Try to keep 55ish characters. Max 60.';
/* <meta name="description"> - meta itemprop="description" - <meta name="twitter:description"> - <meta property="og:description"> */
$pageDescription = 'Description. Optimal is lenght is 150-160 characters.';
/* <meta name="keywords"> - meta name=""article:tag> */
$pageTags = 'Your tags. Spamming things not in your webpage only hurt your SEO. Keep it simple';
/* Open Graph Facebook and Google+ picture. 945x630px */
$pictureGoogleFace = 'Full adress for your picture with http:// or https';
/* Open Graph Twitter picture */
$pictureTwitter = 'Full address for your picture with http:// or https';
/* Published time */
$publishTime = '2016-06-24T22:45:00+01:00';
/* Modified time */
$publishModified = '2016-06-24T22:45:00+01:00';
/* OpenGraph type */
$pageType = 'article';
?>


<?php include("../includes/opengraph.php");?>
<title>
<?php echo $pageTitle; ?>
</title>
</head>
<body>
~Your content here~

Create a .php file to include

Create a .php file and include it in the .php webpage document. You can see it in the <?php include("../includes/opengraph.php");?> in the code snippet above.

The opengraph.php file to be included in head of your webpage

<link rel="canonical" href="<?php echo $pageUrl; ?>">
<meta name="description" content="<?php echo $pageDescription; ?>">
<meta name="keywords" content="<?php echo $pageTags; ?>">

<meta itemprop="name" content="<?php echo $pageTitle; ?>">
<meta itemprop="description" content="<?php echo $pageDescription; ?>">
<meta itemprop="image" content="<?php echo $pictureGoogleFace; ?>">
<link rel="author" href="https://plus.google.com/+YourGoogle+Page?rel=publisher" />

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@Twitter account publisher">
<meta name="twitter:title" content="<?php echo $pageTitle; ?>">
<meta name="twitter:description" content="<?php echo $pageDescription; ?>">
<meta name="twitter:creator" content="@MTwitter account creator">
<meta name="twitter:url" content="<?php echo $pageUrl; ?>">
 <meta name="twitter:image:src" content="<?php echo $pictureTwitter; ?>">

<meta property="og:title" content="<?php echo $pageTitle; ?>">
<meta property="og:type" content="<?php echo $pageType; ?>">
<meta property="og:url" content="<?php echo $pageUrl; ?>">
<meta property="og:image" content="<?php echo $pictureTwitter; ?>">
<meta property="og:image:width" content="945 - change if you have another size" />
<meta property="og:image:height" content="630 - change if you have another size" />
<meta property="og:description" content="<?php echo $pageDescription; ?>">
<meta property="og:site_name" content="ComputerMentor" />
<meta property="article:published_time" content="<?php echo $publishTime; ?>">
<meta property="article:modified_time" content="<?php echo $publishModified; ?>">
<meta property="article:publisher" content="https://www.facebook.com/computermentor/" />
<meta property="article:author" content="https://www.facebook.com/computermentor" />
<meta property="article:tag" content="<?php echo $pageTags; ?>">
<meta property="fb:app_id" content="Your FB App ID" />

<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120-precomposed.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152-precomposed.png" />
<link rel="icon" href ="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" />
<link rel="stylesheet" type="text/css" href="/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

How this works

Now you can copy the head of your webpage document for every page you want to use open graph on, and you only need to change 7 variables for it to take effect. The opengraph.php file stay unchanged.

$pageType can be changed to alot of tags like games, tv show, tv serie, restaurant and alot more. You can find them at Facebook dev page. If you do change it, it may need additional tags. It would be smart to create a separate .php file you call instead of opengraph.php. I use article on pages like this one, and website on front page and index pages.

Facebook app ID

You will need a Facebook App ID for this to work. It is done with these simple steps:

Go to Developer tab and click on it.
Then go to Website Option.
Enter the app name which you have want.
Click on Create Facebook App.
After this you have to choose category, you can choose App for Pages.
Your AppId and Appkey is created automatically.

Hope you learned something!
If you find any typos, got questions or just want to say hi, please do so in the comment section below :) Dont forget to like and share