How to send the og:Title og:Image og:Description og:url info from C# to Facebook

Question

I have a like button in my page. On clicking the Button, I am trying to send the following tags information in the facebook...

<meta property="og:title" content="Title" />
<meta property="og:description" content="Description" />
<meta property="og:url" content="url info" />
<meta property="og:image" content="image url" />

Following is my Like Button Frame

<iframe frameborder="0" scrolling="no" allowtransparency="true" 
  style="border: none; overflow: hidden; width: 260px; height: 35px;" 
  src="http://www.facebook.com/plugins/like.php?
  href=http://localhost:49334/WebForm1.aspx&amp;send=false&amp;
  layout=button_count&amp;width=100&amp;show_faces=false&amp;
  action=like&amp;colorscheme=light&amp;font=arial&amp;height=35">
</iframe>

Following is the first Approach to dynamically handle the Meta Tags.

var fbTitleTag = new MetaTag
{
    AgentPageURL = "/",
    MetaTagName = "og:title",
    UserSiteName = CurrentAgent.UserSiteName,
    MetaTagContent = Request.Cookies.Get("MasterTitle").Value
};

var fbDesc = new MetaTag
{
    AgentPageURL = "/",
    MetaTagName = "og:description",
    UserSiteName = CurrentAgent.UserSiteName,
    MetaTagContent = Request.Cookies.Get("MasterDescription").Value
};


var fbUrl = new MetaTag
{
    AgentPageURL = "/",
    MetaTagName = "og:url",
    UserSiteName = CurrentAgent.UserSiteName,
    MetaTagContent = Request.Cookies.Get("MasterURL").Value
};



var fbImage = new MetaTag
{
    AgentPageURL = "/",
    MetaTagName = "og:image",
    UserSiteName = CurrentAgent.UserSiteName,
    MetaTagContent = Request.Cookies.Get("MasterImage").Value
};

var tags = new MetaTagCollection { fbTitleTag, fbDesc, fbUrl, fbImage };

Literal ltMetaTags = null;
ltMetaTags = (Literal)this.Master.FindControl("ltMetaTags");

MetaTags(tags, "wsws", "/", ltMetaTags, true);

public static void MetaTags(MetaTagCollection MetaTags, string name, string strRawURL, Literal ltlMetaHolders, bool isProp)
{
    //  ltlMetaHolders.Text = "";

    foreach (AgentMetaTag oAgentMetaTag in agentMetaTags)
    {
        if (string.Compare(strRawURL, oAgentMetaTag.AgentPageURL, true) == 0)
        {
            if (oAgentMetaTag.MetaTagName.ToLower().Trim() != "footer" && oAgentMetaTag.MetaTagName.ToLower().Trim() != "title")
            {
                if (oAgentMetaTag.MetaTagName.ToLower().Trim() == "fbtitle")
                    oAgentMetaTag.MetaTagName = "title";

                RenderMetaTagByContentName(ltlMetaHolders, oAgentMetaTag.MetaTagName, oAgentMetaTag.MetaTagContent, isProp);
            }
        }
    }
}

public static void RenderMetaTagByContentName(Literal ltlMetaHolder, string contentName, string content, bool isProp)
{
    var metaTagFromat = isProp ? "<meta property=\"{0}\" content=\"{1}\" />" : "<meta name=\"{0}\" content=\"{1}\" /> ";

    ltlMetaHolder.Text += string.Format(metaTagFromat, contentName, content);

}

Following is the second Approach to dynamically handle the Meta Tags.

HtmlMeta tag = new HtmlMeta();
tag.Attributes.Add("property", "og:title");
tag.Content = "Title";
Page.Header.Controls.Add(tag);

HtmlMeta tag1 = new HtmlMeta();
tag1.Attributes.Add("property", "og:description");
tag1.Content = "Desc";
Page.Header.Controls.Add(tag1);

HtmlMeta tagurl = new HtmlMeta();
tagurl.Attributes.Add("property", "og:url");
tagurl.Content = "URL info";
Page.Header.Controls.Add(tagurl);

HtmlMeta tagimg = new HtmlMeta();
tagimg.Attributes.Add("property", "og:img");
tagimg.Content = "Image URL";
Page.Header.Controls.Add(tagimg);

Finally it is rendering the meta tags as below..

<meta property="og:title" content="Title" />
<meta property="og:description" content="Description" />
<meta property="og:url" content="url info" />
<meta property="og:image" content="image url" />

Now the moment i click the Like button it only sends the url. and not sending the Description/Image/Title.

I am using the link "http://developers.facebook.com/tools/debug". It says that the Description/Image/Title is missing.

Any Ideas?

Solution 1

You don't send the metadata to Facebook, Facebook retrieves the metadata from the page's HTML when it loads the page. Try viewing your URL with the following tool:

http://developers.facebook.com/tools/debug/og/echo?q=<your URL here>

It will show you what Facebook sees (it's the 'Scraped URL' link at the bottom of the debug tool that you're using now).

If it does not include the metadata tags then Facebook does not see them and it won't add the metadata to its Open Graph object. If that's the case then you might not be adding the metadata properly to the HTML.

Solution 2

The second approach looks correct. The question is, where did you place that code? It should be called on Page_Load.

Clicking the Like button does not send the og:xxxx information. Your page should already have those og:xxxx meta tags from the very beginning.

Solution 3

Do you use MVC ASP.NET?

You can try to set meta tags in Layout.cshtml as

<meta property="og:type" content="website">
<meta property="og:site_name" content="Site name">
<meta property="og:title" content="@ViewBag.OGTitle" />
<meta property="og:description" content="@ViewBag.OGDesc" />
<meta property="og:url" content="@ViewBag.OGUrl">
<meta property="og:image" content="@ViewBag.OGImage" />

and then set tags values in separate page MyPage.cshtml

@model Books.Web.Models.ItemSource
@{
    ViewBag.OGTitle = Model.Item.Title;
    ViewBag.OGDesc = Model.Item.Description;
    ViewBag.OGUrl = Request.Url.AbsoluteUri;
    ViewBag.OGImage = Request.Url.Scheme + "://" + Request.Url.Host + Url.Action("ItemCover", "Image", new { id = Model.Item.Id, height = 350 });
    Layout = "~/Views/Shared/Layout.cshtml";
}
<div>Page content here</div>

Comments

[Admin]

I am exactly doing the same see at the bottom of my query.

[Simeon Visser]

But do you see metadata in the scraped URL? You are using the Facebook debug tool but you haven't indicated what you see in the content that Facebook scrapes from your URL.

[Simeon Visser]

In that case you need to figure out why the meta tags are not being added to the HTML. You are creating a string with the HTML meta tags but where are you adding them to the HTML itself? Is that working properly?

[Admin]

BUT i am able to see the meta tags in Page View source. I right clicked the page and checked the Page View source and it is showing. Why not Facebook is not showing the same?

[Simeon Visser]

Have you also added the required elements to <html>? It should look like this : <html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">.

[Admin]

it's like this <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

[Simeon Visser]

Can you try adding the xmlns:og part as well (because you're using og: tags)? It's part of the Open Graph protocol.

[Admin]

after doing this, When i press like, I shows confirm button and clicking on confirm i shows another window to like the same. I press like again and it sets the like count to 0 and again pressing the like start the same process over and over again

[Admin]

This is not an answer but accepting it as the most closest answer. thanks for the help.