WordPress投稿本文中にTwitter™タイムライン(timeline)ウィジェットを表示する

Twitter™の様々な種類のタイムライン(timeline)ウィジェットを、
投稿の本文中に挿入することはあまりないかもしれませんが、
簡単にウィジェットを本文中に挿入して表示することもできます。

はじめに

Twitterのウィジェットを本文中に表示する。
どんな時にそんなことするの？と思われるかもしれませんが、
以下の投稿のようにウィジェットの種類を紹介するという時だけでなく、
（Twitter™で作成が可能なウィジェットの例）

投稿の内容にリンクしたキーワードで検索を行うようなウィジェットを表示したり、
カスタムタイムラインウィジェットで自分のタイムラインから、
お勧めのツイートを抜粋して表示することもあるかもしれません。

こうしたWebサービスは使い方は貴方次第といったものなので、
本文中に挿入することに意味があると思う方は挿入されればいいと思います。

ウィジェットの挿入方法

Twitterアカウントを取得していることが前提です。当たり前ですが。
まだアカウントをお持ちでないようでしたら、以下を参考に取得をご検討されてください。
twitter™共有サービス(SNS)の利用登録

ウィジェットタグ（ソース）の取得

Twitterのタイムラインウィジェットを挿入するに当たっては、
まずは表示するウィジェットを作成する必要があります。
ウィジェットの作成方法についても以下でご紹介しています。
Twitter™でブログに設置するタイムライン(timeline)ウィジェットを作成する

ウィジェットの作成が完了すると、Twitterのウィジェット編集画面には、
以下のように埋め込み用のタグ（ソース）が表示されているはずです。

作成されたウィジェット

（上記はユーザータイムラインのウィジェットの例です）

表示されたソースをクリップボードにコピーします。

Twitterスクリプトタグ(コード)

取得したソースは以下のようなものが取得できているはずです。

ウィジェットタグ（ソース）の挿入

取得したソースをWordPressの投稿画面に挿入し設置します。

取得したタグをクリップボードにコピーしたら、WrodPressの投稿画面で
編集モードをテキストモードに切り替えます。

テキスト編集モードに変更

テキストモードでクリップボードからタグを貼り付けて設定します。

タグの貼り付け

投稿を公開（プレビューも可）するとウィジェットが表示されます。

ウィジェットの表示

実際にタイムラインを設置して表示すると以下のように表示されます。
@algorhythnn からのツイート

JavaScriptが実行されなくても表示される

JavaScriptが実行できないはずの編集エリアで、
どうしてウィジェットが表示されるのかという疑問を持たれる方もおられるでしょう。

ここで、Twitterから取得したソースのうち、<a>～</a>タグの部分だけを設置しても、
同じようにウィジェットが表示されます。

実際に<a>タグのみでタイムラインを設置して表示すると以下のように表示されます。

@algorhythnn からのツイート

このTwitterのウィジェットでは、タグのみを貼り付けても動作しています。

その為、Twitterのウィジェットでは、後半の<script>～</script>がない場合でも、
ウィジェットの表示自体に影響はありません。

ウィジェットサイズ変更

Twitterウィジェットの幅や高さを変更する場合には、CSSなどを利用してサイズ変更が行えます。
ウィジェットサイズの変更に関しては以下でご紹介しています。
Twitter™ウィジェットの表示幅を変更する方法

さいごに

実際にJavaScriptが有効な状態で実行されているウィジェットは、
当サイトのサイドバーに設置しているウィジェットです。

それぞれの動作に違いがないことがわかると思います。

こうして特に意識することなく、投稿の本文中にもTwitterウィジェットを設置することができます。

twitterおよび、twitterロゴは、トゥイッター　インコーポレイテッドの登録商標です。
登録番号は以下の通りです。
第５１８８８１１号、第５４６９００３号
ツイッター、およびツイッターロゴはトゥイッター　インコーポレイテッドの登録商標(商願２０１２－７０６４１)です。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください

最後までお読みいただきありがとうございました。

お勧めさせて頂きたい投稿です

• 【巧妙な仕組】Google+へAndroidの写真が勝手にアップロードされてしまう流れは設定ミスではない

• JetPackサイト統計データが消えた場合に復活する手順(してもらう)

• 【待望】WALLET ポイントがauID(au電話番号)間で相互にやりとりできるようになりました

• 禁断の機能がau公式解禁！WALLETポイントの現金化がついに開放。

• 何もしないと、auポイントが2014/05月分以降は携帯利用料から付与されなくなります

• au WALLET™カードはauを解約してもプリペイドとして使い続けられるが、有効期限には注意

• じぶん銀行が動いた！コンビニATM利用が無料・他行振込無料（回数制限なし）で使える

• 【旬】「白すぎる」と賛否両論？姫路城見るなら今秋がおすすめ！その理由は？｜castlehimeji.com

• Google+の投稿が勝手に自動でブログになっていくPluCialが便利



アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。

AdMax Promotion

ブログ記事のご紹介

すべて展開 | すべて省略

Rakuten Promotion

ページ

すべて展開 | すべて省略