Adding Facebook “Like”  And “Send” Buttons To Your Miva Merchant Product Pages

Today’s guest blog post comes to us from Steve Fronek, founder of Rainbrooke.com, which offers pink laptop bags and cases for women, and owner of Ten23 Media, offering planning and consulting services for new online small businesses.  You can follow both Rainebrooke and Ten23Media on Twitter.

The power of Facebook for ecommerce sites is amazing. Facebook users can spread around information like a wildfire, and the “Like” and “Send” buttons are one of the most popular ways for people to share.  These two small buttons can put your product in front of hundreds or thousands of new people who may have never heard about your site or product.

Every time someone clicks the “Like” button it will show up in their Facebook news feed. If that person has a few hundred friends, you just had a few hundred new eyes looking at your product. If a few of those people share it, it will spread even further.  It’s a powerful button from Facebook that you can’t pass up.

Thanks to the flexibility of Miva Merchant, adding the “Like” and “Send” buttons can be done in a short time.  Below are the steps to get the “Like” and “Send” buttons added to your Miva Merchant product pages.

Step One: Create Your Open Graph Tags

The Open Graph tags are where Facebook gets your products information. The tags are:

• og:title-The title of your product.
• og: title-The title of your product
• og:type – The type of site. With Miva product pages the type will be “product”.
• og:image – The URL to the product image.
• og:site_name – The name of your site.
• fb:admins or fb:app_id – A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.

Step Two: Add The Open Graph Tags To The Miva Merchant Product Template

Go to your PROD page template. In Miva Merchant,  go to Pages. Then scroll to the Product Display page (Code: PROD). Click the Edit button. The template should load on the “page” tab. You’ll need to add the Facebook Open Graph tags to this Miva Merchant PROD template in-between the head tags. 

For the tags to work correctly within Miva Merchant and to be different on each product page, you have to add Miva Merchant tags so the product information is correct on each page. See below:

meta property=”og:site_name” content=”&mvt:store:name;”
meta property=”og:title” content=”&mvt:product:name;
meta property=”og:url” content=”YOUR PRODUCT PAGE URL STRUCTURE HERE”
meta property=”og:image” content=”http://&mvt:global:domain:name;/mm5/&mvte:product:thumbnail;”
meta property=”og:type” content=”product”
meta property=”fb:admins” content=”YOURADMIN#HERE”

• Note on og:url tag -  This URL needs to populate with the correct URL for each product page. As an example, my eCommerce stores product URL structure is: http://www.rainebrooke.com/product/&mvta:product:code;.html. You’ll notice after the product/ is the Miva Merchant tag, which will change depending on which product page the visitor is on. Insert the correct URL format for your product pages depending on what structure you’re using in Miva Merchant.
• Note on og:image tag – This URL is to the product image. Your URL structure may vary.
• Note on fb:admins tag – You can get your admin number by logging into your Facebook and going to this page. The number should already shown in the Step 2 “Get Open Graph Tags” > Admin section.

Step Three: Test Your Open Graph Tags

Go to the Facebook URL linter. Insert one of your product page URL’s into the linter. Click the lint button. This will show you if Facebook is reading your tags correctly. If you get any errors make the necessary changes.

Step Four: Get Your Button Code

Go to this page. Step 1 will create your button code. Leave the URL field blank. Select the button layout you prefer, the width, color, etc. Then click Get Code.

Step Five: Add The Button Code To Your Miva Merchant Product Display Layout

On the PROD template, click the “Product Display Layout” tab. Decide where you would like the Facebook “Like” and “Send” buttons to show on your Miva Merchant product page and insert the code generated into that area of your product display layout code.

That’s It, you’re done!

All of your product pages should now be showing the Facebook “Like” and “Send” buttons.

You can view them on my ecommerce store’s Miva Merchant product pages, by clicking on any of these pink laptop bags for women. The “Like” and “Send” buttons can be found under the large product image, to the left of the “Add to Cart” button.