WordPressで自前の画像でツイートボタンを作る方法

twitter

WordPress上で、自分で用意した画像を使ってTwitterのツイートボタンを作る方法を紹介します。

photo by Scott Beale

スポンサーリンク
レクタングル(大)広告

画像の準備

まずは、画像の準備をします。

僕の場合は、モバイル表示用に軽いTwitterボタンを作りたかったので以下のような画像を用意しました。

twitter40

画像はどんなものでもよく、用途に合わせて自由に作成してください。

作成した画像を、テーマファイルか、子テーマファイルの「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というテーマ)のモバイル画面でも使用しています。

モバイル用のSNSボタン

通常の吹き出しつきのツイートボタンなどと違って、ツイート数をTwitterサーバーから読み込まなくて済むので、ページの読み込み時間がかなり改善するという利点もあります。

半面、「記事の反応がわかりにくい」「地味になる」などの難点もありますけど。

けれど、スッキリと速く、ページを表示させたい人には、お勧めの方法です。