DokuWiki.biz

オープンソースのウィキソフトウェア「DokuWiki」の設定、テンプレートカスタマイズ、プラグイン開発などのメモ書き。

ユーザ用ツール

サイト用ツール


tool:addthis

DokuWikiにAddThisのSNSシェアボタンを設置する

このページでは、DokuWikiにAddThisのSNSシェアボタンを設置する方法を紹介する。

AddThisは、各種SNSのシェアボタンやフォローボタンなどをまとめてサイトに設置できるサービスである。一つ一つのSNSを調べてコードを記述するよりも、はるかに効率が良く、スタイルも揃えられるので、利用をおすすめする。

AddThisへのユーザー登録

AddThisへアクセスして、ユーザー登録する。

2018年9月現在、AddThisは無料で利用できるので、とてもありがたい。

シェアボタンツールの作成

ユーザー登録できたらログインし、「Tools」⇒「ADD NEW TOOL」⇒「Share Buttons」と辿り、シェアボタンツールを作成する。

設置するツールのタイプはインラインやバナーなどいろいろあり、ここではインラインで設定している。インラインだと、広告を設置した場合でも上に被ってしまうことがないため、安心して設置できる。

また、設定できるSNSはかなり多くあるが、代表的な以下の6つでいいかと思う。

  • Twitter
  • Facebook
  • Google+
  • Hatena
  • Pocket
  • LINE

シェアボタンツールの設置

ツールが作成できたら、「Get The Code」の設置の仕方を参考に、DokuWikiのテンプレートを修正する。

修正するのは、以下の2点である。

  1. </body>の直前にスクリプトを埋め込む。
  2. シェアボタンツールを設置したい箇所にdivタグを記述する。

まずは1つ目、</body>に最も近いテンプレートのfooter.htmlファイルを追加し、以下のように記述する。

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=XX-XXXXXXXXXXXXXXXX"></script>

続いて2つ目、シェアボタンツールを設置するページコンテンツ上部(pagefooter.html)や下部(pageheader.html)のファイルを追加し、以下のように記述する。

なお、ここではページの通常表示時のみ出力するように、動作モードshowで条件分岐させている。これで、管理画面や編集画面等ではシェアボタンは表示されない。

<?php
    global $ACT;
    if ($ACT == 'show') { //ページ表示の場合のみ表示
?>
<!-- シェアボタン -->
<div class="social-area social-area-bottom">
<div class="addthis_inline_share_toolbox"></div>
</div>
<!-- シェアボタン -->
<?php
    }
?>

最後に、userall.lessファイルで適当なスタイルを設定する。

ここでは、背景色、中央寄せ・余白の調整を行っている。

/* シェアボタン */
/* エリア全体共通 */
.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;
}
tool/addthis.txt · 最終更新: 2018/09/05 16:29:08 by admin