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

DokuWikiDokuWiki
この記事は約4分で読めます。

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つでいいでしょう。

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

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

シェアボタンツールが作成できたら、「Get The Code」の設置の仕方を参考にDokuWikiのテンプレートに埋め込みます。

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

  1. </body>タブの直前にスクリプトを埋め込む
  2. シェアボタンツールを設置したい箇所に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の使い方については、こちらの記事にまとめています。

DokuWiki
\よかったらシェアしてね/
えふめん

大阪在住、30代。
業務系SE・社内SEの仕事を通じて学んだこと、PCトラブルで困って調べたこと、手作業を効率化して改善したこと、WordPressのブログ運営などの記事を書いています。

えふめんをフォローする
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
俺の開発研究所

コメント

タイトルとURLをコピーしました