Twitterのツイートボタン設置方法やタグのメモ

WordPress にツイートボタンを設置する方法をメモしておきます。

WordPressへTwitterのツイートボタンを設置する方法

単純にタグを貼るだけなので簡単です。
こちらのページでタグは取得できます。

> Twitter社について/素材/Twitterボタン

取得したボタンのタグはこんな感じです。

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

日本語で、サイズは大です。

ツイートボタンのツイート数の吹き出しを右横から上に表示させる方法

ぼくが前に見た時はツイートボタンの設定を行う際に、デザインを何種類か選ぶ事ができ、その中に以下のようなツイート数の吹き出しが上に表示されるボタンがありましたが、現在はデフォルトでは選べないようですね。
ツイートボタン(大・上)

このデザインにしたい
でもクライアントさんが上に表示されているボタンがいいと仰ってたので、レイアウトを変えてみました。

<a href="https://twitter.com/share" data-via="ユーザーID" data-lang="ja" data-size="large" data-count="vertical">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

【 data-count=”vertical” 】を追記すれば、ツイート数の吹き出しが上に表示されるようになります。後はツイートボタンを表示させたい場所に、上記のコードをコピペすれば OK です。
では WordPress の数ある PHP テンプレートの中の、どこに書けばいいのか?? Twenty Eleven に関してということになりますが、だいたい以下の4つのファイルに書き込めばいいと思います。

  • content-page.php
  • content-single.php
  • content.php
  • comments.php

多くの場合、記事の最初か記事の最後、もしくはその両方に表示させたいと思っているかと思いますので、どこに表示させるかで設置位置が変わってきます。
詳しくはこちらの記事にまとめましたので、ご覧ください。

どこに「いいね!」ボタンなどのソーシャルプラグインのタグを埋め込めばいいのか?


投稿日

カテゴリー:

投稿者:

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です