I’ve just released an update to autoFacebook 2. I know it’s been awhile and it’s not so much an update as it is just updated video instructions. I also go over enabling automatic facebook posts on update as well as new products, adding an icon to your app so that it displays on your page’s feed, and enabling different forms of currency. If you need help feel free to comment, or go to http://www.zen-cart.com/forum/showthread.php?t=153528

What’s new:

  • Slightly updated code
  • Video install instructions

License:

  • This Zen Cart modification is licensed under the GNU General Public License: http://www.gnu.org/licenses/gpl-3.0.txt

Download: 

After spending the better part of a work day trying to figure out how to set it up so that modules could be positioned throughout my theme in more places than the default “content top,” “content_bottom,”  “right,” “left,” etc. and after rubbing away the Z on my keyboard. I managed to get my module and theme to behave as intended. This article will explain how.

What you should know:

  • I should start by saying that I am by no means an OpenCart expert. In fact, This is on my third day every using OpenCart. As such, I have no idea if this works with 1.5.1 or older versions of the platform.
  • The changes in this tutorial are made to files that might be overwritten with upgrades or make future updates more difficult. You may be able to include all catalog files into your custom theme folder, however… I have not tested this theory.
  • This is a relatively exhaustive process that much be done to every module for every new position you wish to add. (though it gets easier once you get the hang of it).
  • This tutorial only adds positioning to the “Home” layout. I would assume to add it to other layouts you would just need to edit the corresponding template files (below) but there I go assuming again.

Getting Started:

I started by downloading and installing Hildebrando’s Free Youtube Video module for OpenCart v1.5.1.1. I chose this mod mainly because it was highly rated and didn’t involve too much back-end functionality. I assume you could modify any module similarly, however we all know that they say about assumption. If you’re unsure I would get the feel of HildeBrando’s version first so as not to waste your time.

Adding Positions in Admin:

First, you need to open the module’s language file located in; /admin/language/english/module/ and add your new position. For this tutorial we’re going to be adding a new position called: Content Middle.

$_['text_content_middle']       = 'Content Middle';

Second, you need to open your module’s admin template file located in; /admin/view/template/module/ and add a new “if position is set” statement at around line 50.

<?php if ($module['position'] == 'content_middle') { ?>
<option value="content_middle" selected="selected"><?php echo $text_content_middle; ?></option>
<?php } else { ?>
<option value="content_middle"><?php echo $text_content_middle; ?></option>
 <?php } ?>

and in the same file add the option to the javascript function at around line 140:

    html += '      <option value="content_middle"><?php echo $text_content_middle; ?></option>';

Third, you need to open the module’s controller file located in; /admin/controller/module/ and add a new line anywhere around like 35.

$this->data['text_content_middle'] = $this->language->get('text_content_middle');

You should now be able to see the new position in your modules settings. Also make sure the module’s layout is set to “Home.”

Adding Positions to Your Template:

First, you must add the position to the array located in; /catalog/controller/common/home.php around line 20.

'common/content_middle',

Second, you’ll need to create the corresponding PHP file in /catalog/controller/common/ (for example: “content_middle.php”). Add the following code, pay attention to lines 2, 50, 79, 80, and 82) as will need to reflect your position’s name:

