プラグインなしで、Twitterの「タイムライン」をサイドバーに表示したい!

ブログを拡散する方法として、｢Twitterのタイムラインをサイドバーに表示してみたい｣ということはないだろうか？　ありますよ！

Twitterのタイムラインをブログに表示する方法

ということで、方法は簡単。タイムラインを表示するにはTwitter Pulishという公式の方法を利用して出てきたコードをウィジェットに貼り付けるだけです。

twitterをサイドバーに！

ウィジェットに貼り付けるコードを作成する手順

あなたもこの方法でたった1分で作れますよ！

手順１：まずはTwitter Pulishにアクセス

ウィジェットに貼り付けるコードを作成するために、Twitterの公式ツール：Twitter Publishにアクセスします。URLは https://publish.twitter.com/

手順２：貼り付けるアカウントのプロフィールへのURLを取得

このブログであれば、https://twitter.com/hirocamcamというのがプロフィールページです。

手順３：プロフィールURLをTwitter Publishに貼り付ける

下記のように画面中央にURL入力欄が表示されますので、ここにあなたのプロフィールページへのURLを貼り付けます。URL欄右端のEnterボタンをクリック！

プロフィールURLを貼り付ける！

手順４：ディスプレイオプションを選択

次にディスプレイオプションとして、タイプラインを表示するかTwitterボタンを表示するか聞いてきますので左側の”Embedded Timeline”を選択します。

タイムライン側を選択！

手順５：カスタムオプションを選択

ウィジェットの色や縦の長さを決めるためのカスタムオプションを選択します。これは、上記の画面にある”Set Customization Options”というリンクをクリックして選択します。実際に表示されたカスタムオプション画像は以下のとおりです。入力が完了したらUpdateを押してください。

サイズ、色、言語を選択

手順6：作成したコードをコピーする

カスタムオプションを選択を終了するとコードが作成されますので、これを右端のCopy Codeボタンでコピーしておきます。ここでコピーしたコードはコンピュータのクリップボードに一時的に保存されていますので、使いたい場合にペースト(Ctrl+V)するといつでも使うことができます。

Copy Codeボタンで作成コードをコピー

クリップボードにコピーされた場合

クリップボードにコードがコピーされた！

ウィジェットをつくるもう一つの入り口！ウィジェットは、Twitterサイトからも作ることが出来ます。作成したいアカウントでTwitterにログインし、設定とプライバシー→ウィジェット→新規作成→プロフィールの順に選択すると、上記手順３のところに入る事が出来ます。

当ブログサポートアカウントから

WordPressのテキストウィジェットにTwitter Publishコードを貼り付けて完成

後はいつものとおり、Wordpressの管理画面を開いて、外観→テキストウィジェットを選択と進み、テキストウィジェットの設定をおこなってください。

タイトル：好きなタイトルで構いません内容：内容には前項で作成したTwitter Publishコードを貼り付けます。すでにクリップボード上にありますので、ここではペースト作業（Ctrl+V)をするだけです。

終了したら、画面右下の保存ボタンで保存してください。

テキストウィジェットに作成したコードを貼り付ける

完成イメージ

実際に表示したウィジェット部分を拡大したのが下記の画像となります。

実際に表示したTwitter ウィジェット

QA：ウィジェットの幅と高さを指定してつくる

上記手順６で作成されたコードに通常の通りAタグに、data-heightとdata-widthを追加してください。

<a class=”twitter-timeline” data-width=”300″ data-height=”400″ href=”https://twitter.com/hirocamcam?ref_src=twsrc%5Etfw”>Tweets by hirocamcam</a> <script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>

執筆にあたり参考にしたサイト