マーケライフ

Webマーケティング、SEO、ゲーム、結婚生活についての情報を発信していくブログ。

カテゴリ

はてなブログにtwitterのフォローボタンとタイムラインを追加

ブログ開設したばかりなのに延々とカスタマイズについて書いています。

今日はtwitter関連の追加方法について紹介していきます。

1.プロフィールにtwitterのフォローボタンを追加する方法

1.1.はてなブログtwitterを連携させる

まずは管理画面から「アカウント設定」をクリックして、画面が変わったら上にある「外部サービス連携」をクリック。Twitter連携設定のところにある「有効にする」をクリック。

f:id:ysuzuk1:20160113223148p:plain

twitterに移動するよっていう確認画面が出るので、そのまま進みましょう。

f:id:ysuzuk1:20160113223210p:plain

twitterにログインしていると、下のような画像が出てきます。ここでも認証ボタンを押すだけです。

Twitterにログインしていない場合は、ログインしてくださいという画面が出てくるので、連携させたいtwitterアカウントでログインしましょう。

f:id:ysuzuk1:20160113223241p:plain

設定が終わると、さっき「有効にする」をクリックした右側が「現在有効です」という文字に変わっていると思います。有効になっていたらはてなブログtwitterの連携は完了です。

f:id:ysuzuk1:20160113223312p:plain

1.2.連携したtwitterのアカウントをプロフィールに追加する

管理画面から「デザイン」「スパナのマーク」「サイドバー」とクリックしていきます。すると「プロフィール」というのがあるので、クリックすると下の画面が出てきます。「フォローボタン」にチェックを入れましょう。

f:id:ysuzuk1:20160113223354p:plain

あとは「適用」して「変更を保存する」だけです。これでブログのプロフィール欄にツイートのフォローボタンが増えました。おめでとうございます。

2.はてなブログtwitterのタイムラインを表示する方法

2.1.twitterウィジェットを作成する

こちらはtwitterにアクセスしましょう。右上にある顔アイコンをクリックすると出てくる「設定」をクリックしてください。

f:id:ysuzuk1:20160113223710p:plain

次は「ウィジェット」「新規作成」の順にクリックしましょう。

f:id:ysuzuk1:20160113223737p:plain

ウィジェットの作成画面が開いたら、目的のものを選びましょう。今回はタイムラインを表示するのが目的なので、「ユーザータイムライン」のままでOKです。その他の項目は好きに設定して大丈夫ですし、そのままでも大丈夫です。僕のやつは無改造です。

設定項目を好きなものに変えたら、「ウィジェットを作成」をクリックしましょう。

f:id:ysuzuk1:20160113223817p:plain

ウィジェットが完成すると、右下の辺りに文字列が出てくるので、メモ帳にコピペしておきましょう。

f:id:ysuzuk1:20160113223831p:plain

2.2.はてなブログのサイドバーに追加する

今度は、はてなブログ管理画面に戻ります。

「デザイン」「スパナのマーク」「サイドバー」とクリックしていきます。今回は新たにサイドバーに追加するので、「モジュールを追加」を選びましょう。 

f:id:ysuzuk1:20160113224455p:plain

ポップアップが出てきたら下の方にある「HTML」を選んで、タイトルを決めましょう。「twitter」とかで良いと思います。そしたら、下の欄にtwitterでつくった文字列をコピペしましょう。

f:id:ysuzuk1:20160113002312p:plain

最後に「適用」「変更して保存する」で完成!

f:id:ysuzuk1:20160113224049p:plain
次回はプロフィールに「RSSボタン」「Feedlyボタン」を追加する方法を紹介していきます。急に難易度上がった内容になります。

一連のカスタマイズ記事

marke-life.hatenablog.com

marke-life.hatenablog.com

marke-life.hatenablog.com