Store UI, layout, design, look and feel; Discussion on the customer facing pages of your online store. Cascading Style Sheets, Themes, Scriptlets, NVelocity and the components in the ConLib directory.
-
meer2005
- Captain (CAPT)
- Posts: 245
- Joined: Wed Feb 09, 2005 2:00 pm
Post
by meer2005 » Fri Apr 30, 2010 10:07 am
Has anyone implemented the new Open Graph feature for facebook? How would we add these custom meta tags for the product pages:
http://developers.facebook.com/docs/opengraph
Code: Select all
<html xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
...
</head>
...
</html>
-
GrfxDan
- Lieutenant Commander (LCDR)
- Posts: 82
- Joined: Sat May 26, 2007 10:58 am
- Location: Mt Zion, IL
-
Contact:
Post
by GrfxDan » Mon May 03, 2010 12:27 pm
I'm interested in doing this too. Can anyone provide the code? It's beyond my current skill level to do it...
-
s_ismail
- Commander (CMDR)
- Posts: 162
- Joined: Mon Nov 09, 2009 12:20 am
-
Contact:
Post
by s_ismail » Wed May 05, 2010 5:05 am
Can you explain what type of functionality you require using facebook Open Graph Feature?
-
GrfxDan
- Lieutenant Commander (LCDR)
- Posts: 82
- Joined: Sat May 26, 2007 10:58 am
- Location: Mt Zion, IL
-
Contact:
Post
by GrfxDan » Wed May 05, 2010 7:33 am
The Facebook Open Graph feature basically turns your webpage into a Facebook page that people can create connections with. I can't speak for meer2005 but the code I would like to see would work on product and category pages, automatically inserting the Open Graph meta tags and the 'Like' button on the page, populating the meta tags with the product or category title, url, image and type ("product"). That's about all that it would need to do.
-
meer2005
- Captain (CAPT)
- Posts: 245
- Joined: Wed Feb 09, 2005 2:00 pm
Post
by meer2005 » Wed May 19, 2010 8:33 am
That's exactly what I'm looking for. I just want to have the 'like' button on each product page and have the product specific meta tags pulled dynamically.
-
crazyjoe
- Commander (CMDR)
- Posts: 172
- Joined: Mon Apr 26, 2010 2:20 pm
Post
by crazyjoe » Thu May 20, 2010 7:50 am
I like this idea too. Has anyone had any luck implementing it?
-
Shopping Cart Admin
- AbleCommerce Admin
- Posts: 3055
- Joined: Mon Dec 01, 2003 8:41 pm
- Location: Vancouver, WA
-
Contact:
Post
by Shopping Cart Admin » Thu May 20, 2010 8:16 pm
Hello,
It looks pretty easy, I'll see if we can get a wiki article or something put together.
-
mazhar
- Master Yoda
- Posts: 5084
- Joined: Wed Jul 09, 2008 8:21 am
-
Contact:
Post
by mazhar » Mon May 24, 2010 9:20 am
Hello Folks, I made an attempt to sum up with something to make product page integrable with Facebook using open graph. In attachment there is a user control that you need to place under your
ConLib/Custom folder. Then you need to make use of this in product page scriptlet where you want like button to appear. You need to perform one extra step to make this work. On Facebook navigate to this location
Home › Documentation › Social plugins › Like Button. Provide informatoin for LikeButton and then press Get Code button to get the iframe based code of LikeButton. Copy the code and past it into ConLib/Custom/FacebookOpenGraph.ascx file just after the </script>
Code: Select all
<script runat="server">
............................
............................
............................
</script>
<!------ Paste LikeButton Code Here ---------->
Save it. Now give it a try by including it to product page scriptlet.
EDIT: Please look into comments below to find latest files for control.
-
GrfxDan
- Lieutenant Commander (LCDR)
- Posts: 82
- Joined: Sat May 26, 2007 10:58 am
- Location: Mt Zion, IL
-
Contact:
Post
by GrfxDan » Mon May 24, 2010 9:25 am
Thanks Mazhar!
I'm working on implementing some other changes to my site as well. I'll add this one to my list and go live with all the changes at the same time.
-
mazhar
- Master Yoda
- Posts: 5084
- Joined: Wed Jul 09, 2008 8:21 am
-
Contact:
Post
by mazhar » Mon May 24, 2010 9:27 am
Did you tested it, if yes I would like to hear your review. I mean Its working properly or not?
-
GrfxDan
- Lieutenant Commander (LCDR)
- Posts: 82
- Joined: Sat May 26, 2007 10:58 am
- Location: Mt Zion, IL
-
Contact:
Post
by GrfxDan » Mon May 24, 2010 9:55 am
Haven't tested it yet but I'll repost here when I do.
-
meer2005
- Captain (CAPT)
- Posts: 245
- Joined: Wed Feb 09, 2005 2:00 pm
Post
by meer2005 » Mon May 24, 2010 3:12 pm
im getting an error on the popup after clicking the like button. It looks like it has something to do with the page link in the iframe? I just left the "URL to Like?" blank????
http://developers.facebook.com/docs/ref ... ugins/like --- The URL to like needs to be dynamically pulled depending on the page you're on?
Code: Select all
<%@ Control Language="C#" ClassName="FacebookOpenGraph" %>
<script runat="server">
Product _Product;
int _ProductId = 0;
protected void Page_Load(object sender, EventArgs e)
{
_ProductId = PageHelper.GetProductId();
_Product = ProductDataSource.Load(_ProductId);
if (_Product != null)
{
//TITLE META
HtmlMeta titleMeta = new HtmlMeta();
titleMeta.Attributes.Add("property", "og:title");
titleMeta.Content = _Product.Name;
Page.Header.Controls.Add(titleMeta);
//TYPE META
HtmlMeta typeMeta = new HtmlMeta();
typeMeta.Attributes.Add("property", "og:type");
typeMeta.Content = "product";
Page.Header.Controls.Add(typeMeta);
//IMAGE META
HtmlMeta imageMeta = new HtmlMeta();
imageMeta.Attributes.Add("property", "og:image");
imageMeta.Content = GetAbsoluteUrl(_Product.IconUrl);
Page.Header.Controls.Add(imageMeta);
//IMAGE META
HtmlMeta urlMeta = new HtmlMeta();
urlMeta.Attributes.Add("property", "og:url");
urlMeta.Content = GetAbsoluteUrl(_Product.NavigateUrl);
Page.Header.Controls.Add(urlMeta);
//IMAGE META
HtmlMeta websiteNameMeta = new HtmlMeta();
websiteNameMeta.Attributes.Add("property", "og:site_name");
websiteNameMeta.Content = Token.Instance.Store.Name;
Page.Header.Controls.Add(websiteNameMeta);
}
}
private string GetAbsoluteUrl(string url)
{
string absoluteUrl = url;
string storeUrl = Token.Instance.Store.StoreUrl;
if (!absoluteUrl.Contains(storeUrl))
{
if (!storeUrl.EndsWith("/"))
storeUrl += "/";
if (url.StartsWith("~"))
url = url.Remove(0, 1);
if (url.StartsWith("/"))
url = url.Remove(0, 1);
absoluteUrl = storeUrl + url;
}
return absoluteUrl;
}
</script>
<iframe src="http://www.facebook.com/plugins/like.php?href=http%253A%252F%252Fexample.com%252Fpage%252Fto%252Flike&layout=button_count&show_faces=true&width=450&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
i'm assuming this is what is causing the error: http%253A%252F%252Fexample.com%252Fpage%252Fto%252F ??
-
mazhar
- Master Yoda
- Posts: 5084
- Joined: Wed Jul 09, 2008 8:21 am
-
Contact:
Post
by mazhar » Tue May 25, 2010 4:10 am
Yes I guess that should point to current page being opened, that's what which makes sense. Let me update the control code to handle this.
-
mazhar
- Master Yoda
- Posts: 5084
- Joined: Wed Jul 09, 2008 8:21 am
-
Contact:
Post
by mazhar » Tue May 25, 2010 11:02 am
EDIT: Please look into comments below to find latest files for control.
-
meer2005
- Captain (CAPT)
- Posts: 245
- Joined: Wed Feb 09, 2005 2:00 pm
Post
by meer2005 » Tue May 25, 2010 12:58 pm
works for me! thank you
Last edited by
meer2005 on Tue May 25, 2010 6:39 pm, edited 1 time in total.
-
meer2005
- Captain (CAPT)
- Posts: 245
- Joined: Wed Feb 09, 2005 2:00 pm
Post
by meer2005 » Tue May 25, 2010 5:35 pm
Nevermind, guess it isn't working. When you first click the 'like' button it seems like it goes through, but then after a few seconds it reverts back and essentially unlikes it. When I change the layout to standard from button_count, it gives the folling error: You failed to provide a valid list of administators. You need to supply the administors using either a "fb:app_id" meta tag, or using a "fb:admins" meta tag to specify a comma-delimited list of Facebook users. --- The only thing i see are the single quotes in the iframe, would that be causing it not to function?
-
meer2005
- Captain (CAPT)
- Posts: 245
- Joined: Wed Feb 09, 2005 2:00 pm
Post
by meer2005 » Wed May 26, 2010 9:38 am
Well, It looks like I got it to work by adding this metatag: <meta property="fb:admins" content="yourfacebookID"/>
-
mazhar
- Master Yoda
- Posts: 5084
- Joined: Wed Jul 09, 2008 8:21 am
-
Contact:
Post
by mazhar » Wed May 26, 2010 10:42 am
That sounds great.
So it means that we need to modify our control once more and it would be better to support an extra user controllable property to specify facebookid. For example something like
Code: Select all
[[ConLib:Custom/FacebookOpenGraph FacebookId="your facebook id here"]]
Finally we need to put this user specified id into meta tags dynamically as you suggested. Am I correct ?
-
meer2005
- Captain (CAPT)
- Posts: 245
- Joined: Wed Feb 09, 2005 2:00 pm
Post
by meer2005 » Wed May 26, 2010 10:53 am
Being that the admin metatag and user ID are static values, I just put this metatag <meta property="fb:admins" content="yourfacebookID"/> in the scriptlet.master page, but it would be best to have it included in the open graph module like you suggested. I also changed the Product.IconUrl to Product.ImageUrl because it creates a page on facebook using the specified image and we don't use icons so it wasn't pulling anything, plus an icon wouldn't really be suitable for the page that is created on facebook.
-
mazhar
- Master Yoda
- Posts: 5084
- Joined: Wed Jul 09, 2008 8:21 am
-
Contact:
Post
by mazhar » Wed May 26, 2010 12:22 pm
EDIT Made: New Version of control, download file updated
Here is the updated control. Now it supports two properties
1- FacebookId:- you need to provide your facebook id for this one
2- ImageType:- Specify which image you want to use with this control Icon, Thumbnail or product image. Icon is default for thumbnail provide T as value and for product image provide PI as value.
3- Now there is one more parameter called AppId, A comma-separated list of either Facebook user IDs or a Facebook Platform application ID that administers this page.
So either use AppId or FacebookId and let's see which one works for you. For example
Code: Select all
[[ConLib:Custom/FacebookOpenGraph FacebookId="xyz@xyz.tld" ImageType="PI"]]
Or
Code: Select all
[[ConLib:Custom/FacebookOpenGraph AppId="12345678" ImageType="PI"]]
-
meer2005
- Captain (CAPT)
- Posts: 245
- Joined: Wed Feb 09, 2005 2:00 pm
Post
by meer2005 » Wed May 26, 2010 1:17 pm
Works like a charm:) You may have to use the numerical facebook ID and not your facebook email Id.. I haven't tried it with the email, but I know the numerical id works.
-
SamsSteins
- Lieutenant Commander (LCDR)
- Posts: 92
- Joined: Thu Jul 10, 2008 11:43 am
- Location: Lancaster PA
-
Contact:
Post
by SamsSteins » Fri May 28, 2010 2:02 pm
I can't seem to get the like to "stick". I click on the like button, the button then shows 1 like then it reverts to no likes.
-
mazhar
- Master Yoda
- Posts: 5084
- Joined: Wed Jul 09, 2008 8:21 am
-
Contact:
Post
by mazhar » Tue Jun 01, 2010 8:41 am
-
dappy2
- Commander (CMDR)
- Posts: 114
- Joined: Wed Jan 18, 2006 5:53 pm
-
Contact:
Post
by dappy2 » Tue Jun 22, 2010 9:51 am
SamsSteins wrote:I can't seem to get the like to "stick". I click on the like button, the button then shows 1 like then it reverts to no likes.
I'm having the exact same problem. It works on our internal dev site, posts to facebook and everything. When I moved live, doesn't "stick".
Here's a page:
http://www.devonsuperstore.com/Omron-Co ... -P127.aspx
Thoughts?