@tik Facebook Open Graph and Twitter Cards Markup

If you have your marketing in order, then Facebook is probably a major traffic driver to your store.

One problem I've always found with sharing URLs on Facebook is that you have no control over the image and description text that accompany the URL. In fact, I find that for most OpenCart stores, Facebook tries to grab only the shop logo or another irrelevant image.

This extension solves the issue. If you share your store's category or product page's URL then Facebook will pick up the category image and primary product image respectively. On most stores that I have implemented this extension on, incoming traffic from Facebook has increased between 150% and 250%!! (your mileage may vary)

Why? Primarily because photos attract people and invite them to click.

In addition to tagging the image, this extension will also add other relevant Open Graph markup to make your store social-media friendly.

Further, this extension implements similar functionality for Twitter called Twitter Cards. Because this is a vQmod, no core files are touched, and the changes should carry over to the next version.

Requirements

1. You need Opencart
2. You must have vQmod preinstalled.
3. This extension is made for the Default theme. Hence you should have the default theme as the active theme for this to work.
   If your theme is *VERY* similar to the Default theme, this extension MIGHT work out-of-the-box for you. If it doesn't, and you need me to do paid customization, please PM me.

Installation

1. Download the latest version of the extension compatible with your version of Opencart from http://www.opencart.com/index.php?route ... n_id=14364
2. Unzip using a program such as WinZip, WinRar or Windows's inbuilt compressor
   (In Windows, right click on the downloaded zip file, and select Extract All)
3. Use an FTP program such as FileZilla to upload all contents of the uploads folder to your shop's root.

And then?
And then nothing*. You're all done. There are no configurations or admin options. Once you are done with the above steps, the extension should start working.

* If you care only about Facebook, then really no need to do anything further. However, if Twitter cards are important to you then Twitter needs you to do a couple of things more...these are listed below.

Enabling Twitter cards
Facebook Open Graph is already enabled if you installed this extension.
For Twitter cards, you need to:

1. Log in at https://dev.twitter.com/docs/cards/validation/validator
2. Close the Card Catalog popup.
3. Click on the Validate & Apply tab.
4. Enter a URL for one of your product pages and click Go!
5. Click on the Request Approval button and follow the instructions.

Is it working?
After installing, you can simply share a product link on Facebook. Facebook should show your product's main photo as the image.

Advertising
This mod adds my link to your site's footer (next to the Opencart link). It would be nice if you don't remove it. If you do remove it, please consider donating (click Donate button below).

Thank bud, working perfectly. Just gotta make sure your robots.txt file allows the Twitterbot and approval was instant.

Glad it's working for you.

Hi OC2PS,

I installed your extension with no problems but I am having issues validating with Twitter...

It keeps saying my images are a 404 and I do not get the "request approval" button because of the red item on the image tag.
I have made sure there is no robots.txt file.

It seems to me that my cached images all have "_0" inserted before the .jpg and that is the problem, the link generated to the cached image doesn't include that bit...eg: .../shop/image/cache/data/product_img/incense_oils_burners/IN046(3)-228x228_0.jpg instead of the expected.../shop/image/cache/data/product_img/incense_oils_burners/IN046(3)-228x228.jpg

Can I change it to add the _0 into the filename generated by this extension for the og and twitter image tags?

Hope you can help - just sent another beer/coffee your way for another great extension

Also just checked Facebook and it is still pulling a random image so it obviously has the same problem there too...damn

Stokey

How do you allow twitterbot in robots, txt? I installed this in my test 1.5.5.1 folder that I'm preparing to switch the stores over to. Facebook is working perfectly but I'm having problems validating twitter.

I also take it I don't want to complete the validation until I move it from the test subfolder, but just trying to make sure it works.

Hi labeshops

I think you simply make sure you are not "disallow"ing bots from the public pages of the site - seemed to work for me anyways...

@OC2PS - I got round my image name problem by changing the path from image/cache to just image/ in the XML and now Twitter can find my pictures

