Twitter タイムラインウィジェット

3分で終わる!Twitterのタイムラインウィジェットをブログに設定する手順~3ステップ~


Twitterは、ユーザーのタイムラインを表示させるウィジェットを提供しています。

このウィジェットを、ブログやWebサイトに設置することで、Twitterと連携することができます(下図)

Twitter タイムラインウィジェットの設定手順8

このように、タイムラインウィジェットをブログに設置することで、どのような「メリット」があるのでしょうか・・・

それは、訪問者が、一目で、タイムラインを確認でき、上部に「フォローボタン」も設置されているので、1クリックで、フォローすることも出来る事です。

訪問者にフォローされる事で、あなたのツイートをリツイートしたり、ブログを繰り返し訪れる。といった事が期待できます。

そこで、今回の記事では、この「タイムライン・ウィジェット」をブログに設置する手順を、順に解説していきます。

以下、目次になります

  • Twitterの公式サイトから「タイムラインウィジェット」のソースコードを取得する
  • ブログに、取得したソースコードを設定する
  • 「タイムラインウィジェット」がブログに設定されている事を確認する

Twitterの公式サイトから「タイムラインウィジェット」のソースコードを取得する

まず、Twitterのウィジェット公式ページにアクセスしてください。
アクセスしたら下図のように、ウィジェット作成・管理画面が開きますので、「新規作成」ボタンをクリックしましょう。

Twitter タイムラインウィジェットの設定手順1

「新規作成」ボタンをクリックすると、下図のように「ウィジェット作成画面」が開きます。
まず、4つのタイムラインの種類がありますので、こちらから「ブログに表示させたいタイムライン」を選択してください。
ほとんどが、一番左の「タイムライン(つぶやきのタイムライン)」でしょう。今回の解説でも、こちらを対象におこなっていきます。

Twitter タイムラインウィジェットの設定手順2

いちよ、4つの種類の説明を順にしていきます。

  • 【(つぶやきの)タイムライン】:ユーザーのつぶやきタイムラインです。ブログと連携させるタイムラインウィジェットはほとんどがこちらでしょう(下図が例になります)
    Twitter タイムラインウィジェットの設定手順8
  • 【お気に入りタイムライン】:下図のように「お気に入り」に登録したツイートのタイムラインです。
    Twitter タイムラインウィジェットの設定手順5
  • 【リストタイムライン】:下図のように「リスト」に登録したユーザーのツイートのタイムラインです
  • Twitter タイムラインウィジェットの設定手順6

  • 【検索タイムライン】:キーワードやハッシュタグ検索をして、表示された検索結果のタイムラインです。例として、下図は「ブログ」とキーワード検索した結果のタイムラインになります
  • Twitter タイムラインウィジェットの設定手順7

では、【タイムライン】を選択したら、次はいくつか設定項目がありますので、設定していきましょう。

Twitter タイムラインウィジェットの設定手順3

基本的には、初期設定のままで良いかと思います。

各項目を簡単に説明しておきますと

  • 【ユーザー名】:Tweetタイムラインを表示させたいユーザー名を設定します
  • 【オプション】:基本的にはどちらもチェックを付けておきましょう
  • 【高さ・テーマ・リンクの色】:初期値のままで良いですが、プレビュー画面を確認しながら設定すれば良いでしょう
  • 【プレビュー】:各設定項目の変更が「プレビュー」に反映されますので、こちらを確認しながら設定していきましょう

設定が終わったら、「ウィジェットを作成」ボタンをクリックしてください。

下図のように「ウィジェットが作成されました」と表示されたら OK! です。
「ソースコード」も表示されていますので、こちらをコピーしておいてください。

Twitter タイムラインウィジェットの設定手順4

以上です。次は、ブログにソースコードを設定しましょう。

ブログに、取得したソースコードを設定する

次は、先ほど取得したソースコードを、ブログに設定します。

今回は、例として、Wordpressブログへ設定する手順を解説します(ボタンを設置する場所はサイドバーになります)

まず、Wordpressの管理画面から「外観」→「ウィジェット」画面を開いてください。

Twitter タイムラインウィジェットの設定手順6

ウィジェット画面が開いたら、「利用できるウィジェット」の中から「テキスト」を、【メインサイドバー】にドラッグ&ドロップしてください。

Twitter タイムラインウィジェットの設定手順7

「メインサイドバー」に設置したら、「テキスト」の設定をします(下図を参考にしてください)
タイトル枠には、任意の値を入力してください。
その下には、先ほど取得したソースコードを設定します。

Twitter タイムラインウィジェットの設定手順8

設定が終わったら、保存ボタンを押します。

これで、ブログに設定ができました。
次は、実際にブログを表示させてみて、ちゃんと設定されているか確認してみます。

「タイムラインウィジェット」がブログに設定されている事を確認する

上述でウィジェットを設定したブログを表示させてみましょう。

下図のように、「タイムラインウィジェット」が表示されていれば「OK」です。

Twitter タイムラインウィジェットの設定手順9

まとめ

今回の記事では、Twitterの「タイムラインウィジェット」をブログに設置する手順を、3ステップにわけて解説してきました。

また、ブログとTwitterを連携させるには「タイムラインウィジェット」を設置するだけでは不十分です。
Twitterは、「タイムラインウィジェット」の他にも、「ツイートボタン」や「フォローボタン」も提供していますので、こちらも連携させておくことをオススメします。

特に「ツイートボタン」は、記事を拡散させるための重要な仕組みですので必ず設置しておきましょう。
「フォローボタン」については、「タイムラインウィジェット」を設置している場合には、特に必要はないでしょう(タイムラインウィジェットに、フォローボタンは付いているので。)

「ツイートボタン」と「フォローボタン」を設置する手順については、こちらでまとめています→→Twitterのツイートボタンとフォローボタンをブログに設置する~4ステップ~

Related Posts Plugin for WordPress, Blogger...
コメントを残す

メールアドレスが公開されることはありません。