Q&A
回答がつかないからと言って同じ内容で再投稿するのはやめましょう。コードを変更したならば、質問文自体を変更してください。
###前提・実現したいこと
Webサイトをhttpからhttpsにしたら、Facebookのいいねボタンが表示されなくなった
なお、ソーシャルボタンは遅延読み込みを行っています。
###発生している問題・エラーメッセージ
http:// 時に運営していた時にいいねが存在するページにおいて https:// 後、Facebookのいいねボタン類が表示されない いいねが存在しなかったページは、いいねボタン類が表示される。 https://developers.facebook.com/docs/plugins/like-button?locale=ja_JP から取ってきたコードでも現象が発生します。
###該当のソースコード
出直し前と変わってます
HTML
1<!doctype html> 2<html> 3<head prefix="og:http://ogp.me/ns# fb:http://ogp.me/ns/fb# article:http://ogp.me/ns/article#"> 4<meta charset="utf-8"> 5<title>example</title> 6<meta name="title" content="example"> 7<meta name="description" content="description" > 8<meta name="keywords" content="keyword,keyword,..."> 9<meta property="og:type" content="website"> 10<meta property="og:title" content="title"> 11<meta property="og:description" content="description"> 12<meta name="twitter:title" content="title"> 13<meta name="twitter:description" content="description"> 14<meta property="og:image" content="https://example.com/image/ogp.jpg"> 15<meta property="og:url" content="https://example.com/"> 16<meta property="og:locale" content="ja_JP"> 17<meta property="fb:app_id" content="hogehogehoge"> 18<meta name="twitter:card" content="summary_large_image"> 19<meta name="twitter:image" content="https://example.com/image/ogp.jpg"> 20<meta name="twitter:url" content="https://example.com/"> 21<meta name="robots" content="index,follow,noarchive,notranslate"> 22<meta name="googlebot" content="index,follow,noarchive,notranslate"> 23<link rel="canonical" href="https://example.com/"> 24<meta http-equiv="X-UA-Compatible" content="IE=edge"> 25</head> 26<body> 27<header> 28<nav> 29<div id="fb-root"> 30</div> 31<ul> 32<li id="twitter"> 33<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"> </a> 34</li> 35<li id="facebook"> 36<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"> 37</div> 38</li> 39<li id="hatena"> 40<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="basic-counter" data-hatena-bookmark-lang="ja" title=""> 41<img src="" alt="" width="20" height="20" style="border: none;" /> 42</a> 43</li> 44<li id="googleplusone"> 45<div class="g-plusone" data-size="medium" data-annotation="none"> 46</div> 47<div class="g-plus" data-action="share" data-annotation="none"> 48</div> 49</li> 50</ul> 51</nav> 52</body> 53</html>
JavaScript
1 /* 遅延読み込み */ 2 /* http://cappee.net/coding/social-async */ 3 4 add = function (u, i) { 5 if (!D.getElementById(i)) { 6 var s, e = D.getElementsByTagName("script")[0], 7 s = D.createElement("script"); 8 s.src = u; 9 if (i) { 10 s.id = i; 11 } 12 e.parentNode.insertBefore(s, e); 13 } 14 }; 15 16 $(document).ready(function() { 17 setTimeout(function(){ 18 W._gaq = [["_setAccount", "UA-hogehoge],["_trackPageview"]]; 19 W.___gcfg = {lang: "ja"}; 20 add("https:" == location.protocol ? "//ssl" : "//www") + ".google-analytics.com/ga.js", "ga"); 21 add("https://apis.google.com/js/plusone.js"); 22 }, 1200); 23 24 setTimeout(function(){ 25 add("//b.st-hatena.com/js/bookmark_button_wo_al.js"); 26 }, 900); 27 28 setTimeout(function(){ 29 add("//platform.twitter.com/widgets.js", "twitter-wjs"); 30 }, 300); 31 32 setTimeout(function(){ 33 add("//connect.facebook.net/ja_JP/all.js#xfbml=1", "facebook-jssdk"); 34 }, 600); 35 }); 36
Facebook SDKから取ってきたコードでもなります。
HTML
1<html> 2<body> 3<div id="fb-root"></div> 4<script>(function(d, s, id) { 5 var js, fjs = d.getElementsByTagName(s)[0]; 6 if (d.getElementById(id)) return; 7 js = d.createElement(s); js.id = id; 8 js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.9"; 9 fjs.parentNode.insertBefore(js, fjs); 10}(document, 'script', 'facebook-jssdk'));</script> 11 12<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> 13 14</body> 15</html>
現在キャッシュサーバ側では、以下でSSLにリダイレクトしています。
Facebookのクローラーのみリダイレクトせず様子を見ています。
nginx
1server { 2 listen 80; 3 server_name example.com; 4 5 proxy_set_header Host $host; 6 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 7 proxy_set_header X-Forwarded-Host $host; 8 proxy_set_header X-Forwarded-Server $host; 9 proxy_set_header X-Real-IP $remote_addr; 10 11 # Facebook only 12 location ~* { 13 proxy_cache zone1; 14 proxy_cache_key "$scheme://$host$request_uri$is_args$args"; 15 proxy_cache_valid 200 1s; 16 if ($http_user_agent ~ facebookexternalhit) { 17 proxy_pass http://10.0.0.xxx:xxxxx; 18 } 19 if ($http_user_agent !~ facebookexternalhit) { 20 rewrite ^(.*) https://$host$1 last; 21 } 22 23 } 24}
###試したこと
https://teratail.com/questions/74628 参照
以下をhttp:// https:// どちらに置いても、いいねが表示されない
HTML
1<html> 2<head> 3<meta property="og:url" content="http://example.com/"> 4<meta property="og:locale" content="ja_JP"> 5<meta property="fb:app_id" content="1374528712613636"> 6</head> 7<body> 8<div id="fb-root"></div> 9<script>(function(d, s, id) { 10 var js, fjs = d.getElementsByTagName(s)[0]; 11 if (d.getElementById(id)) return; 12 js = d.createElement(s); js.id = id; 13 js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.9"; 14 fjs.parentNode.insertBefore(js, fjs); 15}(document, 'script', 'facebook-jssdk'));</script> 16 17<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> 18</body> 19</html>
iframeのソースよりブラウザから
HTML
1https://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
にアクセスしても、何も表示されない
ちなみに、以下にアクセスすると、表示される
HTML
1https://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されたという可能性はあるのでしょうか？
###現状
該当する１サイトのみ緊急のため、代替のボタンにすり替えて対処しましたが、
SSL化のテスト中の別サイトでも起きています。
こちらはいいねが100000以上存在しているので、引き継ぎたいのですが。
今日中にと言われています。（今日は祝日ではありません）；；他サイトにスパムして急いで回答を得たいぐらいの気持ちです。
ブラウザのコンソール、ネットワークでfb scriptが読み込まれていることは確認しましたか？
TakeoAsaiさん 読み込まれていることは確認しています。test.htmlを作成し、data-hrefを"http://example.com/a.html"(test.htmlではない）に対して行うといいねボタンは表示されますが、data-hrefを"http://example.com/"にすると表示されなくなります。
回答1件
0
facebook側は、http://とhttps://を区別するらしいので、
og:urlとcanonicalなurlが従来のhttp://じゃない場合は別のサイトだなって判定しちゃうってことはないかな。
これ、参考になれば。
常時https/SSL化してもFacebook記事の「いいね!」数を引き継ぐ方法（正攻法編） : アークウェブのブログ
投稿2017/05/05 11:09
退会済みユーザー
総合スコア0
ありがとうございます。
なんとなく、いいねの存在する、http://example.com/ のみ、ブロックされているようないイメージがあります。
他の検証コードについては、編集して加えてみました。
ちなみに、サイト開設も間もないので、http:// →https:// にして、「いいね」の数は引き継ぐ必要はないと考えてください。
あなたの回答
tips
プレビュー
