タイムラインを埋め込みたい人「他のサイトを見るとツイッターのタイムラインが表示されてるけど、あれってどうやってやるの？自分のブログやサイトにもツイッターのタイムラインを埋め込みたいので手順を教えてください。」
この記事の内容
- Twitterのタイムラインの埋め込み方法
- 埋め込みデザインのカスタマイズする方法
- サイドバーへの埋め込み方法
どうも！ましゅー(@mashuublog)です。
Twitterのタイムラインを埋め込み方法がわからない。今回はそんな方向けにTwitterのタイムラインを埋め込み方法を紹介します。
埋め込みをするとこんな感じですね。
それでは説明していきます。
タイムラインの埋め込みに必要なもの
まずは身支度から始めましょう。必要なものは下記の２つ。
- 自身のTwitterアカウント
- 自分のタイムラインのURL(https://twitter.com/＋”@を抜いたアカウントID”になっているはず。)
準備ができたら次に進みます。
Twitterタイムラインの埋め込み手順
まずはいよいよ埋込みの作業に入って行きましょう。
全体の流れから説明します。英語表記のサイトを使うのですが、手順は簡単なので問題ありません。
- まずはhttps://publish.twitter.com/#にアクセスしましょう。
- 自分のtwitterタイムライン画面のURLを入力します。(私で言うとhttps://twitter.com/mashuublogですね)
- 「Embedded Timeline」の方をクリックしてコピー。※ちなみに右側の「Twitter Buttons」はTwitterのフォローボタンを作ることができます。
- 「set customization options」でカスタマイズをする。(詳しいカスタマイズ方法はこちら)
- 「Copy Code」を押して、その内容をサイトやブログへ貼り付け。(サイトバーへ貼り付ける方法を参照)
手順は以上です。ただこのままだとタイムラインが超長くなってしまうので次にカスタマイズ方法を説明します。
埋め込みデザインのカスタマイズをする方法
先ほどの④の手順「set customization options」を押すと以下のような画面になります。
こちらでデザインの調整ができます。調整できる内容は以下のとおり。
- タイムラインの表示高さ(px)(当サイトでは400)
- タイムラインの表示幅(px)(当サイトでは320)
- 表示のバックカラーを変更できます。「Light」か「Dark」から選べます。(お好み)
- 言語を何で表示するか選択できます。(まぁ特に理由がない限りAutomaticで問題ないかと)
ちなみにDarkのカラーはこんな感じ。
サイトのデザインに合わせて変更すると良いと思います。
カスタマイズの設定が終わったら下の「Update」ボタンをクリック。
コードをクリックしてコピーし、サイトやブログに張り付けましょう。
サイドバーに表示させる方法
表示位置についてですが、おそらくサイドバーにタイムラインを表示したい方が多いのではないでしょうか。手順を説明していきます。
- ダッシュボードから外観を選択
- カスタマイズをクリック
- ウィジェットを選択
- サイドバーを選択
- ウィジェットを追加をクリック
- テキストを選択(ちょっとスクロールした所にあります。)
- 必要があればタイトルを入力
- ビジュアルからテキストに切り替え
- コピーしたコードを貼り付け
- 適用ボタンを押します
- 忘れないように公開ボタンも押しましょう
まとめ：Twitterタイムラインの埋め込みは超簡単
いかがでしたでしょうか。
ツイッターのタイムラインの埋め込み方がわかったのではないでしょうか。
Twitterとブログを両立している方は私と同じですね～。Twitterの発信内容はブログにも生かせるので便利ですよね。
是非ともましゅー(@mashuublog)をフォローしていただけると、嬉しいです！一緒にブログ＆Twitterで頑張りましょう！
Twitterのフォロワー数を伸ばすコツはこちら
コメント