WordPress  ツイッターのタイムラインを記事内やサイドバーに埋め込む方法

ワードプレスツイッタータイムライン ブログ

簡単にツイッタータイムラインを埋め込む

 

こんにちは。

ブログのテクノロジーの「と」です。

今回はブログにTwitterのタイムラインを埋め込む方法を紹介します。

タイムラインとは自分のツイートやリツイートをスクロールして見られるものです。

自分のツイッターのタイムラインを埋め込むことでブログ内に常に最新情報を発信できる。ブログからツイッターへと読者を引き込める。ということなんでしょうね。

自分のだけではなくて有名人のツイッターを埋め込むことはどうなんでしょうか?許可いるんでしょうか?気になるなら調べてみてください。

お店や会社などのHPなどでも自分で更新出来ない人は、これを活用すればわざわざ店のHPを見てくれた人のためにせめてツイッターでの最新情報を伝えられるのでいいのかなとも思いますがどうなんでしょうか。作成をプロに任せて放ったらかしの残念なHPが多すぎるように思います。それだけで評価は下がりますね。

 

ツイッターはこちらから

Twitterへようこそ

スポンサーリンク

ツイッタータイムラインのコードを生成する

まず最初にタイムラインのコードを生成します。

タイムラインのコードはTwitter Publishというページで取得できます。

英語のサイトですが大丈夫です。

読む必要ありません。

説明します。

ここからいけます↓

Twitter Publish

 

What would you like to embed?という枠にツイッターアカウントのURLを入力し、→をクリックします。

自分のアカウントURLはプロフィール画面のURLです。

画面が下にスクロールしてHere are your dispray  options という画面になりますので左側のEnbedded Timelineを選択します。

するとコードが生成され、その下にタイムラインのプレビューが表示されます。

黄色く囲ったほうがタイムラインのコードです。このままでよければ右側のCopy codeをクリックし、コードをコピーします。

このままでは長すぎるということもあると思いますので赤い枠のset  customization optionsをクリックして設定を変えます。設定できる項目は4つあります。

①は縦の長さ、横の長さ

数値を変更するとタイムラインの大きさが変化します。

縦の長さの最小は200です。

200ではこんな感じです。

300はこんな

400でdark(背景色黒)です。

使いやすいサイズを選んでください。

②は背景の色です。白か黒かを選べます。

③は言語。

④はリンクの文字のカラーです。

縦の長さはスマホでは長すぎるとスクロールに手間がかかり過ぎますので長さは確認して調節してください。

設定が終わったらupdateをクリックしてコードをコピーします。これでコードの生成は終了です。

 

ブログにツイッタータイムラインを埋め込む

コードを生成したのでWord pressの記事に貼り付けましょう。

タイムラインを記事内に埋め込む

早速やっていきましょう。

タイムラインを記事内に埋め込む方法は先ほどコピーしたコードを貼り付けるだけです。

コード貼り付けはテキストモードで作業してください。

するとこうなります。

 

コード生成のカスタマイズの時に決めた長さは400です。

ちょうどいい大きさではないでしょうか。

サイドバーにタイムラインを埋め込む

次はサイドバーに埋め込む方法をやってみましょう。

Wordpress 外観→ウィジェットをクリック。

 

 

利用できるウィジェットの中からテキスト(PC用)を選びます。

下のようになりますのでウィジェットを追加をクリックします。

テキストのところにコードを貼り付け保存すれば完了です。

これでサイドバーにツイッタータイムラインが埋め込まれました。

このサイトは縦の長さ300で設定してあります。

 

最後まで読んでいただきありがとうございました。

他の記事も読んでくださいね。

 

Wordpress 【cocoon】 Googleマップをブログに埋め込む方法と電話をタップでかける方法
Googleマップと電話の埋め込みを従来のエディタとグーテンベルグでする方法こんにちは。ブログを書いていると店舗や会社など地図情報を載せたいことや、ブログから直接電話をかける方法など出来れば便利なのに、そのくらいのこと出来...

 

Wordpres 簡単!プラグイン不要。TwitterとFacebookとInstagramとYouTube投稿を記事に埋め込む方法
SNSを記事に埋め込む簡単な方法 こんにちは。 ブログのテクノロジーの「と」と申します。 今回はブログの記事内にSNSの投稿の簡単な埋め込み方を紹介します。 TwitterとFacebookとInstagramと...

 

Word press cocoon  簡単! Google プレイストア のリンクを簡単に作る方法
こんにちは。 今回はWord pressで作った記事内にGoogleプレイストアへのリンクを直接貼り付ける方法とGoogleプレイストアのバッジを取得してリンクを張る方法のふたつを書いていきます。 リンクの貼り付け方法は2つとも...

 

Wordpress cocoon 吹き出しを作ってみましょう
ブログの吹き出しを作りましょう こんにちは。 ブログのテクノロジーの「と」です。 今回はすごく役立つブログの装飾。 ブログを書いていてちょっとわからないなと思ったら吹き出し行っとけよというくらい便利な吹き出しの作...

 

Wordpress ファビコンをオリジナル画像に変える方法 サイトアイコン
オリジナルアイコンでサイトを目立たせる こんにちは。 ブログのテクノロジーの「と」と申します。 サイトを作って自分のサイトをスマホのホーム画面に追加したら自分のアイコンがパッとしません。 なんじゃこりゃ ...

 

 

 

 

 

コメント

タイトルとURLをコピーしました