ガチャつくブログ

IT系のお勉強のために、やってみたことをアウトプットしていきます。

はてなブログで遊ぶ - Twitterのタイムライン埋め込み -

f:id:tmt-tty:20181221234436p:plain

はじめに

はてなブログのカスタマイズです。

TOPページに自分のTwitterのタイムラインを埋め込みたいと思います。

 

こんな感じになります。

f:id:tmt-tty:20181221233334p:plain

 

やり方

Twitter Publish にアクセスし、埋め込みコードを取得します。

自分のTwitterページ(私の場合は、https://twitter.com/_tamitom)を入力します。

f:id:tmt-tty:20181221233300p:plain

 

Embedded Timeline を撰択します。

f:id:tmt-tty:20181221233313p:plain

 

Copy Codeをクリックします。

f:id:tmt-tty:20181221233321p:plain

 

はてなブログ

デザイン > カスタマイズ > サイドバー

モジュールを追加をクリック

f:id:tmt-tty:20181221233325p:plain

 

HTMLを撰択し、タイトル、先ほどコピーしたコードを貼り付けて、適用をクリック。

f:id:tmt-tty:20181221233330p:plain

 

コードは下記の様にし、赤字の部分を追加し、表示する数を制限しています。

<a class="twitter-timeline" href="https://twitter.com/_tamitom?ref_src=twsrc%5Etfw" data-tweet-limit="3">Tweets by _tamitom</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 

変更を保存するをクリック。

表示されるようになりました!!

f:id:tmt-tty:20181221233334p:plain