Twitter™でブログに設置するタイムライン(timeline)ウィジェットを作成する

Twitter™は利用しているでしょうか。
Twitterのタイムラインウィジェットと言えば、Twitter上で取得できるタイムラインウィジェットがあります。
ウィジェットの作成はとても簡単に行えますので作成してみるといいでしょう。

はじめに

Twitterタイムラインがサイト上に設置されていることはよく目にすると思います。
そうしたサイドバーにTwitterのタイムラインを設定する手順の最初に、
Twitterでウィジェットアプリの作成があります。
その手順をご紹介しておきます。

Twitterでアプリの作成

Twitterでアプリを作成するには、当然ながらTwitterのアカウントが必要です。
おそらく大半の方が既にアカウントをお持ちでしょうが、
Twitterのアカウント作成手順は以下でご紹介しています。
twitter™共有サービス(SNS)の利用登録

Twitterのアカウント作成が完了したら、Twitterにログインします。

Twitterログイン

ログインが完了したら右上の歯車アイコンからプルダウンで[設定]をクリックします。

Twitter設定

設定が表示されたらサイドバーから[ウィジェット]をクリックします。

ウィジェットの選択

ウィジェットが表示されたら[新規作成]をクリックします。

ウィジェットの新規作成「ユーザーウィジェットを作成する」画面が表示されたら、

上部のタブから作成するタイムラインタイプを選択します。
タイムラインタイプは以下から選択可能で、デフォルトはユーザータイムライン(自分の投稿)になっています。

• ユーザータイムライン
• お気に入り
• リスト
• 検索
• カスタマイズされたタイムライン

各ウィジェットのタイムラインタイプの違いについては以下でご紹介しています。
Twitter™で作成が可能なウィジェットの例

カスタマイズされたタイムラインの詳細については、以下でご紹介しています。
Twitter™でカスタムタイムライン(CustomTimelines)を作成する

ここではユーザータイムラインで自分の投稿を表示する例をご紹介します。

デフォルトで選択されているユーザータイムラインのプレビューを確認しながら、
オプションを変更し[ウィジェットを作成]をクリックします。

設定とウィジェットの作成

設定

ユーザー名

ユーザー名は自分のユーザー名で問題ありませんが、
他の人のタイムラインを表示する場合には、

現在のTwitterユーザーが@rotaholeである場合に、
@algorhythnnのように他のユーザーを指定することも可能です。あ、可能なんですねｗｗ

別のユーザーを指定した例

オプション

ウィジェット上に表示するツイートのフィルタ設定が行えます。

@ツイートを除外する

@ツイートを除外するにチェックすると、自分がリプライ（返信）した投稿をウィジェットに表示しません。

画像を自動的に開く

画像を自動的に開くをチェックすると画像つきで投稿したツイートの画像が展開されます。

設定を変更すると以下のように表示が異なります。

オプションの設定と表示

高さ

高さではウィジェットの高さを指定します。設置予定のサイトのスペースに合わせて設定します。

テーマ

テーマは「明るい」または「暗い」が選択可可能です。

テーマの表示

リンクの色

リンクの色では、フィールドを選択して表示されるカラーピッカーで色を取得して、
取得したコードをフィールドに貼り付けて設定します。

リンクの色変更

変更が完了したら[ウィジェットを作成]をクリックしてウィジェット作成は完了です。
ウィジェットの作成が完了すると、ウィジェットのコードが表示されます。

このコードをサイト上に設置するとウィジェットが表示されるようになります。
ウィジェットにはJavaScriptを含んでいますので、
サイト上のJavaScriptが有効な位置に貼り付ける必要があります。
※WordPressなどの投稿本文エリアなどでは動作しません。

作成されたウィジェット

取得できるコードは以下のようなコードになっています。

ウィジェットには一意のコードが発行されています。上記のウィジェットURLにもIDが表示されています。
また、コード内にもウィジェットコードが埋め込まれています
data-widget-id=”42xxxxxxxxxxxxxxx84″

このウィジェットのIDを他のウィジェットなどに設定して利用する場合もあります。

実際に作成したウィジェットは当サイトのサイドバーにも表示されています。

さいごに

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

ページ

すべて展開 | すべて省略