New Post: Adding Facebook 'Like' button to each product

Dave asked that I post this as it may help someone with the open graph tags.
So here goes.

I created a new template that I called opengraphheader.template

In that template I have the following:

</title>

<meta property="og:type" content="product" />
<meta property="og:title" content="[TAG:PRODUCTNAME] by [TAG:MANUFACTURER]" />
<meta property="og:image" content="http://personally4you.com[Product:ImageURL]" />
<meta property="og:description" content="[TAG:SUMMARY]" />
<meta property="og:url" content="http://personally4you.com/Store/ProdID/[Product:ProductID]/[Product:SEOName]" />
<meta property="og:price:currency" content="USD" />
<meta property="og:price:amount" content="[Product:#FromPrice]" />

I put the ending title tag at the beginning because I inject this template into the productpagename.template

By doing that this code does not become part of the page title. You do end up with 2 ending title tags but that does not seem to matter. I have found that some tags get injected into the page and some do not work. The ones I have used work.

In my productpagename.template is :

[TAG:PRODUCTNAME]
[Template:opengraphheader.template]

I just use [TAG:PRODUCTNAME] in the template because it suits my site and it is different that the original template.
I use the summary in my tags but you can use the desciption tag instead.
If you look at source for a product page on my site you will see how it works. personally4you.com
I have tested it with the facebook open graph debugger at it all works. And when you share on facebook it pulls the right information. In my efforts to find something that works I did find that you can not use open graph tags in the body, that throws errors. I have also added other tags in the product detail template. They are tags such as itemprop="name" for markup. These kind of tags do work in the body.

There are additional open graph tags that I place in the DNN page settings in the header area such as
<meta property="og:locale" content="en_US"/>
<meta property="og:site_name" content="Personally Yours"/>
<meta property="fb:admins" content="(my admin number)"/>
<meta property="fb:app_id" content="(my app id number)"/>

You can also put the javascript from facebook and pinterest in the header of the page. I put that code in the ascx page code of the skin, such as Home.ascx



As far as the facebook button I just put the code in the productdetail.template right after <!--End Purchasing Panel--->

<span><div class="fb-like" data-layout="button" data-href="[TAG:LINK]" data-show-faces="false" data-send="true"></div></span><span style="margin-left:40px;"><a href="//www.pinterest.com/pin/create/button/?url=[TAG:LINK]&media=http://personally4you.com[TAG:GALLERYURL1]&description=[TAG:SUMMARY]" data-pin-do="buttonPin" data-pin-config="none"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a></span>

My code also includes a Pinterest button which also works. In fact all this works well enough that it qualifys for rich pins on Pinterest.

If you have any questions let me know.



Jim