頑張らない!でも諦めない!必死にならずにええかげん

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

      2014/11/22

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

はじめに

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

Twitterでアプリの作成

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

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

01_Twitterログイン

Twitterログイン

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

02_Twitter設定

Twitter設定

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

03_ウィジェットの選択

ウィジェットの選択

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

04_ウィジェットの新規作成

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

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

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

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

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

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

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

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

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

設定

ユーザー名

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

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

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

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

オプション

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

@ツイートを除外する

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

画像を自動的に開く

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

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

07_オプションの設定と表示

オプションの設定と表示

高さ

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

テーマ

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

08_テーマの表示

テーマの表示

リンクの色

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

09_リンクの色変更

リンクの色変更

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

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

10_作成されたウィジェット

作成されたウィジェット

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

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

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

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

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

Twitterでウィジェットを作成する方法は以上です。
特に迷うことなく作成することができるはずです。


twitterおよび、twitterロゴは、トゥイッター インコーポレイテッドの登録商標です。
登録番号は以下の通りです。
第5188811号、第5469003号
ツイッター、およびツイッターロゴはトゥイッター インコーポレイテッドの登録商標(商願2012-70641)です。

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


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

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

AdMax Promotion

ブログ記事のご紹介
すべて展開 | すべて省略

Rakuten Promotion

ページ
すべて展開 | すべて省略

 - twitter

  関連記事

eye_twitter
(Android+Twitter)位置情報サービスGPSの有効/無効設定確認方法

Google or AdMax Promotion(cel) 禁断の機能がau公 …

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

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_twitter
空のtwitterアプリケーションを作成しWordTwitをOAuth認証で連携・・・できない

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_twitter
Twitter™ウィジェットの表示幅を変更する方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_twitter
自分以外のユーザーのTwitter™タイムラインをウィジェットで表示する

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_twitter
Twitter™でカスタムタイムライン(CustomTimelines)を作成する

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_twitter
(PC)Twitter™のアプリ連携を取り消す為の操作方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_twitter
(Android)Twitter™のPC版サイトをAndroid™で表示する方法

Google or AdMax Promotion(cel) 禁断の機能がau公 …

eye_twitter
(iPhone)Twitter™のPC版サイトをiPhone®で表示する方法

Google or AdMax Promotion(cel) 禁断の機能がau公 …

eye_twitter
【対応手順】安全のため、あなたのTwitterアカウントはロックされました。

Google or AdMax Promotion(it) 禁断の機能がau公式 …