<?php
class ControllerCommonHomeOne extends Controller {
	public function index() {
		$this->load->model('design/layout');
		$this->load->model('catalog/category');
		$this->load->model('catalog/product');
		$this->load->model('catalog/information');

		if (isset($this->request->get['route'])) {
			$route = $this->request->get['route'];
		} else {
			$route = 'common/home';
		}

		$layout_id = 0;

		if (substr($route, 0, 16) == 'product/category' && isset($this->request->get['path'])) {
			$path = explode('_', (string)$this->request->get['path']);

			$layout_id = $this->model_catalog_category->getCategoryLayoutId(end($path));
		}

		if (substr($route, 0, 15) == 'product/product' && isset($this->request->get['product_id'])) {
			$layout_id = $this->model_catalog_product->getProductLayoutId($this->request->get['product_id']);
		}

		if (substr($route, 0, 23) == 'information/information' && isset($this->request->get['information_id'])) {
			$layout_id = $this->model_catalog_information->getInformationLayoutId($this->request->get['information_id']);
		}

		if (!$layout_id) {
			$layout_id = $this->model_design_layout->getLayout($route);
		}

		if (!$layout_id) {
			$layout_id = $this->config->get('config_layout_id');
		}

		$module_data = array();

		$this->load->model('setting/extension');

		$extensions = $this->model_setting_extension->getExtensions('module');

		foreach ($extensions as $extension) {
			$modules = $this->config->get($extension['code'] . '_module');

			if ($modules) {
				foreach ($modules as $module) {
					if ($module['layout_id'] == $layout_id && $module['position'] == 'home_one' && $module['status']) {
						$module_data[] = array(
							'code'       => $extension['code'],
							'setting'    => $module,
							'sort_order' => $module['sort_order']
						);
					}
				}
			}
		}

		$sort_order = array();

		foreach ($module_data as $key => $value) {
      		$sort_order[$key] = $value['sort_order'];
    	}

		array_multisort($sort_order, SORT_ASC, $module_data);

		$this->data['modules'] = array();

		foreach ($module_data as $module) {
			$module = $this->getChild('module/' . $module['code'], $module['setting']);

			if ($module) {
				$this->data['modules'][] = $module;
			}
		}

		if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/common/home_one.tpl')) {
			$this->template = $this->config->get('config_template') . '/template/common/home_one.tpl';
		} else {
			$this->template = 'default/template/common/home_one.tpl';
		}

		$this->render();
	}
}
?>

Third, create the corresponding TPL file in /view/theme/your-theme/template/common/ (for example: “content_middle.tpl”). Add the following code:

<?php foreach ($modules as $module) { ?>
<?php echo $module; ?>
<?php } ?>

Now you can call your insert your position anywhere in your theme’s home.tpl file by calling

<?php echo $content_middle; ?>

Now, any modules you assign to Content Middle will appear here in your theme.

Well that’s it, I hope it helped. It’s definitely not the most straight forward thing in the world but after a while it does start to make sense. I do feel like there’s plenty of opportunity to improve, but even still, OpenCart is the cleanest eCommerce solution I’ve worked with.

If this tutorial has helped you, if you have any questions, or know a better way, please don’t hesitate to leave a comment.

autoFacebook Lite

By: Jamie Taylor
Htmyell.com


Don’t let the name fool you, this is perhaps the most robust version of autoFacebook yet. Just see the new features below. autoFacebook Lite is a facebook application you simply install to your facebook store page, edit one line of code, and your off and running.autoFacebook lite was started for people who had problems installing my “heavier” autoFacebook 2.0, but because it’s a hosted app, it offers more advantages. Like easier install, few errors, quicker fixes, and automatic updates.

For more info check out the facebook page at: http://www.facebook.com/apps/application.php?id=134663346580107

What’s New:

  • Added super simple installation!!!
  • Added multipage support!!!
  • Added full currency support for Dollar, Pound, and Euro as well as the ability to not user a money sign!!!
  • Fixed problem with product descriptions not being added to page
  • Added Zen Cart integrated error and status alerts.
  • Added more error checking.
  • Removed need for JSON support.

Requirements:

License:

This Zen Cart modification is licensed under the GNU General Public License: http://www.gnu.org/licenses/gpl-3.0.txt

Getting Help:

Help is available via the Zen Cart forums @ http://www.zen-cart.com/forum/showthread.php?t=153528 or at http://htmyell.com/autofacebook-2-0


Installation:

1. Go to http://apps.facebook.com/storeupdater, to install the autoFacebook Lite app.

2. Fill in your infomation, and select your page to see a preview of how the listing will look on your page.

3. After clicking submit, you will your page’s page Id.

4. Copy and paste that number into line 91 of the included update_product.php, save, and upload the file to your server’s admin/includes/modules folder


For more info and to give feedback check the forums.

Hope ya like it

Download Now! autoFacebook Lite
Downloaded 665 times.

Please note there is an update to this plugin at: http://htmyell.com/autofacebook-2-1/

autoFacebook 2.0

By: Jamie Taylor
Htmyell.com


What’s New:

  • Added oauth 2.0 authorization to integrate with Facebook’s new Graph API calls.
  • Added Zen Cart integrated error checking and status alerts.