Stokey

Yeah, I tried temporarily removing my robots.txt file but then read that twitter caches it for 7 days! So added an allow for their bot and will try again verifying it next week and see what it says.

stokeyblokey wrote: I got round my image name problem by changing the path from image/cache to just image/ in the XML and now Twitter can find my pictures

Glad it is working for you.

Been travelling in South Asia without access to the Internet so couldnt respond earlier.

labeshops wrote:read that twitter caches it for 7 days!

It does. Do check in after a week.

All works apart from the twitter image location, tried the above solution removing the /cache but didnt seem to work, any other suggestions?

Thanks

@OC2PS Keep forgetting to ask, we used to use your rich snippets extension. Does this replace that or should we use both?

Thanks

sunster wrote:we used to use your rich snippets extension. Does this replace that or should we use both?

Rich snippets adds schema.org markup and works with Search engines including Google, Bing and Yahoo!.
This extension adds OG and TC markup for Facebook and Twitter.
I would recommend using both.

I don't like the link you posted through the ze-oc2ps-credits.xml file....it just not cool to make a change that is not desired by the host....you should just ask for a link and it could be arranged....

fabema wrote:I don't like the link you posted through the ze-oc2ps-credits.xml file....it just not cool to make a change that is not desired by the host....you should just ask for a link and it could be arranged....

Sorry you don't like it.

That said, I HAVE tried to be completely transparent by prominently informing everyone about it in the original post of this thread. So people do know what they are getting into BEFORE downloading the module.

@fabema - why not make a donation to OC2PS and then remove the link and bask in the warm glow of a job well done?

@OC2PS it is very clear to anyone who reads the instructions that this link is included, no harm no foul as they say in the US

I installed the files & can see them in vQmod Manager but it is still not displaying the product images but images from the website template.

https://www.gulfcoastcorvette.com/store.html

This site is a Joomla site with Mijoshop installed. Does your extension work with Mijoshop stores?

I have a custom template named gulfcoast so I changed the facebook-opengraph-markup.xml file

from to but it still doesn't work. Is there another change I need to make to make this work?

Thanks for any help you can give me with this.

yaani wrote:This site is a Joomla site with Mijoshop installed. Does your extension work with Mijoshop stores? [/code]

Haven't tested but should work - IF vqmod works.

yaani wrote:custom template named gulfcoast so I changed the facebook-opengraph-markup.xml file but it still doesn't work.

Would that it were so simple! I have tried to maximize theme compatibility. But it is a fact of life that themes can be wildly different from each other. That's why while I try to cast a wide net as far as themes go, I PROMISE compatibility only with the Default theme. If you have a custom theme and the extension is not working with it then I would essentially have to rewrite the extension for your theme. This falls under the category of paid custom work. PM me if you'd like me to do the paid customization.

Well finally remembered to retest the validator, and it's coming back with errors. I rechecked that I had the latest version of your mod so not sure what the issue is, but it's not pulling up several lines of required data:


twitter:card
product
twitter:domain
Gothic Plus
twitter:site
Gothic Plus
Invalid screen name
twitter:creator
@LABEShops
twitter:title
Gold Print Black Platform Shoes with Buckle Detail
twitter:url
http://www.gothicplus.com/floral-print- ... -exotica60
twitter:image
twitter:label1
Required meta tag missing
twitter:data1
Required meta tag missing
twitter:description
Required meta tag missing
twitter:data2
Required meta tag missing
twitter:label2
Required meta tag missing

The invalid screen name issue is probably due to it pulling the site title for that field which includes a space though my twitter name is just "gothicplus" without a space. That one is not required though so not a huge issue. The required meta tag missing is the problem keeping it from validating.

I installed the extension, I can see it in the vQmods. However, when I post something to Facebook there is no image or product description. The product title shows fine. I am using OpenCart 1.5.6.4 I have tried it both with my current theme and with the default theme and it still doesn't work. Any suggestions?

Thanks in advance for any assistance.