0

製品のリストに Facebook の「いいね！」ボタンの正しい画像、タイトル、リンクを表示するにはどうすればよいですか?

私はいいねボタンをうまく実装していますが、製品の詳細に移動すると、製品が 1 つしか表示されません。

どうすれば製品のリストでそれを行うことができるか尋ねます.今のところ、私のFacebookページに表示されている画像はサイトの一般的な画像であり、製品の特定の画像ではありません.リンクは正しいです.

<meta property="og:image" content="some value"/>タグは head タグ内にのみ配置する必要がありますか? body タグ内では使えないのですか？

4

2 に答える 2

1

ニュース記事のメタ タグは、[いいね] ボタンを表示しているページにある必要はありません。ニュース記事は、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);
    }
}

1 つの URL に結び付けることができるメタ コンテンツ属性のセットは 1 つだけであるため、すべての [いいね!] ボタンには一意の URL パラメーターが必要です。これは、個別の Product.aspx ページに一意の ID パラメーターを設定することで実現できます。すべての製品ニュース ストーリーを 1 つのマスター リスト ページにリンクさせたい場合は、各製品の "og:url" メタ タグを同じにすることができます。

于 2012-06-15T15:05:03.417 に答える
1

Like ボタンは特定の URL を好みます。それがユーザーが気に入っている製品である場合、そのリンクはユーザーをその製品の説明に戻すべきであり、まったく別のコンテンツ セットに戻すべきではありません。その URL が毎回同じメタ タグを Facebook クローラーに返す場合、その製品ページ自体に表示するものはそれほど重要ではありません (必要に応じて完全な製品リストにすることもできます)。

あなたがしようとしていることは、URL パラメータに基づいて各製品のメタ タグを提供するスクリプトを設定することで実現できます (og:url同じタグを再度生成するために、タグが正しい URL を指していることを確認してください)。

これらのタグを Facebook クローラーに提供し、他のブラウザーを必要な場所にリダイレクトします。

于 2012-06-15T14:17:35.340 に答える