【2021年版】ブログ(Blogger)でツイッターの自分のタイムラインを表示させる方法【ツイッター連携】





はじめに

ブログをやっている方はツイッターのアカウントを持っていらっしゃる方も多いかと思います。私も自分のツイッターアカウントを持っていますので、埋め込もうと思いました。

ただBloggerではデフォルトでツイッターアカウントと連携できるようにはなっていないんですよね。。。

でもご安心ください。Bloggerにツイッターのタイムラインを埋め込むのはとても簡単でした。

やり方は実は細かく分けると数通りの方法があるのですが、今回はその中でも最も簡単な方法をご紹介します

ツイッターをBloggerに埋め込む方法

ツイッターアカウントを作成


まずアカウントを作成しましょう(笑)


Twitter Publishに移動


Twitterアカウントからこのページに移動する方法もあるのですが、
面倒ですので下記リンクをクリックしてください。

Twitter Publish


こういうHPに移動できましたか?

自分のタイムラインを表示する場合はアカウント名(@xxxxx)を入れた
「https://twitter.com/xxxx」を入力します。

するとこういう選択画面が出てきますので、タイムラインを埋め込むために
「Embedded Timeline」を選択します。


これでBloggerにツイッターのタイムラインを埋め込むためのコードが完成しました。
「Copy Code」ボタンを押せば、コードをコピーできます。

下に、このコードでブログに挿入した場合、どういう風にツイッターのタイムラインが表示されているか見えるようになっています。

初期設定では表示が少し長いですよね?

これを変更したければ「Set customization options」を押して、設定を変更しましょう。


するとこういうページにうつります。
基本的に、変更するのは縦幅(Height)と横幅(Width)だけでオッケーです。
適当に値を入力して、「Update」ボタンを押してみましょう。

下に表示されているタイムラインの縦幅や横幅が変わりましたよね?
これで微調整して、希望の縦幅や横幅を設定していきましょう。

ちなみに、ここで設定がいまいちであっても、Bloggerでコードを挿入するときに変更することもできます!安心してください


ちなみに私は横幅はデフォルトのまま(未入力)で、縦幅だけ調節しています
そのためHeight=500pxになっています。参考までに


お気に入りの形状になったら、コードをコピーします。

Bloggerに移動

次にBloggerに移動します。



「レイアウト」を選択し、サイドバーの「ガジェットを追加」を選びます。

コードを挿入



ガジェットの「HTML/JavaScript」を選択します。


「コンテンツ」のところに、先ほどコピーしたコードを埋め込みます。
「タイトル」のところは適当にTwitterとでも入れておけばいいです(なくてもいいです)。

そして「保存」を押したら完成です!!

自分のブログを見に行ってみましょう

ツイッターのタイムラインがBloggerのサイドバーのところに表示されているはずです。

タイムラインの幅が気に入らなかったら、コンテンツに張り付けたコードの
heightまたはWidthのところに入力してある数値を変化させれば、それで微調整が可能です。

Twitter publishに戻ってやりなおしてもできます。


いかがでしたでしょうか?とても簡単でしたよね?

もしやり方がわからなければ、ご連絡いただければ対応いたします。

コメント

人気の投稿