web-dev-qa-db-ja.com

動的Facebook Open Graphタグは可能ですか？

下記のjQueryを使用して<meta property="og:image" content="#">および<meta property="og:title" content="#">タグを動的に変更しています。 Chromeの「検査」でコードを表示すると、タグが正常に変更されています。

HTML：

<meta property="og:title" content="#">
<meta property="og:image" content="#">

jQuery：

$("meta[property='og:title']").attr("content", data.name);
$("meta[property='og:image']").attr("content", data.thumbnail.url);

しかし、 Facebookデバッガーツール は、それぞれに対してcontent="#"を表示しています。これは、JavaScriptがコンテンツを置き換える機会を得る前に、Facebookがソースコードを読み取るためだと思います。

これを回避する方法はありますか？

ありがとうございました。

jqueryhtmlfacebook-graph-apifacebook-opengraph
12
user1661677

FacebookはJavaScriptをまったく解析しません。動的なOpen Graphタグは使用できません。とにかくその場でそれらを変更することは実際には意味がありません。

サーバー上で動的にのみOGタグを変更できます-明らかに。例えば： https://yourdomain.com/dynamicogtags.php?title=xxx&description=xxx

<meta property="og:title" content="<?php echo $_GET['title'];?>">

それがあなたがやりたいことかどうかはわかりませんが、URLはそのように見苦しく見えます。もちろん、書き換えはいいでしょう。

prerender.io のようなものも試してみたいかもしれませんが、それが動的ogタグを処理するかどうかはわかりません。

11
luschn

以前の回答で説明したように、メタタグはサーバー側で入力する必要があります。ただし、ページをFacebookで共有したときに表示されるURL、タイトル、説明、画像を動的に変更できます。詳細については、「 JavaScriptでFacebookのオープングラフのメタデータを動的に変更する 」を参照してください。

1）Facebook SDKを含める

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : '124285848214697',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.10'
    });
    FB.AppEvents.logPageView();
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

124285848214697をappIdに置き換えます。

2）カスタム情報との共有をトリガーする関数を作成する

<script>
    function shareOverrideOGMeta(overrideLink, overrideTitle, overrideDescription, 
                                 overrideImage)
    {
        FB.ui({
            method: 'share_open_graph',
            action_type: 'og.likes',
            action_properties: JSON.stringify({
                object: {
                    'og:url': overrideLink,
                    'og:title': overrideTitle,
                    'og:description': overrideDescription,
                    'og:image': overrideImage
                }
            })
        },
        function (response) {
        // Action after response
        });
    }
</script>

3）動的な値で関数を呼び出す

<button onclick="shareOverrideOGMeta('http://www.stackoverflow.com', 
'Stack Overflow', 'The World\'s Largest Online Community for Coders', 
'https://via.placeholder.com/158x158')">Share</button>
1
Lauri Harpf

前述のように、FacebookはJavaScriptをまったく解析しません。

これを行う1つの方法（私が行う方法）は、prerender.ioのような事前レンダリングサービスを使用して、ページを事前レンダリングし、Webクローラーからのリクエストをユーザーエージェントに基づいてその事前レンダリングサーバーにリダイレクトします（方法は簡単に見つけることができます） GoogleのNginx/Apacheサーバーでそれを行います）。

事前レンダリングサービスは、ページのHTML/CSSレンダリングを生成しますが、ページが完全に読み込まれ、JavaScriptが実行されるまで待機してから、レンダリングを行います。このようにして、JavaScriptが実行され、OpenGraphタグが正しく設定されているWebサイトのレンダリングがFacebookに取得されます。

Prerenderはオープンソースなので、独自のprerenderサーバーを無料で実行できます！

1
Martin Vandersteen

これを試してみてください。

<?php

$params = array();
if(count($_GET) > 0) {
    $params = $_GET;
} else {
    $params = $_POST;
}
// defaults
if($params['type'] == "") $params['type'] = "restaurant";
if($params['locale'] == "") $params['locale'] = "en_US";
if($params['title'] == "") $params['title'] = "default title";
if($params['image'] == "") $params['image'] = "thumb";
if($params['description'] == "") $params['description'] = "default description";

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# MY_APP_NAME_SPACE: http://ogp.me/ns/fb/MY_APP_NAME_SPACE#">
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <!-- Open Graph meta tags -->
        <meta property="fb:app_id" content="MY_APP_ID" />
        <meta property="og:site_name" content="meta site name"/>
        <meta property="og:url" content="http://URL/index.php?type=<?php echo $params['type']; ?>&locale=<?php echo $params['locale']; ?>&title=<?php echo $params['title']; ?>&image=<?php echo $params['image']; ?>&description=<?php echo $params['description']; ?>"/>
        <meta property="og:type" content="MY_APP_NAME_SPACE:<?php echo $params['type']; ?>"/>
        <meta property="og:locale" content="<?php echo $params['locale']; ?>"/>
        <meta property="og:title" content="<?php echo $params['title']; ?>"/>
        <meta property="og:image" content="http://URL/img/<?php echo $params['image']; ?>.png"/>
        <meta property="og:description" content="<?php echo $params['description']; ?>"/>

    </head>
</html>
0
user7795526