オリジナルいいね!ボタンを設置

SNSシェアボタン欄にある「いいね!」ボタンは、当サイトで独自のもの。PHPスクリプトで、データベース(MySQL)が必要。インストール画面に従って作業を遂行するのみで、簡単に設置出来る。

8314.png

以下、当サイト仕様に改竄。トップフォルダ名は「like」とする。

いいねボタンのテンプレート

「templates」フォルダ内に「tpl-sb-」という文字のついたフォルダが並んでいるので、最もシンプルな「tpl-sb-iine」あたりをコピーして「tpl-umakaras」に名称変更。更に変更を加えて行く。

まず、like/templates/tpl-umakaras/html/tpl.html の記述を変更。基本形はこんな感じ。

<div class="aiin-btn"><span class="aiin-vcnt"></span> いいね</div>

<span>タグ内に数字が表示され、1なら「1 いいね」とブラウザで表示される。aiin-で始まる二つのclass名は、スクリプト固有のもの。当サイトでは都合により、divタグとspanタグを他で代用し、いいねの文字の代わりにハートマークアイコンでFontAwesomeを使用。fontタグは苦肉の策。最終的にこのような記述に。

<a class="aiin-btn"><i class="fas fa-heart"></i> <font class="aiin-vcnt"></font></a>

like/templates/tpl-umakaras/css/tpl.css は使わないので、記述を全て消す。(ファイルそのものは削除したりせず、真っ白にする)

その他設定

基本的に何も触る必要は無い。二重投票防止やクッキー保存期間などを見直す場合は、/like/config/poll/ にある。インストール後は変更不可。スクリプトが動かなくなるので要注意。

インストール

  1. likeフォルダをサーバーにアップ
  2. MySQLを作成
  3. 設置URL/like/install/ にアクセスし、設定作業を進める

ボタンの貼り付け方法は二通り提示されているが、当サイトでは「直書き」だと他と干渉するのか上手く行かなかったので、「二行貼り付け」を選択。作業画面で「いいねボタンのKey」の入力を求められるが、とりあえず仮(kari)とでも入れておく。使用テンプレートは「tpl-umakaras」を選択。

サイト本体のテンプレート

<head>内に記述。

<script src="/like/cn/cn.php"></script>

いいねボタンを表示させたい位置に記述。基本形はこんな感じ。

<div class="ajax-iine" data-pid="仮" data-tid="tpl-umakaras" title="いいね"></div>

「class="ajax-iine"」は固定。「data-tid="tpl-umakaras"」は選択したテンプレート名。

「data-pid="仮"」の「仮」は前述の「いいねボタンのKey」の値となる。これはページ毎に番号を割り振りたいので、MTタグを利用して、個別ページを <mt:EntryID>、カテゴリページは<mt:CategoryID>の頭に「c」を付与、ブログトップページは<mt:BlogID>の頭に「b」を付与した識別番号を出力させる。(当サイトでは月別やオーナー別アーカイブページは出力していないので、以上三種のみ)

SNSシェアボタンをWebアイコンフォントで表示にある通り、<li class="like">いいねボタン</li>が当サイトでの設置場所。尚、ボタンの色指定についても、このページに記載済み。

以上、タグをまとめるとこんな感じ。

<li class="like ajax-iine" data-pid="<mt:If name="entry_template"><mt:EntryID><mt:ElseIf name="archive_template">c<mt:CategoryID><mt:Else>b<mt:BlogID></mt:If>" data-tid="tpl-umakaras" title="いいね"></li>

ランキング集計機能は無いが、数字を見つけると嬉しいので、是非とも「いいね」下さいw

share