WordPress上で、自分で用意した画像を使ってTwitterのツイートボタンを作る方法を紹介します。
photo by Scott Beale
目次
画像の準備
まずは、画像の準備をします。
僕の場合は、モバイル表示用に軽いTwitterボタンを作りたかったので以下のような画像を用意しました。
画像はどんなものでもよく、用途に合わせて自由に作成してください。
作成した画像を、テーマファイルか、子テーマファイルの「imagesフォルダ」に放り込んでおいてください。
ツイートボタンタグの作成
WordPressのテーマファイルを編集してツイートボタンをAタグで作成します。
ツイートボタンを表示させたいところに、以下のように記入してください。
<a href="http://twitter.com/share?text=<?php the_title() ?>&url=<?php the_permalink() ?>"> <img src="<?php echo get_template_directory_uri().'/images/twitter40.png' ?>" alt="ツイートする" width="40" height="40"> </a>
こうすることで、画像リンクをクリックすることで以下のようなツイート画面が表示されます。
ユーザー情報つきツイートボタンタグの作成
これに、通常のツイートボタンでいう「data-via」のようなユーザー情報を付けるなら、以下のようにします。
<a href="http://twitter.com/share?text=<?php the_title() ?>&url=<?php the_permalink() ?>&via=MrYhira"> <img src="<?php echo get_template_directory_uri().'/images/twitter40.png' ?>" alt="ツイートする" width="40" height="40"> </a>
A要素の、href属性に「&via=Twitter_ID」のようについたIDを付加するだけです。@は必要ありません。
こうすることで、以下のように「@MrYhira」というユーザー情報つきのツイートボタンが作れるようになります。
まとめ
ここで紹介した方法は、このブログ(というかSimplicityというテーマ)のモバイル画面でも使用しています。
通常の吹き出しつきのツイートボタンなどと違って、ツイート数をTwitterサーバーから読み込まなくて済むので、ページの読み込み時間がかなり改善するという利点もあります。
半面、「記事の反応がわかりにくい」「地味になる」などの難点もありますけど。
けれど、スッキリと速く、ページを表示させたい人には、お勧めの方法です。