ITOBEN STYLE > EC-CUBEデザインテンプレート > EC-CUBE：FacebookやTwitterなどのソーシャルブックマークの表示
2012年3月21日カテゴリー:

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

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

[php]






[/php]

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

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

[php]
blocItems = $params[‘items’];
register_shutdown_function(array($objPage, “destroy”));
$objPage->init();
$objPage->process();
?>
[/php]

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

[php]

[/php]

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

[php]
action();
$this->sendResponse();
}

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

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

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

[php]

[/php]

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

[php]

[/php]

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

[php]


⑦　データベース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に追加

[php]

   




[/php]

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

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

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

[php]
#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;
}
[/php]

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

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

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

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