Teaprog.com

とあるエンジニアの日々の記録。エンジニアと関係のないようなことも書きます。

はてなブログでのTwitterのタイムラインの表示方法

はじめに

 

はてなブログにおいて、Twitterのタイムラインを記事のサイドに埋め込む方法を見つけましたので、共有したいと思います。

 

参考記事https://www.gachatsuku.com/entry/2018/12/22/000000

 

f:id:tk0137:20201002183204j:plain

 

目次

 

手順

 HTMLコード取得

 

まず下のリンクより「Twitter Publish」のページに飛びます。

 

Twitter Publish

 

すると「Enter a Twitter URL」という自身のTwitterのURLを入力するテキストボックスがありますので、ここにタイムラインを貼り付けたいTwitterのアカウントのURLを入力します。

 

入力例は以下の通り。

 

https://twitter.com/ユーザ名

 

f:id:tk0137:20201002190831j:plain 

URLを入力し終えたら画面を下にスクロールして「Here are your options」の欄に移ります。

 

f:id:tk0137:20201002192709j:plain

 

「Embedded Timeline」をクリックするとHTMLコードが示されますのでそれをコピーします。

 

f:id:tk0137:20201002192040j:plain

 はてなブログ側での設定

 

自身のはてなブログのアカウントに入り、左の項目から「デザイン」を選びます。

 

f:id:tk0137:20201002200512j:plain

 

デザインの編集画面に写ったら、左のタブの上部にあるパレット、レンチ、タブレットの形をした3つのアイコンのうちレンチを選びます。

 

すると左のタブにさらに細かく編集する部分が表示されますので、そのうちの「サイドバー」をクリックします。

 

f:id:tk0137:20201002194625j:plain

 

次に出てくる画面では「モジュールを追加」をクリックします。

 

f:id:tk0137:20201002195122j:plain

 

「モジュールを追加」というウィンドウが表示されたら、左のタブから「HTML」を選択し、先ほどTwitterのサイトでコピーしたコードを貼り付けます。

 

貼り付けが完了したら「適用」をクリックします。

 

f:id:tk0137:20201002195925j:plain


以上で全ての設定が終了です。

自分のサイトページをみた時に右側のサイドバーにTwitterのタイムラインが貼り付けられているか確かめてください。

 

 表示するツイート数を制限したいとき

 

以下のコードを<a 〜>のタグの中に書き込みます。

 

data-tweet-limit="3"


上のコードは表示するツイート数を3つに制限するという意味です。

 

最後に

 

私もブログを訪れてくださった方にTwitterの様子をすぐに見ていただけるようにしたいという思いから、つい最近タイムラインをブログ内に設置しました。

 

簡単な作業ではありますが、はてなブログを始めたばかりの方にも分かりやすくなるように心がけました。

 

是非ご参考までに。ありがとうございました。