Requirements:

  • Zencart 1.3.9+
  • php 5+
  • cURL
  • JSON

License:

This Zen Cart modification is licensed under the GNU General Public License: http://www.gnu.org/licenses/gpl-3.0.txt

Getting Help:

Help is available via the Zen Cart forums @ http://www.zen-cart.com/forum/showthread.php?t=153528 or at http://htmyell.com/autofacebook-2-0


Installation:

New Users:

1. Log in to your facebook account and go to http://www.facebook.com/developers and click the “+ Set up New Application” button.

2. Name your application. I suggest something like “MyStoreDomain.com” but it can be whatever you like. Agree to the terms and click “Create Application.” On the next page, if required fill in the security check and click “Submit.”
Note: if an error occurs simply go back you should see your application was created anyway. If so, click “edit settings” otherwise, try again.

3. Now you should see your new Application settings. You can come back and edit these later though it’s not required (I’d suggest atleast uploading an Icon image once everything is working).

4. For now we need to click “Web Site” on the left and edit our “Site URL” and our “Site Domain”.
The Site URL is simply your store’s web address followed by a ‘/’ forward slash. So it should look something like “http://mystore.com/”
Your Site Domain is just your domain name ‘dot’ whatever and could look like “mystore.com”. No “http://”, no “www.”, and no “/”

5. Now click “Facebook Integration” on the left. Towards the bottom you should see “Installable to?”. Uncheck “Users” and add a check next to “Facebook Pages” instead.

6. Now click “Save Changes”. If all goes well you should see your app on the My Applications page, along your app settings. We’ll need to use the “Application ID” and “Application Secret”.

7. Now that we’re done with our app open up the included facebook_authorization.php file and edit lines 4 and 5 with your App information.
Note: facebook_authorization.php is a simple file that we’re going to upload to our server and run from our browser to authorize our application to do things for us like post to our page’s wall. After if gives us certain information it is no longer needed and should be deleted.

So on line 6 where you see: $app_location = “http://yoursite/facebook/facebook_authorization.php”; This is simply the URL to where you plan to upload facebook_authorization.php. I suggest making a temporary folder on your folder called “facebook”. However, where ever you plan to upload it, it must be on the same server you specified in Step 4 and make sure you reflect it’s location on line 6. Once you’re done editing lines 4-6 save and upload it to where ever you specified in your $app_location.

8. Once uploaded run the file in your browser and you will be taken to facebook’s Permission Request prompt to authorize your app. Click “Allow.”

9. You should now see a Success page with your page’s ID and Page’s Token. We need those for our next step.
Note: if you see a period (or any other punctuation) at the end of your page’s Token consider it part of the token.

10. Open up the included update_product.php file in the admin/includes/modules folder and edit lines 90 through 97 with your Application Info and the Info given from the last step (Step 9). Note: $store_url needs to be the full url to your store without the trailing (‘/’). So it should look like “http://www.mystore.com” or “http://www.mystore.com/store”. Alos: lines 96 and 97 can be personallized or just left as they are.

11. Now upload the the new update_procut.php and the facebook folder to your store’s admin/includes/modules folder on your server (or just drag the admin folder from autoFacebook2 folder to your zencart root directoy)

12. Now when you add a new product to your store your facebook will automatically be updated with the new product info. Note: you may now delete the facebook_authorization.php uploaded in step 6 as well as the temporary folder from your server.

Existing Users:

If all is fine with your old version of autofacebook, there really isn’t any major improvements with this version. This version mainly address facebook’s changing of the user authorization process for people who did not create their application before july 1st.
However if you want to upgrade be aware of the following:

  • You will have to create a new Application since the methods have changed
  • I am unable to test this on any live sites running the old version of autoFacebook so to be safe and ensure maximum compatibility:

1. Delete the “facebook” folder in your admin folder.

2. Start at step 1 for new users.

Adding to autoFacebook to autoTweet.

