Pukiwikiにツイッター公式「ツイートボタン」を設置する

PukiWiki, Web 2011年1月27日,

手軽で簡単に差し込めるツイッター公式「ツイートボタン」。
よくある「このページをつぶやく」ってボタンですね。

いっちょ手軽にPukiWikiで使用してやろうと思い、
スキンファイルのメニューバーのあたりに
以下のタグを入れてみたのですが…

1
2
<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>

英語タイトルのページは正常に取得できるのですが
日本語タイトルのページはURLがおかしな事になり使い物になりません。
Pukiwikiで日本語のページの場合、その日本語をURLエンコード(rawurlencode)してるんですが
おそらくTwitterはURLエンコードしていない日本語としてURLを取得しているのが問題なのだと思います。
詳しくはわかりませんけど。

さて、解決方法ですが、公式ツイッターのタグは

1
data-url=指定したURL

とする事で指定したURLをつぶやく事ができます。

ですのでこのURLにエンコード済みのURLを入れてあげればOKです。
適当にPukiWikiスキンを見回してみると、ページの再読み込みをする「リロードボタン」のリンク先が
丁度自身のページURLを取得しているようなので、上記のTwitterタグを以下のように変更。

1
<a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php echo $link['reload'] ?>" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

これでOKでした

余談

正直言うと$link[‘reload’]でページURLが取れている事に気づかず、気づくまでは力技でやってました。

1
2
3
4
5
6
7
8
    <?php
   if ($vars['page'] === $defaultpage) {
      $now_page_uri = $script;
   } else {
      $now_page_uri =  $script . '?' . rawurlencode($vars['page']);
   }
     ?>
<a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php echo $now_page_uri; ?>" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

3 Responses to “Pukiwikiにツイッター公式「ツイートボタン」を設置する”

  1. choro Says:
    7月 14th, 2011 at 4:18 AM

    はじめまして。
    記事にあるPukiwikiのスキンファイルとは、どのファイルを指すのでしょうか？
    skinディレクトリの中にpukiwiki.skin.phpと言うファイルがあり、
    その中の186行目辺りにmenu項目（tableタグ）がありますが、
    tdタグ内に記述すればよいのかと思い試して見ましたが反映されません・・・
    どのファイルの何行目辺りに追加すればよいかをお教えいただけないでしょうか？
    よろしくお願いします。

  2. dek Says:
    1月 23rd, 2012 at 8:15 PM

    はじめまして。dekと申します。
    ソナー様の解説により無事ボタンを設置することが出来ました。
    まことに感謝の限りです。
    ありがとうございました。

  3. izaki Says:
    3月 8th, 2014 at 4:31 PM

    とても助かりました。
    有用な情報の共有、ありがとうございました。

コメントどうぞ