読者です 読者をやめる 読者になる 読者になる

UTALI

書き溜めておいた技術記事や旅行記のバックアップです。

はてなブログにTwitterのタイムラインを埋め込む方法 - カスタマイズも

自分のブログにTwitterのタイムラインを埋め込んでいる人は多いですね。これにはどのような意味があるのでしょうか? SEOの観点から言えばサイトの滞在時間を延ばすことは大変重要です。これはGoogleがサイトのコンテンツの価値を測る基準としてユーザーがどの程度ページをしっかりと見ているかを注目しているからで、サイトの検索順位を上げるためにはこの部分をしっかりと注力していく必要があります。 これに関して言えばTwitterのタイムラインを埋め込んでおけばサイトの訪問者があなたのツィッターの投稿に興味をもって、それを見ている時、余分にサイトに滞在する可能性があるということになります。もちろん面白い投稿をするというのが重要なポイントですが

それでは順を追ってはてなブログTwitterのタイムラインを埋め込む方法を見てみましょう。

アカウントのホームからbioをクリックして設定画面に移動

f:id:mochizuki_p:20161012222858p:plain

最初にあなたのアカウントのホーム画面に移動してbio(アイコン)をクリックして設定画面に遷移します

画面の下部に移動してウィジェットをクリック

f:id:mochizuki_p:20161012222855p:plain

設定画面に移動したらページの下の方に移動して左側にある欄からウィジェットを選択します。

新規作成でコレクションをクリック

f:id:mochizuki_p:20161012222707p:plain

ウィジェットの画面に遷移したら右上にある新規作成のボタンを押してスライダーからコレクションを選択します。

TwitterアカウントのURLを入力する

f:id:mochizuki_p:20161012222658p:plain ここでタイムラインを埋め込みたいアカウント(あなたのアカウントですね)のホーム画面のURLを画面中央のテキストボックスに入力します。

通常は

https://twitter.com/{スクリーンネームから@を除いた部分}

になります。
僕の場合であればスクリーンネーム@mochizuki_ichirですので

https://twitter.com/mochizuki_ichir

となります。

Embedded Timelineを選ぶ

f:id:mochizuki_p:20161012222703p:plain

次に埋め込みのタイプを選択します。今回はタイムラインを埋め込みたいのでEmbedded Timelineを選択してください。

埋め込むコードが発行されるので保存する

f:id:mochizuki_p:20161012222652p:plain

うまくコードが発行されたら吹き出しの中のコードをコピーして保存しておきます。

はてなブログに移動してデザインに移動

f:id:mochizuki_p:20161013162330p:plain

あなたのはてなブログの管理画面に移動してデザインをクリックします。

モジュールで新規作成をクリック

f:id:mochizuki_p:20161012222638p:plain

画面左側にある2番のアイコン(工具)をクリックして、メニュー中程にあるサイドバーをクリックします。 そしてメニューからモジュールを選択して新規作成をクリックします。

HTMLを選択して任意の名前をつけて先ほど保存した埋め込みコードを貼り付け適用をクリック

f:id:mochizuki_p:20161012222646p:plain

モジュールを追加のポップアップが表示されたら下部にスクロールしてHTMLをクリックします。そして大きな方のテキストボックスに先ほど取得したTwitterの埋め込みコードをペースト、小さい方のテキストボックスには任意の名前をつけて下さい。ここではTwitterとしておきました。

デフォルトの設定のままだと画面が大きすぎると感じる方も多いと思います。この場合は埋め込みコードの<aで始まる部分に半角スペースを空けてheight="500"を追記して下さい

<a height="500" class="twitter-timeline" href="https://twitter.com/mochizuki_ichir">Tweets by mochizuki_ichir</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

f:id:mochizuki_p:20161013164553p:plain このようにスクロールで表示されるようになります。

またサイドバーではなくフッターに埋め込みを表示したい場合もあると思います。この場合はデザインの画面で画面左側にある2番のアイコン(工具)をクリックした後、サイドバーではなくフッターを選択してください。そうすると空白のテキストボックスが表示されるので、ここにTwitterの埋め込みコードをペーストしてください。

f:id:mochizuki_p:20161013164612p:plain

これでは大きすぎると感じた場合は幅を指定します。先ほどの埋め込みコードにwidth="300"を追加します。

<a height="500" width="300" class="twitter-timeline" href="https://twitter.com/mochizuki_ichir">Tweets by mochizuki_ichir</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

f:id:mochizuki_p:20161013164626p:plain

こうするとこのようにちょうどいいサイズに調整されました!このwidth,heightの値は各自お好みのサイズに変更してみてください。