ルクセリタスでツイッターのタイムラインを表示させてみた ~ワードプレス覚え書き~

ブログでなにかSNSとの連携が出来ないかなーと思っていたときに、このツイッターのタイムラインを表示しているのを見かけました。

これはぼくもやりたい!!と思ったぷぷんたは早速行動に移してみました。

表示させるためにコードを準備する

表示させるためにはツイッターのタイムラインを表示させるためのコードを作成しなければいけません!

コードを作成するといっても、自分で難しいコードを考えるのではなく、ツイッター側で用意してくれるものがあるのでそちらを使います。

IDがわかれば自分のツイートだけではなく、他の好きな人のツイートを表示することも可能です!

勝手に更新されるので便利ですよね。笑

まずは表示させたい人のツイッターアカウントをメモ

ツイッターアカウントとはこの赤枠の部分。

この画像には alt 属性が指定されておらず、ファイル名は 無題4-1024x521.jpg です

『 twitter.com/pupuntasan 』 ぷぷんたの場合はこれ。

なので、『 pupuntasan 』 の部分を表示させたい人のID名にすればOK。

このIDをメモしておきましょう。

表示用コードの作成方法

まずはこちらのサイトを開きましょう。ツイッター社が提供しているページになります。

サイトリンク:https://publish.twitter.com/#

表示されると真ん中にアカウントを入力する欄があるので、こちらに先ほどメモしたアカウントを入力します。

この画像には alt 属性が指定されておらず、ファイル名は 無題-1-1024x468.png です

次の画面では左側の 『 Embedded Timeline(埋め込みタイムライン) 』 を選択しましょう。

この画像には alt 属性が指定されておらず、ファイル名は 無題2.png です

ちなみに右側の『 Twitter Buttons 』を選択するとフォローボタンが作れるようになります。

次に表示用コードの設定を行うためにこちらをクリック。

この画像には alt 属性が指定されておらず、ファイル名は 無題3-1024x470.png です

こんな感じで詳細を設定する項目が表示されます。

この画像には alt 属性が指定されておらず、ファイル名は 無題5.png です

各項目についての説明がこちら。

Height(px):タイムライン表示枠の高さ

ツイートを表示させるための枠の高さを設定します。

ぷぷんたらいふでは500で設定しています。

② Width(px):タイムライン表示枠の横幅

ツイートを表示させるための枠の横幅を設定します。

ぷぷんたらいふではこちらも500で設定しています。

①も②もそれぞれ試してみてあなた好みのサイズを探してみるとよいでしょう!

How would you like this to look? :見た目の設定

実際に選択してみるとすぐにわかりますが、表示させるタイムラインの見た目を白か黒かに設定する項目です。

左:Light 右:Dark

この画像には alt 属性が指定されておらず、ファイル名は 無題6-1024x466.png です

印象が全然違うのであなたのサイトに合った方を選択してみてください!

What language would you like to display this in? :表示言語の設定

このページを見ている人に合わせて言語を設定したいのならその国に合わせてもいいとは思いますが、基本的には自動で設定してくれる 『 Automatic 』で大丈夫でしょう。

Opt-out of tailoring Twitter :ツイッターのトラッキング設定

結論からいうと設定は不要かと思います。

チェックするとどうなるかというと、いわゆるオプトアウト(Twitter社に個人の情報を利用しても大丈夫ですよと了承すること)を許可しますというふうになります。

どんなページを見ているかや、どんな検索をしているのかというような情報がTwitter社に渡るというわけですね。

その情報を使ってサービスをより向上させていくためのもののようです。

詳しくはわかりませんが。笑

なので基本はチェック不要ですがお好みでチェックしたいかたはどうぞ。

全て設定出来たら最後に『 Update 』をクリックして設定完了!!

最後に『 Developer Agreement(使用承諾) 』と『 Developer Policy(開発者ポリシー) 』を確認して、『 Copy Code 』と書かれたボタンを押すと、表示用のコードがコピーされます。

表示用のコードを貼り付けて完了

あとはコピーした表示用コードを、ウィジェットの設定で自分好みの場所にカスタムHTMLにて入力すればOK!!

ぼくの場合は記事一覧下ウィジェットに設定したので、こんな感じになりました。

この画像には alt 属性が指定されておらず、ファイル名は 無題7-1024x570.png です

段落

これでまたちょぴっとぷぷんたらいふが充実したのであった。

合わせて読みたい記事

ブロガーAmazonプライムのアフィリエイトをやってみよう!!とAmazonアソシエイトの審査をしてみようと思ったものの、審査が厳しいということを知り、直接『Amazonアソシエイト』ではなく『もしもアフィリエイト』を介して[…]

徹底的に表示速度にこだわった革新的なWordPressテーマ

当ブログでも採用している、高機能なのに初心者でも扱いやすく、かつスタイリッシュでカッコいい。
しかもSEOの対策も完璧な強力なテーマ。

ブログで収益を得ようと考えているのであれば、候補から外せない革新的なこのテーマを、あなたのインターネットビジネスに活用してみませんか?

詳しくはこちらをクリック!

最新情報をチェックしよう!