こんにちは!カリミです♪
実はツイッターのタイムラインってブログに埋め込まれているとちょっとカッコイイなと思ってました。
特に最近はツイッターによく出没しているので、その活動をブログと連携したいと思って、
埋め込む作業をしたら、とっても簡単に設置できました。
なので今日は、タイムラインの説明とブログへの埋め込み方やサイズの調節の仕方をお伝えします。
Twitterタイムラインとは
Twitterタイムラインとは、ブログにこんな感じで埋め込まれているTwitterと連携された最新の公開ツイート表示です。
タイムラインの名の通り、埋め込まれた箱の中でスクロールして過去ツイートを見る事もできます。
この様に表示するためには次の3ステップで進めていきます。
- publish.twitter(パブリッシュツイッター)に自分のツイッターURLを入力
- 埋め込み用のコードを取得(カスタマイズ可能)
- WordPressのウィジェットに貼り付ける
では、早速始めましょう!
パブリッシュツイッターにツイッターURLを入力
まずはTwitterタイムライン用のリンクが作成できるパブリッシュツイッター(公式)にアクセスして、
埋め込みたいあなたのツイッターURLを入力します。
ユーザー名の確認方法
【PCからツイッターにアクセスした場合】
ツイッターURLはプロフィールを押すとアドレスバーに表示されています。
私のツイッターURLは https://twitter.com/PositiveKarimi になります。
または『設定』からユーザー名を確認できます。
【スマホのアプリの場合】
『設定プライバシー』からユーザー名を確認できます。
埋め込み用のコードを取得(カスタマイズ可能)
さて、ツイッターURLをパブリッシュツイッターに入力(①)すると、
『Here are your display options (どんな表示にしたいですか?)』
と聞かれますので、左側の②『Embedded Timeline』(埋め込みタイムライン)を選びます。
実はこの初期設定だと、タイムラインがかなり大きいサイズなので、
③『Set Customization Options』(カスタマイズ設定)をクリックします。
④に高さ(px)、⑤に幅(px)で入力します。
私が今使っているサイズは600px(高さ)X 400px(幅)です。
⑥のUpdate(アップデート)を押します。
⑦『コピーコード』を押して、カスタマイズしたコードをコピーします。
こんな感じのコードが取得できたはずです。
ではこれをWordPressのウィジェットに貼り付けていきましょう。
WordPressのウィジェットに貼り付ける
WordPress(ワードプレス)のウィジェットとは、簡単にコードなどを貼り付けて表示させる事ができます。
『外観>ウィジェット』から、タイムラインを貼り付けたい場所(一般的にはサイドバーやフッター)に、
『テキスト』ウィジェットを移動します。
このテキストウィジェットの『テキスト』タグをクリックしてURLを貼り付けます。
無事貼り付けられていると『ビジュアル』側には、Tweets by「ツイッター名」が表示されます。
さいごに:ブログに表示されているか確認
そして最後にあなたのサイトにアクセスして、
きちんとツイッタータイムラインが表示されているか確認しましょう。
サイズが合わない場合は、
埋め込みコードを取得の③『Set Customization Options』(カスタマイズ設定)に戻ってやり直します。
今日は、タイムラインの説明とブログへの埋め込み方やサイズの調節の仕方などをお伝えしました。
これであなたの呟きもブログに表示されます♪
お疲れ様でした〜 ( ´∀`)