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

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

新規登録して質問してみよう
ただいま回答率
85.49%
SSL

SSL(Secure Sockets Layer)とは、暗号化されたプロトコルで、インターネット上での通信セキュリティを提供しています。

Facebook

Facebookは、実名登録制のSNS(ソーシャル・ネットワーキング・サービス)です。開発者用のデベロッパーサイトが存在し、一般ユーザーによるFacebook向けアプリケーション開発が可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

2866閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

SSL

SSL(Secure Sockets Layer)とは、暗号化されたプロトコルで、インターネット上での通信セキュリティを提供しています。

Facebook

Facebookは、実名登録制のSNS(ソーシャル・ネットワーキング・サービス)です。開発者用のデベロッパーサイトが存在し、一般ユーザーによるFacebook向けアプリケーション開発が可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2017/05/02 05:50

編集2017/05/05 05:29

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

###発生している問題・エラーメッセージ
Facebookのいいねボタンが表示されない

エラーメッセージ なし ツイートボタンは正常に表示される

###該当のソースコード

HTML

1<nav> 2<div id="fb-root"></div> 3<ul class="container nav navbar-inverse navbar-inner nav-pills"> 4<li id="twitter"><a href="https://twitter.com/share" class="twitter-share-button" data-url="https://example.com/" data-hashtags="hogehoge" data-lang="ja" data-count="horizontal">&nbsp;</a></li> 5<li id="facebook"><div class="fb-like" data-href="https://example.com/" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div></li> 6</ul> 7</nav>

JavaScript

1 setTimeout(function(){ 2 W._gaq = [["_setAccount","UA-hogehoge","_trackPageview"]]; 3 W.___gcfg = {lang: "ja"}; 4 var s, e = D.getElementsByTagName("script")[0], 5 a = function (u, i) { 6 if (!D.getElementById(i)) { 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 a("//ssl.google-analycs.com/ga.js","ga"); 16 a("//platform.twitter.com/widgets.js","twitter-wjs"); 17 a("//connect.facebook.net/ja_JP/all.js#xfbml=1","facebook-jssdk"); 18 }, 3000); 19 20

###試したこと
SSL可能な環境が本番環境しかないため、現状どのように解決すべきか模索中

https://developers.facebook.com/docs/plugins/like-button?locale=ja_JP
でとってきたコードすら動きませんでした。
http:// の別のサイトに置くと表示されます。

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<div class="fb-like" data-href="https://example.com/" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div> 12</body> 13</html>

Facebookデバッガーの結果

スクレイピングの実行時間 7分前
レスポンスコード 200
取得したURL https://ほげほげ/
カノニカルURL https://ほげほげ/ 2件のいいね!、シェア、コメント(詳細)
リンクをプレビュー (正常)
サーバーIP ほげほげ

rawタグに基いて、以下のOpen Graphプロパティが構築されました

###試したこと追記 20170504
https://example.com/ (いいねの存在するTOPページ) だけ表示されなく
https://example.com/page.html 等はいいねが表示されているため、
nginx を以下のように変更して様子見中。

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.***:*****; 18 } 19 if ($http_user_agent !~ facebookexternalhit) { 20 rewrite ^(.*) https://$host$1 last; 21 } 22 23 } 24}

###補足情報(言語/FW/ツール等のバージョンなど)
HTMLは日本語を&#xxxx;化しています。
JavaScriptはyuicompressor+jsPacker.plで圧縮しています。
nginxのリバースプロクシを利用してSSL化をしているので、コンテンツサーバー側はhttpでアクセスされます。

出直し先:https://teratail.com/questions/74943

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

投稿2017/05/05 05:29

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyahan

2017/05/05 05:36

回答がつかないからと言って同じ内容で再投稿するのはやめましょう。コードを変更したならば、質問文自体を変更してください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問