Question

How can I display the right image, title and link for a Facebook Like button in a list of products?

I do implement sucessfully the like button but it is when you navigate to the product details, you see only one product.

I ask how can i do it in the list of products, for now the image displayed on my facebook page is a generic image from the site and not the specific image of the product, the link is right.

Must the tag <meta property="og:image" content="some value"/> only be inside the head tag? I cannot use it inside the body tag?

Answer 1

The meta tags for the news story don’t need to be on the page that is displaying the Like button. The news story will be generated from the meta tags on the page listed in the URL parameter of the Like button.

Here is an example. –

This Repeater will dynamically generate a list of products from a database with customized Like buttons:

<asp:Repeater ID="_RPT_Product" runat="server">
    <HeaderTemplate><h3>Products</h3><ul class="bulleted-list"></HeaderTemplate>
    <ItemTemplate><li><a href="http://www.yourdomainname.com/Product.aspx?ID=<%#((Product)Container.DataItem).ProductID %>" target="_blank"><%# Utilities.ScrubText(((Product)Container.DataItem).ProductName) %></a>
    </li>
        <div style="padding-top:10px;">
        <iframe
            src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.yourdomainname.com/Product.aspx%3FID%3D<%#((Product)Container.DataItem).ProductID %>%26x%3D1&amp;send=false&amp;layout=button_count&amp;width=88&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=23"
            scrolling="no" frameborder="0"
            style="border:none; overflow:hidden; width:88px; height:23px;"
            allowTransparency="true">
        </iframe></div><br />
    </ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</asp:Repeater>

This would be the code-behind on a separate Product page that dynamically renders meta tags from a product database:

protected void Page_Load(object sender, EventArgs e)
{    
    if (!Page.IsPostBack)
    {
        // Get the product meta content from the ID URL parameter.
        string productName = "";
        string productImageURL = "";
        string productDescription = "";
        int productID = 0;
        if (Request.QueryString["ID"] != null)
        {
            productID = Convert.ToInt32(Request.QueryString["ID"]);
        }
        if (Request.QueryString["ID"] != null)
        {
            using (ProductDatabaseDataContext db = new ProductDatabaseDataContext(Config.ConnectionStrings.ProductDatabase))
            {
                Product select = new Product();
                select = db.Products.FirstOrDefault(p =>
                    p.ProductID == Convert.ToInt32(Request.QueryString["ID"]));
                productName = select.ProductName;
                productImageURL = select.ProductImageURL;
                productDescription = select.ProductDescription;
            }
        }

        // Dynamically generate Open Graph Meta Tags for each Product:
        HtmlMeta _metaTitle = new HtmlMeta();
        _metaTitle.Name = "og:title";
        _metaTitle.Content = "Product: " + productName;
        this.Header.Controls.Add(_metaTitle);

        HtmlMeta _metaURL = new HtmlMeta();
        _metaURL.Name = "og:url";
        _metaURL.Content = "http://www.yourdomainname.com/Product.aspx?ID=" + Convert.ToString(productID);
        this.Header.Controls.Add(_metaURL);

        HtmlMeta _metaImage = new HtmlMeta();
        _metaImage.Name = "og:image";
        _metaImage.Content = Convert.ToString(productImageURL);
        this.Header.Controls.Add(_metaImage);

        HtmlMeta _metaDescription = new HtmlMeta();
        _metaDescription.Name = "og:description";
        _metaDescription.Content = Convert.ToString(productDescription);
        this.Header.Controls.Add(_metaDescription);
    }
}

Note that every Like button must have a unique URL parameter, because only one set of meta content attributes can be tied to a single URL. This can be accomplished by having a unique ID parameter on your separate Product.aspx page. The “og:url” meta tag for each of your products can be the same if you just want all of the product news stories to link back to one master list page.