Aloha Facebook / Shopify lovers!
By now you are already used to fine stuff coming from this ship, but this one is damn fine. A few weeks ago in the dark Bermude triangle of ecommerce a small hack rised up to the surface and all the marketers were just stunned how they didnt think of this before. I think the first one to go public was LukePeerFly. Kudos to you brave pirate.
The legend says, the photo ad had intercourse with a link ad, and a new monster was born. The PHOTOLINK AD.
Link ad for dummy pirates: The one where you click on the image and it redirects you to the landing page. Also has a title and description. Dimensions are 1200x628px.
Photo ad for dummy pirates: The big one 1200x1200px and when you click on it, the image opens in a lightbox and thats it. People have to actually find the URL in your copy text and click on it.
The bastard son PhotoLink ad: Its a new breed of monster, its basically a 800x800px photo ad that functions as a link ad when someone clicks on it. Powerful stuff, right? HELL YES.
I wont tell you what are the benefits, because if you dont recognise them, well you are not worthy of this. Please stop reading and go away at this point!
How to (Non Shopify users):
The monster uses the Facebook Open Graph Meta Tags. This means by using the Open Graph you can order Facebook what image to show as the preview for the link you insert to Facebook. Mr. FB will set the image as the preview and when we create a “meta” refresh, because we need to redirect the users to the URL we want them to go, when they click on the image.
The code:
The HTML code should be added to a new file on your website that you want to use as a redirect. This is the link that you will post on your Facebook Page to show the large Photo Link Ad image.
Copy & paste the code below – to a new file on your website.
- <!doctype html>
- <html lang=”en”>
- <head>
- <!– Main Meta Tags –>
- <meta charset=”utf-8″ />
- <title>PAGE TITLE</title>
- <meta name=”description” content=”PAGE TITLE” />
- <!– Open Graph Tags for Photo Link –>
- <meta property=”og:site_name” content=”PAGE TITLE”>
- <meta property=”og:url” content=”IMAGE URL”>
- <meta property=”og:title” content=”PAGE TITLE”>
- <meta property=”og:description” content=”PAGE TITLE”>
- <meta property=”og:type” content=”video.other”>
- <meta property=”og:image” content=”IMAGE URL”>
- <meta property=”og:image:width” content=”800″>
- <meta property=”og:image:height” content=”800″>
- </head>
- <body>
- <meta http-equiv=”refresh” content=”0;URL=’WEBSITE URL'” />
- </body>
- </html>
There are 3 settings that you need to edit to make this work:
- PAGE TITLE – A title for the url you are advertising. It doesnt show on FB, but still put something relevant.
- IMAGE URL – The photo image URL that will display on FB. I recommend uploading a 800×800px image to the same site you are going to copy & paste this code onto.
- WEBSITE URL – The website URL you want people to be redirected to. (When they click the image from your IMAGE URL that will display on FB)
By default, the script set the image:width and image:height of the preview image to 800px. I recommend you keep this and use a square 800×800px image for your IMAGE URL.
To test how it looks and if it works use FB Sharing Debugger.
The only downside for now is that this seems to work only for DESKTOP, the mobile uses still the old imagery. But still, this is well worth your time. Facebook approves the ads and they perform really well. Really well sounds so bad, they are crazy. Ive been running them for 10 days now and the CTR% is off the charts.
And now for my SHOPIFY lovers, that couldnt use the Luks version. Like always @Captain has you covered.
You all know by now, Im shit with code and I couldnt code a monkeys ass. This is the reason I have awesome developers by my side. One of them is called don Codeone (yeah, Mafia bitches) and he can make you a script you cant refuse!
He developed this for me, so I can give it to you. You see the love here? BTW: If you need anything Shopify related and your developers suck, don Codeone is the guy I go to. He will hook you up and I vouch for him. Just drop him an email at info@doncodeone.com and the rest is history. His site is under development, I guess Im the reason why, since I abuse him 24/7.
Enough Mafia talk, here is the Shopify solution:
Instructions:
1. Go to MyShopify Admin, click on the “Online Store” in the main sidebar
2. Click on “Themes” in the secondary sidebar that appears, then click on the three dots located on the right side of the screen.
3. Select “theme.liquid” on the right side (in Layout directory)
4. Locate “<meta name=”description….” line
5. Copy and paste the code – make sure you have an empty line above and under this code (let’s keep things organized and pretty)
6. Hit “SAVE” on the right top corner.
The Shopify script:
{% if template contains 'product' %}
<!-- Brought to you by ConversionPirate.com & donCodeone.com -->
<meta property="og:site_name" content="{{ product.title }}">
<meta property="og:url" content="https:{{ product | img_url: '800x800', format: 'jpg' }}">
<meta property="og:title" content="{{ product.title }}">
<meta property="og:description" content="{{ product.title }}">
<meta property="og:type" content="video.other">
<meta property="og:image" content="https:{{ product | img_url: '800x800', format: 'jpg' }}">
<meta property="og:image:width" content="800">
<meta property="og:image:height" content="800">
{% endif %}
This is it. Im sure you will love it, I know I would/will/am loving it 🙂 Sorry McDonalds, this was (un)intentional!
Let me know if you get great results and if you dont, well blame Mr. Zuckerberg.
@Captain is off to bed now
