きになるウエスギ

初心者がWordPressでブログを作ってみたり、旅行に行ったり、好きなことや気になることを叫んだり。生まれ変わるなら樹か妖怪になりたいウエスギの迷走ブログ。

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

time 2017/03/01

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

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

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

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

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

 

 

sponsored link

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

 

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

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

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

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

Twitter埋め込み

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

Twitter埋め込み

 

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

 

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

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

Twitter埋め込み

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

Twitter埋め込み

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

Twitter埋め込み

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

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

Twitter埋め込み

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

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

Twitter埋め込み

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

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

Twitter埋め込み

コピーしました!

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

 

タイムラインの表示設定

 

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

Twitter埋め込み

Twitter埋め込み

1.高さ

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

2.幅

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

3.画面の背景

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

4.タイムライン内のリンクの文字色

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

5.表示に使う言語

Automaticのままで良いです。

6.Opt-out of tailoring Twitter

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

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

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

 

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

 

WordPressでのTwitter埋め込み操作

 

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

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

Twitter埋め込み

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

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

Twitter埋め込み

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

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

Twitter埋め込み

Twitter埋め込み

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

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

 

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

Twitter埋め込み

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

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

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

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

Twitter埋め込み

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

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

 

まとめ

 

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

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

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

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

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

ボチボチやっていきます!
ブログランキング・にほんブログ村へ

sponsored link

コメント

down

コメントする




ブログ初心者

資格試験

こんな人

ウエスギ

ウエスギ

サイトハウンド大好き。動物と植物大好き。 たくさんの人と絡みたいと思っているけど、なかなか声が掛けられない小心者です。お気軽にお声掛け頂くと泣いて喜びます。 転職したら忙しくなって記事UPできてません(Twitterは呟いてる) 今年は活動するぞぅ



sponsored link

UA-88033039-3