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

3 分で読めます。 投稿から 7年。最終更新から 2年経過。
この記事の作成に約 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に書かれています。

WP・blogについて
スポンサーリンク
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
slackline.jpを書いている人
歩き方

2009年よりスラックライン乗ってます。日本山岳ガイド協会公認ガイド(自然Ⅱ、登山Ⅲ、山岳Ⅰ)、登山用品店店員(元)、平尾台ボランティアガイド、NACS-J自然観察指導員など。アウトドア好きでキャンプ、洞窟、植物好き。

歩き方をフォローする
Amazonプライムビデオで「スラックラインのはじめかた」の無料視聴ができます。GAORA Bros.は14日間なら自由視聴できますので、プライムの30日お試し期間と組み合わせることでスラックライン番組4本 無料で見れます。
スラックラインの歩き方

コメント