Twitter(ツイッター)タイムラインとは?埋め込みは簡単?

こんにちは!カリミです♪

実はツイッターのタイムラインってブログに埋め込まれているとちょっとカッコイイなと思ってました。

特に最近はツイッターによく出没しているので、その活動をブログと連携したいと思って、

埋め込む作業をしたら、とっても簡単に設置できました。

なので今日は、タイムラインの説明とブログへの埋め込み方やサイズの調節の仕方をお伝えします。

 

Twitterタイムラインとは

Twitterタイムラインとは、ブログにこんな感じで埋め込まれているTwitterと連携された最新の公開ツイート表示です。

ポジティブアフィリエイト生活 ツイッター埋め込み

 

タイムラインの名の通り、埋め込まれた箱の中でスクロールして過去ツイートを見る事もできます。

この様に表示するためには次の3ステップで進めていきます。

  1. publish.twitter(パブリッシュツイッター)に自分のツイッターURLを入力
  2. 埋め込み用のコードを取得(カスタマイズ可能)
  3. WordPressのウィジェットに貼り付ける

では、早速始めましょう!

パブリッシュツイッターにツイッターURLを入力

まずはTwitterタイムライン用のリンクが作成できるパブリッシュツイッター(公式)にアクセスして、
埋め込みたいあなたのツイッターURLを入力します。

Publish Twitter ユーザー名

 

 

ユーザー名の確認方法

【PCからツイッターにアクセスした場合】

ツイッターURLはプロフィールを押すとアドレスバーに表示されています。

私のツイッターURLは https://twitter.com/PositiveKarimi になります。

 

または『設定』からユーザー名を確認できます。

Twitterアカウント名取得

 

【スマホのアプリの場合】

『設定プライバシー』からユーザー名を確認できます。

設定プライバシー スマホ 1

 

 

 

埋め込み用のコードを取得(カスタマイズ可能)

さて、ツイッターURLをパブリッシュツイッターに入力(①)すると、

『Here are your display options (どんな表示にしたいですか?)』

と聞かれますので、左側の②『Embedded Timeline』(埋め込みタイムライン)を選びます。

 

実はこの初期設定だと、タイムラインがかなり大きいサイズなので、

③『Set Customization Options』(カスタマイズ設定)をクリックします。

 

埋め込み用のコードを取得

 

④に高さ(px)、⑤に幅(px)で入力します。

私が今使っているサイズは600px(高さ)X 400px(幅)です。

⑥のUpdate(アップデート)を押します。

Twitterタイムライン カスタマイズ サイズ

 

⑦『コピーコード』を押して、カスタマイズしたコードをコピーします。

ツイッタータイムラインコード コピーコードツイッタータイムライン コードコピーされたチェック

 

 

こんな感じのコードが取得できたはずです。

ツイッター 埋め込みコード見本

 

ではこれをWordPressのウィジェットに貼り付けていきましょう。

 

WordPressのウィジェットに貼り付ける

WordPress(ワードプレス)のウィジェットとは、簡単にコードなどを貼り付けて表示させる事ができます。

『外観>ウィジェット』から、タイムラインを貼り付けたい場所(一般的にはサイドバーやフッター)に、

『テキスト』ウィジェットを移動します。

 

ウィジェット追加

 

このテキストウィジェットの『テキスト』タグをクリックしてURLを貼り付けます。

 

ツイッター 埋め込みコード入力

 

無事貼り付けられていると『ビジュアル』側には、Tweets by「ツイッター名」が表示されます。

ウィジェット ビジュアル

 

さいごに:ブログに表示されているか確認

そして最後にあなたのサイトにアクセスして、
きちんとツイッタータイムラインが表示されているか確認しましょう。

サイズが合わない場合は、
埋め込みコードを取得の③『Set Customization Options』(カスタマイズ設定)に戻ってやり直します。

 

今日は、タイムラインの説明とブログへの埋め込み方やサイズの調節の仕方などをお伝えしました。

これであなたの呟きもブログに表示されます♪

お疲れ様でした〜 ( ´∀`)

ツイッタータイムライン 埋め込みたい
最新情報をチェックしよう!