twitterのボタンをiframeを使って埋め込む方法(WPにて)

3 分で読めます。投稿から 6年。最終更新から 6か月経過。
この記事の作成に約 37 分かかりました。

Twitterのボタン

ブログなどに付いているツイートするボタンのことです。ツイートされた数が表示され、クリックするとURL付きでTwitterでツイートすることが可能です。このblogには各記事と、サイドバーの一番下にあります。一番ツイートが多い記事では60が最高なんですが、その他はほとんど自分のアカウントがツイートした数です。。。

なぜiframe?

iframeで埋め込むと、リンク扱いにならないので外部向けの発リンクが減らせます。減らすことに意味があるかは不明でけど、公式では紹介されていない方法なので書いてみます。。
.jsファイルも読み込む必要が無いので、単純にボタンを埋め込むところにタグを挿入するだけです。
WPだとタグが使えるのでタイトルやurlもアレンジできます。

ちなみに、.jsでの動作させても実際にはiframeで表示を行なっています。つまり、iframeを読み込むジャバスクリプトが動いてブラウザで表示しているということです。

やり方

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/tweet_button.html?url=<?php the_permalink(); ?>&text=<?php the_title()?>&lang=ja" style="width:100px; height:20px;"></iframe>

上記のコードをテーマファイルの読み込みたい場所に置くだけ。
このコードだとボタンが日本語で、エントリーのurlとタイトルが入れられます。タイトル部分は日本語で追加したり変更も可。何も書かないと、そのタグが置かれたurlのみを読み込んでテキストエリアに表示されます。また、srcの先頭部分のhttp://は書くとフレームに起因する不具合を起こすので書きません。

こんな感じ↑

カスタマイズ

以下の文字列をURL部分に継ぎ足すことで、カスタマイズが可能です。継ぎ足す場合は、あいだを&でつなぎ、クエリ名(textやurlなど)の後=で値を書きます。
例えば、ボタンに@momizibafuなどのリプライを入れたい場合は、&via=momizibafuをURL部分に継ぎ足すわけです。日本語も使えます。

以下のクエリ文字が用意されています。

url
via
text
count
related
lang
hashtags
counturl
size

詳しくはhttps://dev.twitter.com/docs/tweet-buttonに書かれています。

スポンサーリンク
レクタングル大