ITOBEN STYLE > EC-CUBE:Facebook等のソーシャルブックマークとSSL 2012年5月23日カテゴリー:未分類 EC-CUBE:Facebook等のソーシャルブックマークとSSL EC-CUBE:FacebookやTwitterなどのソーシャルブックマークの表示 https://itoben.com/style/427.html 上記の方法では、javascriptをhttp://用とhttps://用に分けることでSSL接続への対応を行っているが、その対応が不十分なためにSSL接続すると「セキュリティで保護されていないページが混在している」というアラートが出てしまうし、表示されないボタンもある。 プログラムの動作には問題ないが、購入者を不安に思わせる原因にもなりかねないので、「アラートを表示させない」ことを優先的に考え、上記の記事を変更する。 1 アラートが表示され、ボタンが表示されない原因 (1)SSL接続している状態にもかかわらず、jquery.socialbutton-1.8.1.jsの記述は、http://から始まるファイルに非SSL接続しているためアラートが表示されてしまう。 (2)そこで、jquery.socialbutton-1.8.1.js内の「http://」をすべて「https://」に書き換えたssl_jquery.socialbutton-1.8.1.jsを作成し、SSL接続の時にアクセスするようにする。 (3)ところが、https://でボタン画像等にアクセスしても、SSL接続に対応していないため、画像が表示されないものが出てきてしまう。 (4)https://から始めてもボタンがちゃんと表示されるのは、「Twitter」、Facebookの「いいね!」と、もともとhttps://で設定されているGoogleプラスなので、SSL接続のみ、他のボタンはコメントアウトして表示させないような処置をとる。 2 SSL接続の時に、対応していないボタンは表示しない。 (1) ■data/Smarty/templates/default/frontparts/bloc/socialbtn.tpl 内を下記に変更 [php] [/php] (2) ■data/Smarty/templates/sphone/frontparts/bloc/socialbtn.tpl 内を下記に変更 [php] [/php] 3 jquery.socialbutton-1.8.1.jsを変更する ファイルパスの指定を「http://」から「//」に変更する。(2カ所変更) 「//」から始めると、アクセスしているページの接続方法に対応した接続方法になる。http://から始まる非SSL接続であればhttp://から始まるファイルとして読み込み、https://から始まるSSL接続であればhttps://から始まるファイルとして読み込む。 (1) 479ページあたり [php] var tag = ‘‘; [/php] ↓変更 [php] var tag = ‘‘; [/php] (2) 528ページあたり [php] $(‘body’).append(‘‘); [/php] ↓変更 [php] $(‘body’).append(‘‘); [/php] 4 jquery.socialbutton-1.8.1.jsへのリンクを修正する。ssl_jquery.socialbutton-1.8.1.jsは使用しない。 (1)■data/Smarty/templates/default/frontparts/bloc/site_frame.tpl [php] [/php] ↓変更 [php] [/php] (2)■data/Smarty/templates/sphone/frontparts/bloc/site_frame.tpl [php] [/php] ↓変更 [php] [/php]
EC-CUBE:FacebookやTwitterなどのソーシャルブックマークの表示
https://itoben.com/style/427.html
上記の方法では、javascriptをhttp://用とhttps://用に分けることでSSL接続への対応を行っているが、その対応が不十分なためにSSL接続すると「セキュリティで保護されていないページが混在している」というアラートが出てしまうし、表示されないボタンもある。
プログラムの動作には問題ないが、購入者を不安に思わせる原因にもなりかねないので、「アラートを表示させない」ことを優先的に考え、上記の記事を変更する。
1 アラートが表示され、ボタンが表示されない原因
(1)SSL接続している状態にもかかわらず、jquery.socialbutton-1.8.1.jsの記述は、http://から始まるファイルに非SSL接続しているためアラートが表示されてしまう。
(2)そこで、jquery.socialbutton-1.8.1.js内の「http://」をすべて「https://」に書き換えたssl_jquery.socialbutton-1.8.1.jsを作成し、SSL接続の時にアクセスするようにする。
(3)ところが、https://でボタン画像等にアクセスしても、SSL接続に対応していないため、画像が表示されないものが出てきてしまう。
(4)https://から始めてもボタンがちゃんと表示されるのは、「Twitter」、Facebookの「いいね!」と、もともとhttps://で設定されているGoogleプラスなので、SSL接続のみ、他のボタンはコメントアウトして表示させないような処置をとる。
2 SSL接続の時に、対応していないボタンは表示しない。
(1) ■data/Smarty/templates/default/frontparts/bloc/socialbtn.tpl
[php]
[/php]
(2) ■data/Smarty/templates/sphone/frontparts/bloc/socialbtn.tpl
[php]
[/php]
3 jquery.socialbutton-1.8.1.jsを変更する
ファイルパスの指定を「http://」から「//」に変更する。(2カ所変更)
「//」から始めると、アクセスしているページの接続方法に対応した接続方法になる。http://から始まる非SSL接続であればhttp://から始まるファイルとして読み込み、https://から始まるSSL接続であればhttps://から始まるファイルとして読み込む。
(1) 479ページあたり
[php]
var tag = ‘‘;
[/php]
↓変更
[php]
var tag = ‘‘;
[/php]
(2) 528ページあたり
[php]
$(‘body’).append(‘‘);
[/php]
↓変更
[php]
$(‘body’).append(‘‘);
[/php]
4 jquery.socialbutton-1.8.1.jsへのリンクを修正する。ssl_jquery.socialbutton-1.8.1.jsは使用しない。
(1)■data/Smarty/templates/default/frontparts/bloc/site_frame.tpl
[php]
[/php]
↓変更
[php]
[/php]
(2)■data/Smarty/templates/sphone/frontparts/bloc/site_frame.tpl
[php]
[/php]
↓変更
[php]
[/php]