EC-CUBE：Facebook等のソーシャルブックマークとSSL

EC-CUBE：FacebookやTwitterなどのソーシャルブックマークの表示
http://www.itoben.com/blog/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

内を下記に変更

<!--{if ($smarty.server.HTTPS != "") && ($smarty.server.HTTPS != "off")}-->
<!--<div class="hatena"></div>-->
<!--<div class="evernote"></div>-->
<!--<div class="gree"></div>-->
<div><g:plusone size="medium"></g:plusone></div>
<!--{if $smarty.const.ACCOUNT_KEY_TWITTER != "なし"}-->
<div class="twitter"></div>
<!--{/if}-->
<!--<div class="facebook_share"></div>-->
<div class="facebook_like"></div>
<!--{else}-->
<div class="hatena"></div>
<div class="evernote"></div>
<div class="gree"></div>
<div><g:plusone size="medium"></g:plusone></div>
<!--{if $smarty.const.ACCOUNT_KEY_TWITTER != "なし"}-->
<div class="twitter"></div>
<!--{/if}-->
<div class="facebook_share"></div>
<div class="facebook_like"></div>
<!--{/if}-->

（2）　■data/Smarty/templates/sphone/frontparts/bloc/socialbtn.tpl

内を下記に変更

<!--{if ($smarty.server.HTTPS != "") && ($smarty.server.HTTPS != "off")}-->
<!--<div class="hatena"></div>-->
<!--<div class="evernote"></div>-->
<!--<div class="gree"></div>-->
<!--{if $smarty.const.ACCOUNT_KEY_TWITTER != "なし"}-->
<!--<div class="twitter"></div>-->
<!--{/if}-->
<div class="facebook_like"></div>
<!--{else}-->
<div class="hatena"></div>
<div class="evernote"></div>
<div class="gree"></div>
<!--{if $smarty.const.ACCOUNT_KEY_TWITTER != "なし"}-->
<div class="twitter"></div>
<!--{/if}-->
<div class="facebook_like"></div>
<!--{/if}-->

3　jquery.socialbutton-1.8.1.jsを変更する
ファイルパスの指定を「http://」から「//」に変更する。（2カ所変更）
「//」から始めると、アクセスしているページの接続方法に対応した接続方法になる。http://から始まる非SSL接続であればhttp://から始まるファイルとして読み込み、https://から始まるSSL接続であればhttps://から始まるファイルとして読み込む。

（1）　479ページあたり

var tag = '<iframe src="http://www.facebook.com/plugins/like.php?' + params + '" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:' + width + 'px; height:' + height + 'px;" allowTransparency="true"></iframe>';

↓変更

var tag = '<iframe src="//www.facebook.com/plugins/like.php?' + params + '" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:' + width + 'px; height:' + height + 'px;" allowTransparency="true"></iframe>';

（2）　528ページあたり

$('body').append('<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>');

↓変更

$('body').append('<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>');

4　jquery.socialbutton-1.8.1.jsへのリンクを修正する。ssl_jquery.socialbutton-1.8.1.jsは使用しない。

（1）■data/Smarty/templates/default/frontparts/bloc/site_frame.tpl

<!--ソーシャルボタン-->
<!--{if ($smarty.server.HTTPS != "") && ($smarty.server.HTTPS != "off")}-->
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.socialbutton/ssl_jquery.socialbutton-1.8.1.js"></script>
<!--{else}-->
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.socialbutton/jquery.socialbutton-1.8.1.js"></script>
<!--{/if}-->

↓変更

<!--ソーシャルボタン-->
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.socialbutton/jquery.socialbutton-1.8.1.js"></script>

（2）■data/Smarty/templates/sphone/frontparts/bloc/site_frame.tpl

<!--ソーシャルボタン-->
<!--{if ($smarty.server.HTTPS != "") && ($smarty.server.HTTPS != "off")}-->
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.socialbutton/ssl_jquery.socialbutton-1.8.1.js"></script>
<!--{else}-->
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.socialbutton/jquery.socialbutton-1.8.1.js"></script>
<!--{/if}-->

↓変更

<!--ソーシャルボタン-->
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.socialbutton/jquery.socialbutton-1.8.1.js"></script>