Twitter™ タイムラインウィジェットをJetpackを利用して表示する

Twitter™は利用しているでしょうか。
Twitterのタイムラインウィジェットと言えば、Twitter上で取得できるタイムラインウィジェットがありますが、
WordPressのウィジェットを利用してタイムラインを表示することもできます。

はじめに

Twitterタイムラインがサイト上に設置されていることはよく目にすると思います。
そうしたサイドバーにTwitterのタイムラインを設定すると、
Twitterとブログが双方にリンクしてより多くの人に見て頂けるようになります。

環境

• WordPress: 3.7.1
• JetPack: 2.5

事前準備

Twitterのタイムラインウィジェットを利用するには、JetPackを有効化する必要があります。

詳細は以下でご紹介しています。
23.追加ウィジェット－Jetpack by WordPress.com

またこのウィジェットの設置にはTwitter™にてウィジェットを事前に作成済みである必要があります。
Twitter™でブログに設置するタイムライン(timeline)ウィジェットを作成する

だったら「そのまま取得したスクリプトコードを設置すればいいじゃないか」というお方は、
以下の方がいいかもしれません。
WordPressサイドバーにTwitter™タイムライン(timeline)ウィジェットを表示する

TwitterのウィジェットってWordPressの投稿本文中に貼り付けても動作するんですね。
WordPress投稿本文中にTwitter™タイムライン(timeline)ウィジェットを表示する

一言にTwitterタイムラインウィジェットと言っても様々な種類があります。
実際に本文中に設置している例は以下でご紹介しています。
Twitter™で作成が可能なウィジェットの例

利用方法

JetPackを有効化し、追加ウィジェットの機能を有効にすると、
[外観]-[ウィジェット]を選択して「ウィジェット」を表示します。

外観・ウィジェットの選択

ウィジェットの使用できるウィジェットのエリアに対して「Twitter タイムライン (Jetpack)」が表示されます。

追加されたウィジェットの表示

ウィジェットの配置

ウィジェットをドラッグしサイドバーなど表示したいエリアにドラッグし配置します。

Twitterウィジェットの配置

配置するとウィジェットの設定が行えるようになります。
設置しただけでは表示されません。ウィジェットIDの指定が必要です。

ウィジェットの設定と初期状態の表示

ウィジェットIDを取得するには、Twitterでウィジェットを作成する必要があります。
ウィジェットの作成方法は以下でご紹介しています。
Twitter™でブログに設置するタイムライン(timeline)ウィジェットを作成する

ウィジェットを作成するとサイトのURLまたは、
発行されたタグに対してウィジェットIDが表示されています。
このウィジェットIDを「Twitter タイムライン (Jetpack)」に対して設定します。

ウィジェットIDの取得

発行されたウィジェットタグ
（赤字部分がウィジェットID）

<a class="twitter-timeline" href="https://twitter.com/algorhythnn" data-widget-id="36xxxxxxxxxxxxxx84">@algorhythnn からのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

ウィジェットIDの設定

ウィジェットIDを「Twitter タイムライン (Jetpack)」に対して設定します。
IDを設定したら[保存]をクリックして設定を反映します。

配置したウィジェットの表示を確認するとウィジェットが表示されています。

ウィジェットIDの設定

ウィジェットの設定

ウィジェットには各種の設定が行えます。

タイトル

タイトルではウィジェットを表示する際のウィジェットタイトルの入力が行えます。
入力した文字がそのまま表示されます。

ウィジェットタイトル指定

幅

幅では、ウィジェットを表示する幅を指定することができます。

通常、Twitterウィジェットを取得したタグ(ソース)で設置した場合には、
上位ブロック要素幅が採用されて表示されます（520px以下の場合）

「Twitter タイムライン (Jetpack)」でも同様に上位要素に合わせて表示されます。

意図的に幅を変更したい場合にはここに幅を指定しますが、
上位の要素幅を超えて設定した場合には、無効になります。
また、180pxを下回る値を設定した場合にも無効になります。

ウィジェット幅指定

高さ

高さではウィジェットを表示する高さを指定することができます。

通常、Twitterウィジェットを取得したタグ(ソース)で設置する場合には、
Twitterのウィジェット設定にて高さの指定を行います。
Twitterのウィジェット設定では、250px～2000pxの範囲で指定できます。

ここで指定する高さは200px～の範囲で設定が行えます。
その為、200px以下を指定した場合は200pxで表示されます。
高さは指定した高さで表示が行えます。

ウィジェット高さ指定

表示するツイート数

「表示するツイート数」では初期値0が指定されています。
ウィジェット上には20投稿が読み込まれ最下部に[さらに読み込む]ボタンが表示されます。

投稿数を0以外に指定した場合には指定した投稿数のツイートが表示され、
[さらに読み込む]ボタンは表示されなくなります。

表示ツイート数指定

ウィジェット ID

ウィジェット IDの設定は最初にご紹介したとおり必須の設定です。

レイアウトオプション

レイアウトオプションではウィジェットの表示をカスタマイズすることができます。

レイアウトオプション

実際に各設定を有効にすると以下のように表示が変わります。
※ここでは便宜上、背景色を指定して表示しています。

レイアウトオプション表示例１

レイアウトオプション表示例２

リンク色 (hex 値)

リンク色の設定では表示されるツイートに含まれるアンカーテキスト（リンク）の
表示色を指定することができます。

リンク色指定

枠線の色 (hex 値)

枠線の色の設定ではウィジェットの枠線の色を指定することができます。

枠線の色指定

タイムラインテーマ

タイムラインのテーマではウィジェットの色味を変更することができます。
「ライトカラー」または「ダークカラー」 を選択することができます。

スタイル指定

こうして簡単な設定をウィジェット上で行って、Twitterタイムラインウィジェットを設置することができます。

さいごに

JetPackの機能を無理に利用して設置する必要はないと思います。
しかしながら通常のTwitterウィジェットタグを利用した設置方法よりも、
設定やスタイルの変更が少し楽に行えます。

通常のTwitterウィジェットタグを利用しCSSなどでカスタマイズする方法でも問題ないと思いますので、
その辺は好みの問題かなと思います。

直接、通常のTwitterウィジェットタグを利用する方法は以下でご紹介しています。
WordPressサイドバーにTwitter™タイムライン(timeline)ウィジェットを表示する

また幅の変更などを行う場合には以下でご紹介しています。
Twitter™ウィジェットの表示幅を変更する方法

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

WordPressはWordPress Foundation の登録商標（第５０４９９６５号）です。
WordPressロゴ、アイコンその他のマーク等はWordPress Foundation の商標であり、
WordPress Foundation の著作物です。
WordPress.comはWordPress Foundation が管理運営を行うドメインならびにサービスの名称です。

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

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

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

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

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

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

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

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

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

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

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

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



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

AdMax Promotion

ブログ記事のご紹介

すべて展開 | すべて省略

Rakuten Promotion

ページ

すべて展開 | すべて省略