創作・同人サイト制作支援サイトdoさんで配布されている「個人サイト向けいいねボタンプログラム」をfreoに設置する方法です。
iine.jsの編集とiine_appフォルダのアップロード
まずは配布元の設置マニュアル通りにiine.jsの編集をした後iine_appフォルダごとアップロードします。
freoのテンプレートの編集
- ドメイン直下（https://example.com）でfreoサイトが表示される
- ドメイン直下にiine_appフォルダをアップロードしている（https://example.com/iine_app/）
という条件でのテンプレートの記述になります。freoやiine_appフォルダの位置が違う場合はCSSとJSのパスの書き方が変わりますので要注意。
template/header.html、template/footer.html
template/header.htmlの</head>の直前に
<!--{if $smarty.request.freo.mode == 'view' or $smarty.request.freo.mode == 'page'}-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round" rel="stylesheet">
<link rel="stylesheet" href="{$freo.core.http_url}iine_app/iine.css">
<script src="{$freo.core.http_url}iine_app/iine.js"></script>
<!--{/if}-->
を挿入します。<!--{if $smarty.request～}--> <!--{/if}-->は、「いいねボタン」が同一ページに複数設置できない仕様なので、エントリー一覧など複数記事が表示されるページでの読み込みは不要と判断したためです。/entryでも例えばutility.htmlにいいねボタン表示用のソースを記述して一つだけ設置するならば<!--{if $smarty.request～}--> <!--{/if}-->は不要です。
template/page/default.html、template/view/default.html
表示したい個所に「個人サイト向けいいねボタンプログラム」の設置マニュアルにある「いいねボタン」用のソースコードを記述します。あるいは、「いいねボタン」用のソースコードだけを記述したファイルを例えばiine.htmlなどの名前をつけて
{include file='iine.html'}としてもいいかもしれません。
サンプル
当サイトの記事単体ページ下方、SNSシェアボタンの並び右端に表示されています（記事が複数並ぶページには表示されません）。どうぞお気軽に押してみてください。
ちょっとしたトラブルと解決法
当サイトに設置した時、Firefox Nightlyでのみカウント数が表示されずいいねボタンをクリックしてもカウントアップもされませんでした。原因はスクリプトファイルの読み込み順だったようで、いいねボタン読み込み用のスクリプトタグを
<script src="{$freo.core.http_url}iine_app/iine.js" defer></script>とすることでFirefox Nightlyでもカウント数の表示・カウントアップができるようになりました。
