Lambdaカクテル

京都在住Webエンジニアの日記です

Invite link for Scalaわいわいランド

Mediawikiにはてなスターを付けるには

Wikipediaにも使われているwikiシステムmediawikiの記事ページにはてなスターのボタンをつける方法です。

デフォルトのテンプレートVectorを利用している前提ですが、違うテンプレートを利用していても少しの改変で再利用できるでしょう。

Client side: はてなスターのサイトからコード片をコピーしてくる

  1. はてなスターにアクセスし、ヘッダの「マイページ」にアクセス。
  2. トークンを発行する。トークンは、はてなスターが設置された場所を識別する。「外部のブログサイトを登録する」の欄に自分のmediawikiのアドレスを打ち込み「追加」する。MediawikiURIによく含まれるindex.phpは含めなくてよい。
  3. コード片が表示されるのでコピーする。

Server side: テンプレートを編集する

  1. エディタでmediawikiのテンプレートファイルを開く。デフォルトのテンプレートはVectorなので、ここでは/skins/Vector/vectorTemplate.phpを開く。
  2. テンプレートのif ( $this->data['isarticle'] ) {?>の直下にコピーしておいたコードを貼る。MediawikiHTTPSで運用しているときは、以下の例のようにURIスキームをHTTPSに変更する*1
  3. 「ここから追記」の例のようにHatena.Star.SiteConfigを設定する。コピペでよい。
<?php
if ( $this->data['isarticle'] ) {
?>
<!-- ここに貼る -->
<script type="text/javascript" src="https://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.Token = '***THE SECRET TOKEN***';
// ここから追記
Hatena.Star.SiteConfig = {
  entryNodes: {
    'div#content': {
      uri: 'div.printfooter a',
      title: 'h1',
      container: 'h1'
    }
  }
// ここまで追記
};
</script>
  1. トークンの部分を自分のものに書き換える。
  2. キャッシュをクリアするために、適当なページで「編集」をクリックして編集画面を出し、何もせず「保存」ボタンを押す(何も起こらない)*2
  3. 全てがうまくいっていたらはてなスターが表示される。やったぜ!

よいwebライフを!

参考になるページ

d.hatena.ne.jp

Manual:デバッグの方法 - MediaWiki

追記(同日)

Mediawiki拡張機能として実装したら便利そうなので時間を見つけて実装したい。

★記事をRTしてもらえると喜びます
Webアプリケーション開発関連の記事を投稿しています.読者になってみませんか?