New facebook Open Graph Feature

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)
Captain (CAPT)
Posts: 245
Joined: Wed Feb 09, 2005 2:00 pm

New facebook Open Graph Feature

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>

User avatar
GrfxDan
Lieutenant Commander (LCDR)
Lieutenant Commander (LCDR)
Posts: 82
Joined: Sat May 26, 2007 10:58 am
Location: Mt Zion, IL
Contact:

Re: New facebook Open Graph Feature

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...
Image

User avatar
s_ismail
Commander (CMDR)
Commander (CMDR)
Posts: 162
Joined: Mon Nov 09, 2009 12:20 am
Contact:

Re: New facebook Open Graph Feature

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?

User avatar
GrfxDan
Lieutenant Commander (LCDR)
Lieutenant Commander (LCDR)
Posts: 82
Joined: Sat May 26, 2007 10:58 am
Location: Mt Zion, IL
Contact:

Re: New facebook Open Graph Feature

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.
Image

meer2005
Captain (CAPT)
Captain (CAPT)
Posts: 245
Joined: Wed Feb 09, 2005 2:00 pm

Re: New facebook Open Graph Feature

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)
Commander (CMDR)
Posts: 172
Joined: Mon Apr 26, 2010 2:20 pm

Re: New facebook Open Graph Feature

Post by crazyjoe » Thu May 20, 2010 7:50 am

I like this idea too. Has anyone had any luck implementing it?
Crazy Joe Sadloski
Webmaster
Hot Leathers Inc.
http://www.hotleathers.com

User avatar
Shopping Cart Admin
AbleCommerce Admin
AbleCommerce Admin
Posts: 3055
Joined: Mon Dec 01, 2003 8:41 pm
Location: Vancouver, WA
Contact:

Re: New facebook Open Graph Feature

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.
Thanks for your support

Shopping Cart Guru
AbleCommerce.com
Follow us on Facebook

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: New facebook Open Graph Feature

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.

User avatar
GrfxDan
Lieutenant Commander (LCDR)
Lieutenant Commander (LCDR)
Posts: 82
Joined: Sat May 26, 2007 10:58 am
Location: Mt Zion, IL
Contact:

Re: New facebook Open Graph Feature

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.
Image

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: New facebook Open Graph Feature

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?

User avatar
GrfxDan
Lieutenant Commander (LCDR)
Lieutenant Commander (LCDR)
Posts: 82
Joined: Sat May 26, 2007 10:58 am
Location: Mt Zion, IL
Contact:

Re: New facebook Open Graph Feature

Post by GrfxDan » Mon May 24, 2010 9:55 am

Haven't tested it yet but I'll repost here when I do.
Image

meer2005
Captain (CAPT)
Captain (CAPT)
Posts: 245
Joined: Wed Feb 09, 2005 2:00 pm

Re: New facebook Open Graph Feature

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 ??

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: New facebook Open Graph Feature

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.

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: New facebook Open Graph Feature

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)
Captain (CAPT)
Posts: 245
Joined: Wed Feb 09, 2005 2:00 pm

Re: New facebook Open Graph Feature

Post by meer2005 » Tue May 25, 2010 12:58 pm

works for me! thank you :D
Last edited by meer2005 on Tue May 25, 2010 6:39 pm, edited 1 time in total.

meer2005
Captain (CAPT)
Captain (CAPT)
Posts: 245
Joined: Wed Feb 09, 2005 2:00 pm

Re: New facebook Open Graph Feature

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)
Captain (CAPT)
Posts: 245
Joined: Wed Feb 09, 2005 2:00 pm

Re: New facebook Open Graph Feature

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"/>

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: New facebook Open Graph Feature

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)
Captain (CAPT)
Posts: 245
Joined: Wed Feb 09, 2005 2:00 pm

Re: New facebook Open Graph Feature

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.

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: New facebook Open Graph Feature

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)
Captain (CAPT)
Posts: 245
Joined: Wed Feb 09, 2005 2:00 pm

Re: New facebook Open Graph Feature

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.

User avatar
Shopping Cart Admin
AbleCommerce Admin
AbleCommerce Admin
Posts: 3055
Joined: Mon Dec 01, 2003 8:41 pm
Location: Vancouver, WA
Contact:

Re: New facebook Open Graph Feature

Post by Shopping Cart Admin » Wed May 26, 2010 11:16 pm

Hello,

Thanks for the update. Glad to hear it's working.
Thanks for your support

Shopping Cart Guru
AbleCommerce.com
Follow us on Facebook

SamsSteins
Lieutenant Commander (LCDR)
Lieutenant Commander (LCDR)
Posts: 92
Joined: Thu Jul 10, 2008 11:43 am
Location: Lancaster PA
Contact:

Re: New facebook Open Graph Feature

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.

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: New facebook Open Graph Feature

Post by mazhar » Tue Jun 01, 2010 8:41 am


dappy2
Commander (CMDR)
Commander (CMDR)
Posts: 114
Joined: Wed Jan 18, 2006 5:53 pm
Contact:

Re: New facebook Open Graph Feature

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?

Post Reply