EC-CUBE：FacebookやTwitterなどのソーシャルブックマークの表示

ここでの方法では、javascriptをhttp://用とhttps://用に分けることでSSL接続への対応を行っているが、その対応が不十分なためにSSL接続すると「セキュリティで保護されていないページが混在している」というアラートが出てしまうし、表示されないボタンもある。
プログラムの動作には問題ないが、購入者を不安に思わせる原因にもなりかねないので、「アラートを表示させない」ことを優先的に考え、コードを変更する。
↓
こちら（http://www.itoben.com/blog/533.html）と合わせてご覧ください。

（1）■html/jsフォルダに「jquery.socialbutton」フォルダを追加
jquery.socialbuttonの中身→jquery.socialbutton-1.8.1.js　ssl_jquery.socialbutton-1.8.1.js

（2）■data/Smarty/templates/default/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}-->

（3）ブロックを新規作成する

①　コールPHP　■html/frontparts/bloc/socialbtn.php

 <?php

// {{{ requires
 require_once realpath(dirname(__FILE__)) . '/../../require.php';
 require_once CLASS_EX_REALDIR . 'page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Socialbtn_Ex.php';

// }}}
 // {{{ generate page

$objPage = new LC_Page_FrontParts_BLoc_Socialbtn_Ex();
 $objPage->blocItems = $params['items'];
 register_shutdown_function(array($objPage, "destroy"));
 $objPage->init();
 $objPage->process();
 ?>

②　拡張クラス　■data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Socialbtn_Ex.php

 <?php

// {{{ requires
 require_once CLASS_REALDIR . 'pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Socialbtn.php';

class LC_Page_FrontParts_Bloc_Socialbtn_Ex extends LC_Page_FrontParts_Bloc_Socialbtn {

// }}}
 // {{{ functions

/**
 * Page を初期化する.
 *
 * @return void
 */
 function init() {
 parent::init();
 }

/**
 * Page のプロセス.
 *
 * @return void
 */
 function process() {
 parent::process();
 }

/**
 * デストラクタ.
 *
 * @return void
 */
 function destroy() {
 parent::destroy();
 }
 }
 ?>

③　ページクラス　■data/class/page/frontparts/bloc/LC_Page_FrontParts_Bloc_Socialbtn_.php

 <?php

// {{{ requires
 require_once CLASS_REALDIR . 'pages/frontparts/bloc/LC_Page_FrontParts_Bloc.php';

class LC_Page_FrontParts_Bloc_Socialbtn extends LC_Page_FrontParts_Bloc {

// }}}
 // {{{ functions

/**
 * Page を初期化する.
 *
 * @return void
 */
 function init() {
 parent::init();
 }

/**
 * Page のプロセス.
 *
 * @return void
 */
 function process() {
 $this->action();
 $this->sendResponse();
 }

/**
 * Page のアクション.
 *
 * @return void
 */
 function action() {
 }

/**
 * デストラクタ.
 *
 * @return void
 */
 function destroy() {
 parent::destroy();
 }
 }
 ?>

④　テンプレート　PC用　■data/Smarty/templates/default/frontparts/bloc/socialbtn.tpl


<!--▼iQueryソーシャルブックマーク▼-->

<script type="text/javascript">

$(function() {

$('.evernote').socialbutton('evernote', {

button: 'article-clipper-jp',

styling: 'full'

});

$('.hatena').socialbutton('hatena');

$('.gree').socialbutton('gree_sf', {

button: 0

});

$('.twitter').socialbutton('twitter', {

button: 'horizontal',

text: '<!--{$arrSiteInfo.shop_name|h}-->',

via: '<!--{$smarty.const.ACCOUNT_KEY_TWITTER}-->' // ←Twitterカウント

});

$('.facebook_like').socialbutton('facebook_like', {

button: 'button_count'

});

$('.facebook_share').socialbutton('facebook_share', {

text: 'シェア'

});

});

</script>

<!--▼Google+のスクリプト-->

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">

{lang: 'ja'}

</script>

<div class="socialbtn bloc_outer">

<div class="socialbtn_box">

<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>

</div>

<div class="clear"></div>

</div>

⑤　テンプレート　スマートフォン用　■data/Smarty/templates/sphone/frontparts/bloc/socialbtn.tpl


<script type="text/javascript">

