渋谷で働く営業本部長のブログ

渋谷で働く営業本部長のブログ

渋谷で働く営業本部長のブログ

はてなブログ:サイドバーに Twitter のタイムラインを表示する方法

f:id:ss17935:20190119191250j:plain

 

最近、はてなブログを頑張ってるんですが、同時に Twitter も頑張ってます。

今までは、Facebook 一辺倒だったのですが、Facebook は単なる身内同士の連絡手段でしかない。

これからは、ためになる情報を不特定多数の方にお届けしたいと思います。

その手段として、ブログと Twitter を選択したという事です。

 

ブログと Twitter の相乗効果を狙うには...?

今でも、ブログに Twitter へのリンクは貼っていますが、よりリアルタイム性を出したい。

そこで、よく目にする、サイドバーにあるTweet がリアルタイムに更新されてるやつを思いつきました。

またまた Google先生に聞いてみると、出てきました。

 

 

 

Twitterウィジェットを作成する

まずはウィジェットを作成します。

以下にアクセスします。

Twitter Publish

 

「What would you like to embed?」に自分の Twitter の URL を記入しエンターします。

 

f:id:ss17935:20190120092256p:plain

すると画面がスクロールされて、ウィジェット選択画面が表示されます。
今回は「Embedded Timeline」を選択します。

 

f:id:ss17935:20190120092809p:plain

 

カスタマイズしたい場合には「set customization options.」のリンクをクリックします。

 

f:id:ss17935:20190120093846p:plain

 

 

するとカスタマイズの入力画面が表示されます。

入力画面の下に結果がプレビューされますので、それを見ながら入力します。

 

f:id:ss17935:20190120094030p:plain

 

納得できるウィジェットが完成したら、右下の「Update」をクリックします。

するとコードが表示されます。

 

f:id:ss17935:20190120094354p:plain

 

これでウィジェットは完成しました。

このコードをコピーしておきます。

 

Twitter ウィジェットをサイドバーに貼り付ける

出来上がったウィジェットはてなブログのサイドバーに貼り付けます。

ダッシュボードから以下の通りにクリックします。

「デザイン」→「カスタマイズ」→「サイドバー」→「モジュール追加」→「HTML」

出てきたポップアップに先程のコードをコピペします。

 

f:id:ss17935:20190120095853p:plain

 

適用をクリックしてプレビューを確認します。

 

f:id:ss17935:20190120100145p:plain

 

表示位置は左サイドのモジュールをドラッグ&ドロップで入れ替えます。

「難しいかなぁ」と思ってましたが、意外と簡単でした。

 

今回のカスタマイズは以下のサイトを参考にさせて頂きました。

はてなブログのサイドバーにTwitterのウィジェットを埋め込む方法。 - 写真が好きすぎて

ありがとうございました。

 

↓ ランキングに参加しています。よろしければポチッとして下さい。

にほんブログ村 ブログブログ ブログノウハウへ