みるいし

ブログって嫌いです。じゃあなんでブログ開始したのか謎

PukiwikiにおけるTweetボタンとはてブボタンの追加方法

やっと追加できたので書いてみる。使っているバージョンは1.4.7です。

実装例は下
http://prime.freespace.jp/palantir/palawiki/index.php?FrontPage

追加した位置は見ていただければ分かるんですが、
[ トップ ] [ 編集 | 差分 |…
これの右側です。

追加方法は次の通り

pukiwiki.skin.phpの155行目付近に次のような感じで追記します。
元データ(コピペ用は下に置いときます。)
151 <?php } ?>
152 | <?php _navigator('search') ?>
153 | <?php _navigator('recent') ?>
154 | <?php _navigator('help') ?>
155 ]
156
157 <?php if ($trackback) { ?> &nbsp;
158 [ <?php _navigator('trackback', $lang['trackback'] . '(' . tb_count($_page) . ')',

変更後
151 <?php } ?>
152 | <?php _navigator('search') ?>
153 | <?php _navigator('recent') ?>
154 | <?php _navigator('help') ?>
155 ]
156
157 <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-lang="ja">Tweet</a>
158 <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
159
160 <?php if ($trackback) { ?> &nbsp;
161 [ <?php _navigator('trackback', $lang['trackback'] . '(' . tb_count($_page) . ')',

同じような感じではてブボタンも追加できます。割愛か最後尾に不親切な解説あり。

ただし、これをやるとツイートボタンの右側に謎の空白ができます。
他のソーシャルボタンを追加したい場合問題になりますので、次のように解決します。

pukiwiki.skin.css
の一番最後に
iframe.twitter-share-button {
 width: 85px!important;
}
こんな感じで追加。

参考ページ:http://www.geocities.jp/eijispace/2012/0111.html

 

最後に

http://prime.freespace.jp/palantir/palawiki/index.php?%E7%AE%A1%E7%90%86%E7%94%A8%2F%E5%B0%8E%E5%85%A5%E6%B8%88%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3

ここにも等価な情報がありますが、汚いので見なくていいです。


あと、こんな情報もう既出だろ!と思うかもしれませんが、私は1年悩んだんだ…。

 

コピペ用
Twitterボタン
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-lang="ja">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

はてブボタン
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

空白調整用
iframe.twitter-share-button {
    width: 85px!important;
}