CODEWITHSUNDEEP
c#asp.netc#-4.0facebook-likemeta-tags
user1425057
user1425057

Reputation:

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

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?

Upvotes: 4

Views: 19336

Answers (3)

Kate
Kate

Reputation: 775

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>

Upvotes: 2

rikitikitik
rikitikitik

Reputation: 2450

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.

Upvotes: 1

Simeon Visser
Simeon Visser

Reputation: 122336

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.

Upvotes: 2

Related Questions