PHPベースのオープンソースのウィキソフトウェア DokuWikiにAddThisのSNSシェアボタンを設置する方法について解説します。
AddThisは、各種SNSのシェアボタンやフォローボタンなどをまとめてサイトに設置できるサービスです。
一つ一つのSNSを調べてコードを記述するよりもはるかに効率が良く、スタイルも揃えられるのでおすすめです。
なお、今回のバージョンは以下の通りです。
- DokuWiki 2018-04-22a “Greebo”
AddThisへのユーザー登録
まずは、AddThisへアクセスしてユーザー登録します。
2020年2月現在、AddThisは無料で利用できます。
シェアボタンツールの作成
ユーザー登録できたらログインし、
- Tools ⇒ ADD NEW TOOL ⇒ Share Buttons
と辿り、シェアボタンツールを作成します。
設置するツールのタイプはインラインやバナーなどいろいろありますが、インラインがおすすめです。
インラインだと広告を設置した場合でも上に被ってしまうことがないため、安心して設置できます。
設定できるSNSはかなり多くありますが、代表的な以下の6つでいいでしょう。
- Google+
- Hatena
- LINE
シェアボタンツールの設置
シェアボタンツールが作成できたら、「Get The Code」の設置の仕方を参考にDokuWikiのテンプレートに埋め込みます。
修正は、以下の2点です。
- </body>タブの直前にスクリプトを埋め込む
- シェアボタンツールを設置したい箇所にdivタグを記述する
この記事では、DokuWikiのデフォルトテンプレートに挿入（組込）フックを利用して埋め込みます。
まずは1つ目、</body>に最も近い
lib/tpl/dokuwiki/footer.html
ファイルを追加し、以下のように記述してスクリプトを埋め込みます。
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=XX-XXXXXXXXXXXXXXXX"></script>
続いて2つ目、シェアボタンツールを設置するページコンテンツ上部や下部の
lib/tpl/dokuwiki/pagefooter.html
lib/tpl/dokuwiki/pageheader.html
ファイルを追加し、以下のように記述します。
<?php
global $ACT;
if ($ACT == 'show') { //ページ表示の場合のみ表示
?>
<!-- シェアボタン -->
<div class="social-area social-area-bottom">
<div class="addthis_inline_share_toolbox"></div>
</div>
<!-- シェアボタン -->
<?php
}
?>
これはページの通常表示時のみ出力するように、動作モードshowで条件分岐させています。
これで、シェアボタンが不要な管理画面や編集画面等では表示されなくなります。
シェアボタンツールのスタイル調整
最後に、
conf/userall.less
ファイルで適当なスタイルを設定します。
以下のようなCSSで、スタイルを設定しました。
/* シェアボタン */
/* エリア全体共通 */
.social-area {
width: 100%;
background: #F5F1E9;
padding: 10px 0 5px 0;
text-align: center;
}
/* エリア全体（ページ上部） */
.social-area-top {
margin-bottom: 10px;
}
/* エリア全体（ページ下部） */
.social-area-bottom {
margin-top: 20px;
}
背景色と中央寄せ・余白の調整を行っています。
最後に
今回は、DokuWikiにAddThisのSNSシェアボタンを設置する方法について解説しました。
AddThisは、各種SNSのシェアボタンやフォローボタンなどをまとめてサイトに設置できるので大変便利です。
DokuWikiのおすすめテンプレートとカスタマイズ方法については、こちらの記事にまとめています。
DokuWikiの使い方については、こちらの記事にまとめています。
コメント