Yep, that’s right… yet another social media plug-on for Zen Cart. This one, automatically generates Open Graph Tags in your header. As well all know Open Graph is supposed to be a way of the future. Some people even projecting that it will change the way we use the web. Well Im not sure about that, however, not to be left in the past I created this little bit of script for everyone’s favorite e-commerce solution.
This little bit of code allows you to integrate the new Facebook Open Social Graph API into your store’s header info.
The following code goes in your html_header.php file located in your: includes/templates/YOUR_TEMPLATE_NAME/common/ directory right under the title tags. Which should be around line 25 and look like this:
<title><?php echo META_TAG_TITLE; ?></title>
And this gets pasted under it:
<?php
################ start of AutoOpenGraph ###################
$store_name = "Htmyell"; //e.g. "Samanthas Power Tools", or "Gus' China Shop".
$store_url = "https://www.htmyell.com"; //url to your store (no trailing '/')
$product_type = "product"; //type of product you're selling (see tutorial)
$use_addr = 0; //use address? if yes, set $use_addr = 1; (no quotes). edit lines 31-34.
$use_email = 0; //use email address? if yes, set $use_email = 1; (no quotes) edit line 37.
$use_phone = 0; //use phone number? if yes, set $use_phone = 1; (no quotes) edit line 40.
//if $use_addr is set to 1;
$street = "123 Main St"; //change to your street address.
$city = "Richmond"; //your city
$state = "VA"; //Your State. Facebook exaple uses abbreviation.
$zip = "23220"; //you're zip/postal code.
$country = "USA"; //your country. Facebook example uses acronym.
//if $use_email is set to 1;
$email_address = "yourEmail@yoursite.com"; // your email
//if use_phone is set to 1
$phone_number = "+1-800-555-1234"; //format: +country code - area code - number.
//no need to edit below this line:
extract($product_info_metatags->fields);
extract($category_metatags->fields);
$prod_url = "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
//get defined image or default
$myImage= zen_get_products_image((int)$_GET['products_id']);
$img = simplexml_load_string($myImage);
$img = $img['src'];
if($this_is_home_page){ $depends = $store_name; $product_type = "website"; }
else if ($categories_name){ $depends = $categories_name; $product_type = "website"; }
else if ($products_name){ $depends = $products_name; }
else { $depends = META_TAG_TITLE; $product_type = "website"; }
//print_r($product_info_metatags);
################# end of AutoOpenGraph ####################
?>
<!-- start of AutoOpenGraph tags -->
<meta property="og:title" content="<?php echo $depends; ?>" />
<meta property="og:type" content="<?php echo $product_type; ?>" />
<meta property="og:url" content="<?php echo $prod_url; ?>" />
<meta property="og:image" content="<?php echo $store_url . '/' . $img; ?>" />
<meta property="og:description" content="<?php echo META_TAG_DESCRIPTION; ?>" />
<meta property="og:site_name" content="<?php echo $store_name; ?>" />
<?php
if($use_addr){
echo '<meta property="og:street-address" content="'.$street.'" />'."\n";
echo '<meta property="og:locality" content="'.$city.'" />'."\n";
echo '<meta property="og:region" content="'.$state.'" />'."\n";
echo '<meta property="og:postal-code" content="'.$zip.'" />'."\n";
echo '<meta property="og:country-name" content="'.$country.'" />'."\n";
}
if($use_email){
echo '<meta property="og:email" content="'.$email_address.'" />'."\n";
}
if($use_phone){
echo '<meta property="og:phone_number" content="'.$phone_number.'" />'."\n";
}
?>Configuration
Obviously you’re going to want to configure this a bit. Here’s how:
- on the first line you’re going to want to change $store_name to the name of your store.
- $store_url should be the http path to your store (e.g. http://www.mystore.com) with no trailing ‘/’slash.
- $product_type will usually be left alone it’s used for Facebook’s own categorizing purposes. However you can see what categories you’re allowed to use @ http://opengraphprotocol.org/#types.
- $use_addr, $use_email, and $use_phone are set to 0 by default (this means they’re off) however if you’d like to turn them on, set them to 1. So if you wanted to have your email address used by Facebook you’d set $use_email = 1; then edit the section that says “if email is set to 1” with your personal information. Do this for any of the info you change to 1. Otherwise just leave the info alone. There is no need to delete it as it wont be executed unless set to 1.
For the image sent to facebook, the script is set up to use your product’s main image. However if someone tries to share your home page (or any page that isn’t a product page) the script will search for a product image and upon not finding one will use your zen cart default no product image. Due to this, I recomend changing the default no_image.gif to your companie’s logo. In your zen cart admin go to Configuration -> Images -> Product Image – No image picture, and change it to an image of your company’s logo.