工務女子うえすぎ

初心者が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

コメント

コメントを残す

サイトハウンド

初心者がブログ立ち上げに悩む話

宅地建物取引士

未分類

2級建築士

こんな人

うえすぎ

うえすぎ

自分の女子力の無さに途方に暮れ中。 サイトハウンド大好き。動物と植物大好き。 他に好きなものは色々あるけれど、のめり込める程では無くて趣味のある人が羨ましいと常々思っています。 たくさんの人と絡みたいと思っているけど、なかなか声が掛けられない小心者。 気付けばアラフォー。え?夢?

アーカイブ



sponsored link

UA-88033039-3