Twitterのタイムラインをブログに表示する方法
ということで、方法は簡単。タイムラインを表示するにはTwitter Pulishという公式の方法を利用して出てきたコードをウィジェットに貼り付けるだけです。ウィジェットに貼り付けるコードを作成する手順
あなたもこの方法でたった1分で作れますよ!手順1:まずはTwitter Pulishにアクセス
ウィジェットに貼り付けるコードを作成するために、Twitterの公式ツール:Twitter Publishにアクセスします。URLは https://publish.twitter.com/手順2:貼り付けるアカウントのプロフィールへのURLを取得
このブログであれば、https://twitter.com/hirocamcamというのがプロフィールページです。手順3:プロフィールURLをTwitter Publishに貼り付ける
下記のように画面中央にURL入力欄が表示されますので、ここにあなたのプロフィールページへのURLを貼り付けます。URL欄右端のEnterボタンをクリック!手順4:ディスプレイオプションを選択
次にディスプレイオプションとして、タイプラインを表示するかTwitterボタンを表示するか聞いてきますので左側の”Embedded Timeline”を選択します。手順5:カスタムオプションを選択
ウィジェットの色や縦の長さを決めるためのカスタムオプションを選択します。これは、上記の画面にある”Set Customization Options”というリンクをクリックして選択します。実際に表示されたカスタムオプション画像は以下のとおりです。入力が完了したら を押してください。手順6:作成したコードをコピーする
カスタムオプションを選択を終了するとコードが作成されますので、これを右端の ボタンでコピーしておきます。ここでコピーしたコードはコンピュータのクリップボードに一時的に保存されていますので、使いたい場合にペースト(Ctrl+V)するといつでも使うことができます。 クリップボードにコピーされた場合
ウィジェットをつくるもう一つの入り口!
ウィジェットは、Twitterサイトからも作ることが出来ます。作成したいアカウントでTwitterにログインし、手順3のところに入る事が出来ます。
→ → → の順に選択すると、上記WordPressのテキストウィジェットにTwitter Publishコードを貼り付けて完成
後はいつものとおり、Wordpressの管理画面を開いて、 →テキストウィジェットを選択と進み、テキストウィジェットの設定をおこなってください。タイトル:好きなタイトルで構いません
内容:内容には前項で作成したTwitter Publishコードを貼り付けます。すでにクリップボード上にありますので、ここではペースト作業(Ctrl+V)をするだけです。
終了したら、画面右下の保存ボタンで保存してください。
完成イメージ
実際に表示したウィジェット部分を拡大したのが下記の画像となります。
QA:ウィジェットの幅と高さを指定してつくる
上記手順6で作成されたコードに通常の通り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>
執筆にあたり参考にしたサイト