0

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

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

我问我如何在产品列表中做到这一点，现在我的 facebook 页面上显示的图像是来自网站的通用图像，而不是产品的特定图像，链接是正确的。

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

4

2 回答 2

1

Like 按钮喜欢特定的 URL，如果它是用户喜欢的产品，那么该链接确实应该将用户带回到该产品的描述，而不是完全不同的内容集。您在该产品页面本身上显示的内容并不重要（如果您真的想要，它可能是完整的产品列表），只要该 URL 每次都向 Facebook 爬虫返回相同的元标记

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

将这些标签提供给 Facebook 爬虫，并将其他浏览器重定向到您想要的任何位置。

于 2012-06-15T14:17:35.340 回答
1

新闻报道的元标记不需要出现在显示“赞”按钮的页面上。新闻故事将由 Like 按钮的 URL 参数中列出的页面上的元标记生成。

这是一个例子。-

此中继器将使用自定义的 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”元标记可以相同。

于 2012-06-15T15:05:03.417 回答