WordPressにツイッターのタイムライン表示させたい！簡単だった！

最近、だいぶTwitterを使う機会が多くなってきました。

で、調子に乗ってブログにタイムラインを表示してみたい！と思いました。

難しいと思ったら・・・これだけ！？っていう簡単さだった。ステキ！

見た目かっこよくしようと思ったら難しいかもしれないけど、このサイトくらいのだったら、簡単ですよ！

 

• Twitterにログインし、ウィジェットの画面を開く
• Twitterウィジェット画面での操作
• タイムラインの表示設定
• WordPressでのTwitterタイムライン埋め込み操作
• まとめ

 

twitterにログインし、ウィジェットの画面を開く

 

まずはTwitterにログインします。

※一気にウィジェットを開きたい場合はコチラ。

ホーム画面から、右上の自分のアイコンをクリックし、

「設定とプライバシー」を選びます。

次に、「ウィジェット」をクリック。

 

Twitterウィジェット画面での操作

 

ウィジェット画面の「新規作成」の「プロフィール」をクリックすると画面が変わるので、下のほうへスクロール。

すると、下の画像のような選択画面になります。

「Embeded Timeline」を選択し、表示したいTwitterのURLを入力して、Previewをクリック！

自分のURLはホームの自分のアカウントをクリックすると、画面が変わってアドレスバー（上の赤い四角の部分）に出てきます。

プレビューすると、現在つぶやいている内容が、新しいものから順に表示されます。
※一つもつぶやいていないと、何も表示されません。

この画面が、WordPressにも表示されます。

プレビューの右上にある「Copy Code」をクリック。

WordPressに表示する為のコードをコピーします。

こんな画面が出るので、アクセスを許可。

許可すると、コピー完了。

×を押して、画面を閉じます。

 

タイムラインの表示設定

 

画面の【set customization options】を選択すると、タイムラインを表示する時の「高さ」「テーマカラー」「リンクの色」の詳細設定ができます。

１．高さ

タイムラインの高さを設定します。
このサイトでは６００にしてます。

２．幅

タイムラインの幅を設定します。
これは特に触らなくても大丈夫みたい。

３．画面の背景

背景色を、Light（しろ）かDark（濃いグレー）にできます。

４．タイムライン内のリンクの文字色

ツイートにリンクがあった場合、文字の色を好きに変えられます。
カラーコードで好きな色に出来ます。

５．表示に使う言語

Automaticのままで良いです。

６．Opt-out of tailoring Twitter

これは良くわからないんですが・・・
Twitterは広告表示の為などに、ユーザーの情報を集めてるらしいんです。
（自分が過去に検索した事と関連した広告が表示される現象）

チェックすると、情報収集をさせない、って事になる・・・と思う。

チェックしても、しなくても、タイムラインの表示には影響ありませんでした。
なので放置で良いと思います。

 

もし、上記の設定を変えた場合は「Update」を押して、「Copy Code」をクリックしてください。

 

WordPressでのTwitter埋め込み操作

 

ここからはWordPressでの作業になります。

WordPressのダッシュボードから、外観→ウィジェットを開きます。

ウィジェット画面になったら、下のほうにある「テキスト」を選択。

右上のTwitterタイムラインというのは、プラグインJetpackを入れていると勝手に出てきて、どうやらここでも設定できるようですが、ひとまず無視します。

ドラッグ&ドロップで、「テキスト」をグググイーーーっと「サイドバー」の中に持って行きます。

※ドラッグ&ドロップ→「テキスト」を左クリックして、ボタンを押したまま移動したい位置に引っ張っていきます。
貼り付けたい場所まで持って着たら、ボタンを離します。

私は、サイドバーのカテゴリー表示の下に、Twitterのタイムラインを設置することにしました。

場所を移動したい時は、再度ドラッグ&ドロップで上下に移動します。

 

次に、テキストの▼を押して、テキストの「タイトル」と「内容」を入力します。

タイトルは仮に「Twitter」にしました。

これはブログ内でタイムラインを表示する時の、タイトルになるものです。

「内容」には先ほどTwitterでコピーしたコードを貼り付けます。

これで、保存して完了！！

ブログの右側にTwitterが表示されるようになりました。

タイトルも、設定した「Twitter」になっています。

 

まとめ

 

簡単に、タイムラインを表示できるようになりました。

これでTwitterでつぶやいたことは、すぐにブログに表示されます。

何か、やる気がでてきますね！

もし細かい設定をしたい場合は、少し難しい操作が必要になってくるので、それはまた今度試してみたいと思います。

「○○さんのツイート」っていうところとか、何か気に入らないし・・・

ボチボチやっていきます！