Image, link and title for Facebook like button at the product list. - facebook

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><%# Utilities.ScrubText(((Product)Container.DataItem).ProductName) %>
</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&send=false&layout=button_count&width=88&show_faces=false&action=like&colorscheme=light&font&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.

Answer 2

The Like button likes a specific URL and if it's a product the user is liking, that link really should bring users back to a description of that product and not to a completely different set of content.
What you display on that propduct page itself isn't really important (it could be the full product list if you really wanted) provided that that URL returns the same meta tags to the Facebook crawler each time
What you're trying to do could be achieved by setting up a script which serves the meta tags for each product based on URL parameters (making sure to keep the og:url tags pointing to the correct URL to generate the same tags again.
Serve those tags to the Facebook crawler and redirect other browsers wherever you want.