$(function() {

$('.evernote').socialbutton('evernote', {

button: 'article-clipper-jp',

styling: 'full'

});

$('.hatena').socialbutton('hatena');

$('.gree').socialbutton('gree_sf', {

button: 0

});

$('.twitter').socialbutton('twitter', {

button: 'horizontal',

text: '<!--{$arrSiteInfo.shop_name|h}-->',

via: '<!--{$smarty.const.ACCOUNT_KEY_TWITTER}-->' // ←Twitterカウント

});

$('.facebook_like').socialbutton('facebook_like', {

button: 'button_count'

});

$('.facebook_share').socialbutton('facebook_share', {

text: 'シェア'

});

});

</script>

<!--▼Google+のスクリプト-->

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">

{lang: 'ja'}

</script>

<div class="socialbtn bloc_outer">

<div class="socialbtn_box">

<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>

</div>

<div class="clear"></div>

</div>

 ⑥　テンプレート　携帯用　■data/Smarty/templates/mobile/frontparts/bloc/socialbtn.tpl

 <!--{if $smarty.const.ACCOUNT_KEY_TWITTER != "なし"}-->
 <br>
 <center><a href="http://twtr.jp/share?url=http://<!--{$smarty.server.HTTP_HOST}--><!--{$smarty.const.TOP_URLPATH}-->&text=<!--{$arrRet.shop_name|h}-->">ツイートする</a></center>
 <br>

<br>
 <!--{/if}-->

⑦　データベースdtb_blocテーブルに追加する
————————————————
device_type_id：10（PC用に追加）
bloc_id：10（環境に応じて）
bloc_name：ソーシャルボタン
tpl_path：socialbtn.tpl
filename：socialbtn
create_date ：作成日
update_date：更新日
php_path：frontparts/bloc/socialbtn.php
deletable_flg：0

device_type_id：2（スマホ用に追加）
bloc_id：12（環境に応じて）
bloc_name：ソーシャルボタン
tpl_path：socialbtn.tpl
filename：socialbtn
create_date ：作成日
update_date：更新日
php_path：frontparts/bloc/socialbtn.php
deletable_flg：0

device_type_id：1（携帯用に追加）
bloc_id：9（環境に応じて）
bloc_name：ソーシャルボタン
tpl_path：socialbtn.tpl
filename：socialbtn
create_date ：作成日
update_date：更新日
php_path：frontparts/bloc/socialbtn.php
deletable_flg：0
————————————————

（4）　スマートフォン用　■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}-->

（5）　アカウントをパラメーターで設定できるように、mtb_constantsテーブルに追加する。
——————————————
id：ACCOUNT_KEY_TWITTER
name：”なし”
rank：1245（←適宜）
remarks：Twitterアカウント　””で囲む。（持っていない場合は、「”なし”」を指定）
——————————————
★管理画面　システム設定＞パラメーター設定で、「この内容で登録する」をクリック。

（6）cssファイルを編集する

①　PC用　■html/user_data/packages/default/css/common.css（変更）

 #topcolumn ,
 #bottomcolumn ,
 #footerbottomcolumn {
 margin: 0 auto;
 padding:10px 0 0 15px;
 width: 950px;
 background: #fff;
 text-align: left;
 }

↓変更

#topcolumn {
 margin: 0 auto;
 padding:10px 0 0 15px;
 width: 950px;
 background: #fff;
 text-align: left;
 }

#bottomcolumn ,
 #footerbottomcolumn {
 margin: 0 auto;
 padding: 15px;
 width: 950px;
 background: #fff;
 text-align: left;
 }

②　PC用　■html/user_data/packages/default/css/bloc.css（適当な箇所に追記）

 /* ===============================================
 ▼ソーシャルブックマーク
 =============================================== */
 .socialbtn {
 background-color:#F7F7F7;
 border:1px solid #CCC;
 padding:5px 5px 0 5px;
 }
 .socialbtn_box div {
 padding:1px 5px 1px 0;
 float:left;
 }

③　スマートフォン用　■html/user_data/packages/sphone/css/bloc.css（適当な箇所に追記）

 /* ===============================================
 ▼ソーシャルブックマーク
 =============================================== */
 .socialbtn {
 background-color:#F7F7F7;
 border:1px solid #CCC;
 padding:10px;
 }
 .socialbtn_box div {
 padding:1px 10px 10px 0;
 float:left;
 }
このエントリーをはてなブックマークに追加