質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.21%

出直し:SSL化したらFBのいいねボタンが表示されなくなった

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,610
退会済みユーザー

退会済みユーザー

前提・実現したいこと

Webサイトをhttpからhttpsにしたら、Facebookのいいねボタンが表示されなくなった
なお、ソーシャルボタンは遅延読み込みを行っています。 

発生している問題・エラーメッセージ

http:// 時に運営していた時にいいねが存在するページにおいて
https:// 後、Facebookのいいねボタン類が表示されない
いいねが存在しなかったページは、いいねボタン類が表示される。

https://developers.facebook.com/docs/plugins/like-button?locale=ja_JP
から取ってきたコードでも現象が発生します。

該当のソースコード

出直し前と変わってます

<!doctype html>
<html>
<head prefix="og:http://ogp.me/ns# fb:http://ogp.me/ns/fb# article:http://ogp.me/ns/article#">
<meta charset="utf-8">
<title>example</title>
<meta name="title" content="example">
<meta name="description" content="description" >
<meta name="keywords" content="keyword,keyword,...">
<meta property="og:type" content="website">
<meta property="og:title" content="title">
<meta property="og:description" content="description">
<meta name="twitter:title" content="title">
<meta name="twitter:description" content="description">
<meta property="og:image" content="https://example.com/image/ogp.jpg">
<meta property="og:url" content="https://example.com/">
<meta property="og:locale" content="ja_JP">
<meta property="fb:app_id" content="hogehogehoge">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/image/ogp.jpg">
<meta name="twitter:url" content="https://example.com/">
<meta name="robots" content="index,follow,noarchive,notranslate">
<meta name="googlebot" content="index,follow,noarchive,notranslate">
<link rel="canonical" href="https://example.com/">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<header>
<nav>
<div id="fb-root">
</div>
<ul>
<li id="twitter">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://example.com/" data-hashtags="hashtag,hashtag,..." data-lang="ja" data-count="horizontal">&nbsp;</a>
</li>
<li id="facebook">
<div class="fb-like" data-href="http://example.com/" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="true">
</div>
</li>
<li id="hatena">
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="basic-counter" data-hatena-bookmark-lang="ja" title="">
<img src="" alt="" width="20" height="20" style="border: none;" />
</a>
</li>
<li id="googleplusone">
<div class="g-plusone" data-size="medium" data-annotation="none">
</div>
<div class="g-plus" data-action="share" data-annotation="none">
</div>
</li>
</ul>
</nav>
</body>
</html>
    /* 遅延読み込み */
    /* http://cappee.net/coding/social-async */

    add = function (u, i) {
        if (!D.getElementById(i)) {
            var s, e = D.getElementsByTagName("script")[0],
                s = D.createElement("script");
                s.src = u;
            if (i) {
                s.id = i;
            }
            e.parentNode.insertBefore(s, e);
        }
    };

    $(document).ready(function() {
        setTimeout(function(){
            W._gaq = [["_setAccount", "UA-hogehoge],["_trackPageview"]];
            W.___gcfg = {lang: "ja"};
            add("https:" == location.protocol ? "//ssl" : "//www") + ".google-analytics.com/ga.js", "ga");
            add("https://apis.google.com/js/plusone.js");
        }, 1200);

        setTimeout(function(){
            add("//b.st-hatena.com/js/bookmark_button_wo_al.js");
        }, 900);

        setTimeout(function(){
            add("//platform.twitter.com/widgets.js", "twitter-wjs");
        }, 300);

        setTimeout(function(){
            add("//connect.facebook.net/ja_JP/all.js#xfbml=1", "facebook-jssdk");
        }, 600);
    });

Facebook SDKから取ってきたコードでもなります。

<html>
<body>
<div id="fb-root"></div>
<script>(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/ja_JP/sdk.js#xfbml=1&version=v2.9";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="https://example.com/" data-layout="button" data-action="recommend" data-size="small" data-show-faces="false" data-share="true"></div>

</body>
</html>

現在キャッシュサーバ側では、以下でSSLにリダイレクトしています。
Facebookのクローラーのみリダイレクトせず様子を見ています。

server {
        listen       80;
        server_name  example.com;

        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Real-IP $remote_addr;

        # Facebook only
        location ~* {
                proxy_cache zone1;
                proxy_cache_key "$scheme://$host$request_uri$is_args$args";
                proxy_cache_valid 200 1s;
                if ($http_user_agent ~ facebookexternalhit) {
                    proxy_pass http://10.0.0.xxx:xxxxx;
                }
                if ($http_user_agent !~ facebookexternalhit) {
                        rewrite ^(.*) https://$host$1 last;
                }

        }
}

試したこと

https://teratail.com/questions/74628 参照

以下をhttp:// https:// どちらに置いても、いいねが表示されない

<html>
<head>
<meta property="og:url" content="http://example.com/">
<meta property="og:locale" content="ja_JP">
<meta property="fb:app_id" content="1374528712613636">
</head>
<body>
<div id="fb-root"></div>
<script>(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/ja_JP/sdk.js#xfbml=1&version=v2.9";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="http://example.com/" data-layout="button" data-action="recommend" data-size="small" data-show-faces="false" data-share="true"></div>
</body>
</html>

iframeのソースよりブラウザから

https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fexample.com%2F&width=0&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId=hogehoge


にアクセスしても、何も表示されない

ちなみに、以下にアクセスすると、表示される

https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fexample.com%2Fabcdefg&width=0&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId=hogehoge


teratailの以下の質問が非常に近いと思われますが、回答が何もない
https://teratail.com/questions/70032

その他、google検索を幾度もなく行ったが、飼料は見つからない。

Facebookをごまかすために
http://example.com/?abc
とかいうURLをdata-hrefを設定したが、一時いいねが表示されたものの
ごまかしたことがばれて、いいねが表示されなくなった。

Facebookの機能として、自分自身で、いいねが表示されないページにおいて
「いいね」→「いいね取り消し」、
「シェア」→シェア取り消しを行っているものの
もともといいねが2件しかなかった、いいねの表示されていなページの
TOPページのいいねの数が、Facebookデバッガー上では、急激に100件弱に増えていたことを確認した。

原因はわからないが、http://example.com/?abc にしていた間に、更にいいねが3件増えて、現在5件になっています。

なお、TOPサイトのアクセス数は、開設以来、延べ395です

補足情報(言語/FW/ツール等のバージョンなど)

FreeBSD 10.3 + nginx (cache&SSL)
FreeBSD 10.3 + Apache 2.2 (contents)
conoha VPS HDD plan (localnet connected)

その他

唯一いいねの存在する特定URL(TOPページですが)に対して、Facebook側にBANされたという可能性はあるのでしょうか?

現状

該当する1サイトのみ緊急のため、代替のボタンにすり替えて対処しましたが、
SSL化のテスト中の別サイトでも起きています。
こちらはいいねが100000以上存在しているので、引き継ぎたいのですが。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • TakeoAsai

    2017/05/05 15:28

    ブラウザのコンソール、ネットワークでfb scriptが読み込まれていることは確認しましたか?

    キャンセル

  • 退会済みユーザー

    2017/05/07 11:17

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

  • 退会済みユーザー

    退会済みユーザー

    2017/05/07 12:42

    TakeoAsaiさん 読み込まれていることは確認しています。test.htmlを作成し、data-hrefを"http://example.com/a.html"(test.htmlではない)に対して行うといいねボタンは表示されますが、data-hrefを"http://example.com/"にすると表示されなくなります。

    キャンセル

回答 1

+1

facebook側は、http://とhttps://を区別するらしいので、
og:urlとcanonicalなurlが従来のhttp://じゃない場合は別のサイトだなって判定しちゃうってことはないかな。

これ、参考になれば。
常時https/SSL化してもFacebook記事の「いいね!」数を引き継ぐ方法(正攻法編) : アークウェブのブログ

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/07 02:42

    ありがとうございます。

    なんとなく、いいねの存在する、http://example.com/ のみ、ブロックされているようないイメージがあります。

    他の検証コードについては、編集して加えてみました。

    キャンセル

  • 2017/05/07 12:47

    ちなみに、サイト開設も間もないので、http:// →https:// にして、「いいね」の数は引き継ぐ必要はないと考えてください。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる