Question

如何在产品列表中显示Facebook赞按钮的正确图像，标题和链接？

我确实实现了类似按钮，但是当您导航到产品详细信息时，您只能看到一种产品。

我问我怎么能在产品列表中这样做，现在我的脸书页面上显示的图像是来自网站的通用图像，而不是产品的特定图像，链接是正确的。

标记<meta property="og:image" content="some value"/>必须只在head标记内吗？我不能在body标签内使用它？

Answer 1

Like按钮喜欢特定的URL，如果它是用户喜欢的产品，那么该链接确实应该让用户回到该产品的描述而不是完全不同的内容集。您在该支持页面上显示的内容并不重要（如果您真的需要，它可能是完整的产品列表），前提是该URL每次都会向Facebook抓取工具返回相同的元标记

您要尝试做的事情可以通过设置一个脚本来实现，该脚本根据URL参数为每个产品提供元标记（确保og:url标记指向正确的URL以生成再次使用相同的标签。

将这些标签投放到Facebook抓取工具，并将其他浏览器重定向到您想要的任何位置。

Answer 2

新闻报道的元标记不需要位于显示“赞”按钮的页面上。新闻报道将根据Like按钮的URL参数中列出的页面上的元标记生成。

这是一个例子。 -

此Repeater将使用自定义的Like按钮动态生成数据库中的产品列表：

<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>

这将是单独的产品页面上的代码隐藏，它会动态呈现产品数据库中的元标记：

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);
    }
}

请注意，每个Like按钮必须具有唯一的URL参数，因为只有一组元内容属性可以绑定到单个URL。这可以通过在单独的Product.aspx页面上具有唯一ID参数来实现。如果您只想将所有产品新闻故事链接回一个主列表页面，则每个产品的“og：url”元标记可以相同。

Facebook的图像，链接和标题，如产品列表中的按钮。

2 个答案: