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

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

Initializing...

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

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

twitterをサイドバーに!

twitterをサイドバーに!

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

あなたもこの方法でたった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ボタンをクリック!

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

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

手順4:ディスプレイオプションを選択

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

Embebedded Timelineを選択する画像

タイムライン側を選択!

手順5:カスタムオプションを選択

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

カスタムオプションを選択する画面

サイズ、色、言語を選択

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

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

作成したコードをコピーする画面画像

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

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

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

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

ウィジェットをつくるもう一つの入り口!

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

もうひとつの入り口(Twitterログインページから)

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

 

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

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

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

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

ウィジェットにTwitter Publishコードを貼り付ける

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

 

完成イメージ

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

 

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>

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

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

スポンサーリンク
ページ上部へ戻る