Page 1 of 2

New facebook Open Graph Feature

Posted: Fri Apr 30, 2010 10:07 am
by meer2005
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>

Re: New facebook Open Graph Feature

Posted: Mon May 03, 2010 12:27 pm
by GrfxDan
I'm interested in doing this too. Can anyone provide the code? It's beyond my current skill level to do it...

Re: New facebook Open Graph Feature

Posted: Wed May 05, 2010 5:05 am
by s_ismail
Can you explain what type of functionality you require using facebook Open Graph Feature?

Re: New facebook Open Graph Feature

Posted: Wed May 05, 2010 7:33 am
by GrfxDan
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.

Re: New facebook Open Graph Feature

Posted: Wed May 19, 2010 8:33 am
by meer2005
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.

Re: New facebook Open Graph Feature

Posted: Thu May 20, 2010 7:50 am
by crazyjoe
I like this idea too. Has anyone had any luck implementing it?

Re: New facebook Open Graph Feature

Posted: Thu May 20, 2010 8:16 pm
by Shopping Cart Admin
Hello,

It looks pretty easy, I'll see if we can get a wiki article or something put together.

Re: New facebook Open Graph Feature

Posted: Mon May 24, 2010 9:20 am
by mazhar
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.

Re: New facebook Open Graph Feature

Posted: Mon May 24, 2010 9:25 am
by GrfxDan
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.

Re: New facebook Open Graph Feature

Posted: Mon May 24, 2010 9:27 am
by mazhar
Did you tested it, if yes I would like to hear your review. I mean Its working properly or not?

Re: New facebook Open Graph Feature

Posted: Mon May 24, 2010 9:55 am
by GrfxDan
Haven't tested it yet but I'll repost here when I do.

Re: New facebook Open Graph Feature

Posted: Mon May 24, 2010 3:12 pm
by meer2005
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 ??

Re: New facebook Open Graph Feature

Posted: Tue May 25, 2010 4:10 am
by mazhar
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.

Re: New facebook Open Graph Feature

Posted: Tue May 25, 2010 11:02 am
by mazhar
EDIT: Please look into comments below to find latest files for control.

Re: New facebook Open Graph Feature

Posted: Tue May 25, 2010 12:58 pm
by meer2005
works for me! thank you :D

Re: New facebook Open Graph Feature

Posted: Tue May 25, 2010 5:35 pm
by meer2005
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?

Re: New facebook Open Graph Feature

Posted: Wed May 26, 2010 9:38 am
by meer2005
Well, It looks like I got it to work by adding this metatag: <meta property="fb:admins" content="yourfacebookID"/>

Re: New facebook Open Graph Feature

Posted: Wed May 26, 2010 10:42 am
by mazhar
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 ?

Re: New facebook Open Graph Feature

Posted: Wed May 26, 2010 10:53 am
by meer2005
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.

Re: New facebook Open Graph Feature

Posted: Wed May 26, 2010 12:22 pm
by mazhar
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"]]

Re: New facebook Open Graph Feature

Posted: Wed May 26, 2010 1:17 pm
by meer2005
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.

Re: New facebook Open Graph Feature

Posted: Wed May 26, 2010 11:16 pm
by Shopping Cart Admin
Hello,

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

Re: New facebook Open Graph Feature

Posted: Fri May 28, 2010 2:02 pm
by SamsSteins
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.

Re: New facebook Open Graph Feature

Posted: Tue Jun 01, 2010 8:41 am
by mazhar

Re: New facebook Open Graph Feature

Posted: Tue Jun 22, 2010 9:51 am
by dappy2
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?