to add to autoTweet just complete steps 1 – 10 but istead of uploading update_product.php copy lines 89 – 132 of the autoFacebook 2.0 update_product.php and paste them above line 90 (above “// start autoTweet 3.0″) of your current update_product.php

Adding autoTweet to autoFacebook

copy lines 90 – 157 of your autoTweet update_product.php and paste them just below line 132 (where you see “//end of autoFacebook”)


For more info and to give feedback check the forums.

Hope ya like it

Download:

Available for download at Zen-Cart.com


You heard me right… autoTweet 3.0 is now out. I know what you’re thinking;

“But Jamie, didn’t you just release 2.0 like last week?”

Well, yeah but-

“So why 3.0 so soon?”

Good question.

When I finally sat down to make autoTweet 2.0 I unwittingly did so without the knowledge that twitter was doing away with their current method of making API calls (read more about this here: http://dev.twitter.com/announcements). The new method requires OAuth to make API calls and is basically going to render autoTweet useless. This does however make using twitter apps far more secure. Also, since it’s  a new method I decided to go ahead and make it a 3.0 (i was never good with these naming conventions). Just be happy it’s not 2.0.1.b R2 beta 4.

New Features
  • Uses OAuth to verify twitter user.
  • Added real time error reporting
  • Added ability to set twitter time out.
Requirements
  • php5+
  • JSON support
  • cURL
  • Zen Cart 1.3.8 or greater
Set up

Anyway to get started with the new twitter method we’re going to have to create a web app via twitter that we can access using a single access token.

1. first you need to log into your store’s twitter account and create an application on twitter http://dev.twitter.com/apps/new

2. Fill in the information boxes like so:

a. Application Name: Just use your store’s name or URL. I simply used store’s address: Htmyell.com

b. Description: You need to enter at least a 10 character description. Once again I used Htmyell.com

c. Application Website: your store’s URL, i.e. http://www.htmyell.com

d. Application Type: Make sure you set this to “Browser” if it’s not already set for you.

e. Callback URL: This isn’t important to us, since we wont need to be making any requests. Just enter your store’s URL again:

f. Make sure you set this to “Read & Write” if it is not already set for you.

g. Application Icon: Your logo, pic, etc.

Anything else you can fill in however you want, or leave blank. Note: you can come back and change this at any time.

Now prove you’re real, click register application, then accept the terms.

3. Now you’ll be redirected to you application details page. There you should be given two important things; your Consumer Key, and your Consumer Secret.

4. Extract everything the autoTweet3.zip. Open the included update_product.php from the in admin/includes/modules/ folder and edit the information you see between quotes on lines 92 and 93 with your information

5. Now back at your Application Details page you should see a link on the right hand side called “My Access Token”, click on it. This page gives you your single access token of the twitter account that you created the application with.  Use this information to fill in lines 94 and 95 back in update_product.php.

6. Now edit lines 96 through 100 like so:

a. $twitUsername = your twitter user name.

b. $twitPassword = your twitter password.

c. $bitlyUsername = your bit.ly user name (available for free at www.bit.ly)

d. $bitApiKey = your bit.ly API Key, find it by logging in to bit.ly and clicking settings.

e. $storeUrl = The web address to your store’s home page. (Might be something like www.mystore.com or www.myname.com/store) Note: the “”http://”” before the url is not needed here.

f. $showprice = If you want to show your product’s price on twitter set this equal to 1 (with no quotes.) If you don’t want to set your product’s price set this equal to 0 (default).

g. $timeout = the amount of time (in seconds) to wait for twitter before moving on and just adding the product. This makes it so that your store doesn’t break waiting for twitter. No quotes here either.

7. Save and Upload

Save the file. Now upload the contents of your autoTweet 3.0 admin folder to your store’s admin folder. This will replace your existing update_product.php file with the new autoTweet version and add the twitteroauth folder. So if prompted, allow overwriting.

Download:

Download now from Zen-Cart.com

Yep another version of autoTweet for Zen Cart. Just thought I’d share it here until it’s up at Zen-Cart.com

Note: This mod was tested on Zencart 1.3.9a and up although probably works just fine on 1.3.8.
This modification automatically updates your Twitter
followers every time you add a product to your store. It will tweet your product’s name as
well as a shortened URL to the specific products page all without you ever
having to log in to twitter.
It also allows you to use bit.ly’s free link tracking analytics.

Change log v2.0:
  • Made install much easier (about 3 minutes)
  • Added option to turn on/off price.
  • Added twitter error checking set 10 second timeout so store doesn’t break if twitter goes down.
  • Added bit.ly error checking in case links don’t shortening.
Change log v1.01:
  • Updated for zencart 1.3.9a
  • Fixed ‘cannot re-declare class bug’ cause by bilingual stores
  • Fixed cURL Followlocation Error.
  • Added better support for future version of Zen Cart.
Requirements:
  • php5+
  • JSON support
  • cURL
  • Zen Cart 1.3.8 or greater
Getting Help:

Installation:

1. To install first unzip autoTweet2.zip and edit: admin/includes/modules/update_product.php

At around line 92 you should see:

 

$twitUsername = "youTwitterUsername";  //twitter username
$twitPassword = "yourTwitterPassword";  //twitter password
$bitlyUsername = "bitlyUsername";  //bit.ly username
$bitApiKey = "R_0191a10f956ee982c1fda80f";  //bit.ly api key.
$storeUrl = "www.your-store.com";  //url to the homepage of your store.
$showprice = 0;  // Show the product price? 0 = off, 1 = on. no quotes.
2. Fill in between the quotes with your info.

$twitUsername = your twitter user name.

$twitPassword = your twitter password.

$bitlyUsername = your bit.ly user name (available for free at www.bit.ly)

$bitApiKey = your bit.ly API Key, find it by logging in to bit.ly and clicking settings.

$storeUrl = The web address to your store’s home page. (Might be something like www.mystore.com or www.myname.com/store) Note: the “”http://”” before the url is not needed here.

$showprice = If you want to show your product’s price on twitter set this equal to 1 (with no quotes.) If you don’t want to set your product’s price set this equal to 0 (default).

3. Save and Upload

Save the file. Now upload the contents of your autoTweet 2.0 admin folder to your store’s admin folder. This will replace your existing update_product.php file with the autoTweet version. So if prompted allow overwriting.

That’s it! (waaaay easier than the old version!)
I hope you like the mod. If it happens to save you a whole lot of time or make you a whole lot of money… don’t forget us little people :)
-Jamie

Buy me a coffee! donate to squirtpunk@hotmail.com

Download:

Note: there is a new version of autoTweet available here:

autoTweet 3.0


In this little tutorial we’re going to create simple playing cards using only HTML and CSS (without image files). The purpose of this article is to cover the basics of how CSS and HTML work together. This should work no matter what versions you’re using (CSS2.1, CSS3, HTML4, HTML5, etc.). Note: This tutorial assumes you have a basic knowledge of HTML.

Intro to CSS:

First lets go over how and where to use CSS. There are three main ways to use CSS in an HTML document.

1. Inline Styling

The first way you can use css is to place the CSS code in and HTML element’s style attribute. For example:

<p style="font-style: italic">My CSS formatted text.</p>

All the text between the specific styled <P> tags will be italic. No other text will be italicized unless the same style attribute is added to that text’s HTML element. This method is generally frowned upon due mainly to the fact that it creates much longer and larger web pages that are harder to maintain in the long run.

2. Internal Style Sheet

Another option is to place your CSS in between <STYLE></STYLE> tags usually in the <HEAD> of your HTML document. For example:

<style type="text/css">
 p { font-style: italic; }
</style>

Now any text in the entire HTML document that is in between <P></P> tags will be italicized. There is no need to use style=” “ anymore because it’s already defined. This method is best for page specific styling like a custom blog posts and should also be avoided when possible. You can use this anywhere you’d like in an HTML document but keep in mind that any the CSS loaded prior to the CSS in a style element will be overridden by the new style.

3. External Style Sheet

The 3rd and most common way to use CSS is through an external file containing all the style tags to be used on an entire website, server, program, etc. The file is usually hosted on the same server, ends in .css, and is called in the head of a HTML document through the <LINK> element. For example.

<link rel="stylesheet" type="text/css" href="style.css" />

the file “style.css” could look like this:

BODY { font-family: verdana,arial,helvetica,sans-serif; font-size: x-small; background-color: #FFFFFF; color: #000000; }
p { font-style: italic; }
a {text-decoration: none; }
h1 { font-family: verdana,arial,helvetica,sans-serif; color: #E47911; font-size: small; }
h2{margin-bottom: 0em; }
h2 { margin-bottom: 0em; }
h3 { margin-bottom: 0em; }
.small { font-family: verdana,arial,helvetica,sans-serif; font-size: xx-small; }
#big { font-family: verdana,arial,helvetica,sans-serif; font-size: x-large;}

Note: .small would apply to any HTML element with a class name of “small.” #big would apply to any HTML element with an ID of “big.” For example:

<div class="small">This text will be extra-extra-small.<div>
<p id="big">This text will be extra-large.</p>

Creating Playing Cards

Now that you know a little about CSS and HTML, lets make some cards.

Content

In the BODY of your HTML create One DIV element with the class name “outline” with 2 DIVS inside named “top” and “bottom.”

<div class="outline">
<div class="top"></div>
<div class="bottom"></div>
</div>
 

The first DIV will be the “outline” of the card and hold everything else we need in our card. The “top” and “bottom” DIVs will hold our card’s number or letters, and symbols respectfully. So lets add our card’s content.

<div class="outline">
<div class="top"><span>A</span><span>&hearts;</span></div>
<h1>&hearts;</h1>
<div class="bottom"><span>&hearts;</span><span>A</span></div>
</div>
 

As you can see we’ve added our card’s suit and rank. I’ve decided to use &hearts; for a heart suit here but you can use any suit you’d like by using &spades; &clubs; or &diams; Also notice we’ve added SPAN tags to individually wrap our card’s suit and rank in the top and bottom divs.

When rendered, we get something like this:

A

A

Not quite a playing card, but we can see we’re getting there. Now for the styling!

Styling

Now lets style our card. I like to start with the standard HTML elements first then work my way down the page.

body { background: #339900; }
span { display: block; }

Through our BODY styling we’ve changed our pages background color to a “poker table” green. We’ve also set up our SPAN tags so that they align one on top of another instead of side by side. We now have something like this:

A

A

So lets style our DIV’s.

body{ color: #CC0033; background: #339900; }
span{ display: block; }

.outline{ width: 110px; text-align: center; padding: 10px; margin: 10px; background: #FFF; color: #cc0033; }
.top{ text-align: left; }
.bottom{ text-align: right; }

Through .outline we’ve defined the width of our card, centered the text, added 10px of padding and margin for spacing, changed the background color of the DIV to white, and changed the text color to a dark red (in that order). For the .top and .bottom div we’ve just aligned our text to either the left or right accordingly. So now we have something like this:

 

A

A

Well that’s more like it. We could stop here as technically we have a card but we want our card to be a little more realistic. To do this, we can use CSS to add rounded borders and drop shadows. Unfortunately this currently will not work in Internet Explorer however IE9 will be here soon! So for Opera, Firefox, Chrome, etc let’s add the following to our CSS

body{ color: #CC0033; background: #339900; }
span{ display: block; }

.outline{ width: 110px; border: 0px solid black; text-align: center; padding: 10px; margin: 10px; background: #FFF }
.top{ text-align: left; }
.bottom{ text-align: right; }

.shadow{ box-shadow: 1px 1px 3px #000; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; }
.rounded{ border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; }

This is sort of a catch all method for creating shadows and rounded corners using box-shadow, or a browser specific box-shadow. The settings edit the shadows distance and blur amount as well as color and the rounded border’s corner radius. Feel free to play around with these for a better understanding of what each one does.
You may have noticed that we didn’t add .shadow or .rounded anywhere in our HTML. Luckily, we can add more than one class to an element’s class attribute. So to tie in our CSS we need to go back and add ” shadow rounded” to our “outline” DIV in the first line of our HTML like so:

<div class="outline shadow rounded">
<div class="top"><span>A</span><span>&hearts;</span></div>
<h1>&hearts;</h1>
<div class="bottom"><span>&hearts;</span><span>A</span></div>
</div>

Finally, you should have your completed playing card! Only 51 more cards to go.

 

A

A

Well I hope you enjoyed this article. Play around with the height and width, add texture/images if you’d like. Let me know what you think.

Download the files used in this tutorial: Playing Card Files
Downloaded 623 times.

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 = "http://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:

  1. on the first line you’re going to want to change $store_name to the name of your store.
  2. $store_url should be the http path to your store (e.g. http://www.mystore.com) with no trailing ‘/’slash.
  3. $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.
  4. $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.