お問い合わせフォームはココをクリック!

【ブログ運営】たったの5分でできる!Twitterタイムラインをブログ上で表示する方法

どうも、つぶまめ(@tsubutsubumame2)です。

早速ですが『ブログを運営するうえでSNSを有効活用しない手はありません』。

ということで、本ブログにおいてもTwitterのタイムラインを表示させるように設定をしてみました。

今回は、そのやり方について備忘録がてらまとめていきます。

5分程度でTwitterのタイムライン埋め込みが可能

早速、Twitterのタイムラインを埋め込む方法についてです。

まずはパソコンでTwitterのアカウントにログインしましょう。

→→Twitterへのログインはこちらから←←

 

自分のTwitterアカウントにログインをしたら、

画像内①をクリックして、次に②の「設定とプライバシー」をクリックします。

 

続いて、③「ウィジェット」をクリックします。

 

④「新規作成」をクリックします。

すると、いくつか項目が出てきますので「プロフィール」をクリックします。

 

上記の手順を踏むと、自動で下記のページへと切り替わります。

→→https://publish.twitter.com/#←←

(Twitterアカウントにログインしなくとも、上記リンクから飛ぶのが早かったです…)

こんな画面です。

上記の画面が表示されたら、⑤タイムラインとして表示させたいツイッターアカウントのURLを入力します。

ちなみにつぶまめのタイムラインを表示させる場合は「https://twitter.com/tsubutsubumame2」と入力します。

URLを入力してエンターキーを押すと、上記のような画面が現れます。

⑥ここでは左側の”Embedded Timeline”をクリックしましょう。

すると、このような画面が出てきます。

⑦ここをクリックするとコードが自動でコピーされるので、そのコードをブログ内にペーストするだけでOKです!

注意
この後でタイムラインのカスタマイズを行います!

コードが表示されているページは閉じないでください!

 

幅と高さの調整をしてカスタマイズしよう!

さて、上記の手順を踏んでコードのコピーをしたら、あとは張り付けるだけでタイムラインの表示をさせることが出来ます。

ですが、その状態でただ貼り付けると恐ろしく縦に長い状態で貼りつけされてしまいます。

横幅に関してもかなり大きな状態でペーストされてしまいますので、それぞれを調節しましょう。

⑧上記のリンクをクリックしてみましょう。

すると、

このような画面になります。

それぞれの項目は、オレンジ色の文字で書かれている内容の設定箇所です。

ぼくは「高さ:500」「横幅:400」で設定しています。

この設定での実際の見え方はコチラ。

 

これくらいの大きさがちょうどよい感じですね。

自分の好みの高さや横幅に調節する際は、上記の設定画面で実際に数字を入れてみるとプレビュー画像が自動で表示されます。

数字を変更することでプレビューも自動で変更されるので微調整がしやすくて非常に便利ですよ。

 

ちなみに上記のコードを貼り付けた後、テキストモードのまま下記の青字部分のコードを入力することでタイムラインをブログ記事の中央に表示させることが出来ます。

<div style=”text-align:center;”>

<a class=”twitter-timeline” href=”https://twitter.com/tsubutsubumame2″ data-width=”400″ data-lang=”ja” data-height=”500″>Tweets by tsubutsubumame2</a> <script async src=”//platform.twitter.com/widgets.js” charset=”utf-8″></script>

</div>

実際にやってみるとこんな感じです。

真ん中に表示されてますね(PCからご覧ください)。

まとめ

上記の手順を踏むことでTwitterのタイムラインを表示させることが出来ます。

上記の高さや横幅を調節して、サイドバーに貼り付けることであなたのWebサイトを訪れた人へ常にTwitterタイムラインを表示させることが出来たりします。

 

また、FacebookページのタイムラインをWebサイトに表示させる方法についてもまとめてみました!

是非、併せてごらん下さい^^

→→3分で出来る!WebサイトにFacebookページを表示させる方法!←←

 

SNSを有効活用して、いろんな方とのつながりの機会を増やしましょう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です