pavlog

ウェブエンジニアがあれやこれやを書きます

はてなブログとツイッターを連携させる

 

f:id:paveg:20190202170436p:plain


こんにちは、Twitter皆伝のpav(@_pavlog)です。

今日は、Twitter中毒の皆さんがはてなブログを始めたと聞いて、連携方法を書いています。

 

はてなブログとTwitterを連携させるとメリットがいくつかあります。

  1. ブログの更新をTwitterでお知らせできる
  2. Twitter経由でブログにアクセスしてくれる人がいる
  3. ツイートを引用してブログ記事が書ける(かもしれない)
  4. Twitterのウィジェットをブログに置ける

 

それでは早速、Twitterとはてなブログを連携させていきましょう。

 

・目次

 

はてなブログとTwitterを連携させる

 

ツイッターアカウント連携前

まず、ログインした状態のはてなブログのダッシュボードへ行ってください

以下の手順で行うと、正しく連携が行えます(2019/01/20時点)

  1. サイドバーからアカウント設定を開きます
  2. Other Service(その他のサービス)タブを開きます
  3. Twitter Settings(ツイッターの設定)の項目の連携を設定するを開き、「有効にする」あるいは「連携を再設定する」をクリックします*1
  4. ツイッターの認証画面が表示されるので、IDとパスワードを入力し認証を許可します*2
  5. Twitter Settingsの部分を確認すると、有効になっています

フォローボタンの設置

 

ツイッターフォローボタンの配置

  1. サイドバーからデザインを開きます
  2. プロフィールモジュールの編集画面を開き、スクロールすると最下部にFollowボタンを配置するかどうかの項目があるので、チェックを入れて適用します

Twitterにブログ記事を投稿する

 

頼む、ツイートしてくれ(各記事の最下部にボタンが配置されています)。*3

ツイートしてくれ

ブログにタイムラインを埋め込む

出典: https://publish.twitter.com/#

 

f:id:paveg:20190120184417p:plain

f:id:paveg:20190120184540p:plain

 

  1. Twitter Publishにアクセスして、自分のtwitterアカウントURLを貼り付けます
  2. エンターを押すと、表示オプションの選択を促されるので、「Embedded Timeline(埋め込みタイムライン)」を選択します
  3. 生成されたコードをコピーしておいてください
  4. サイドバーからデザインを開きます
  5. モジュールの設定画面を開き、自分でモジュールを追加します
  6. さきほどコピーしたコードを貼り付けます

 

f:id:paveg:20190120184928p:plain

この時、埋め込みタイムラインのツイートの表示数を変更したいケースがあると思います。

aタグの中に、 data-tweet-limit="任意の数字"を追記して、適用してください。

僕はツイートを2つだけ表示するように設定しています。

 

まとめ

 

どうでしたか。

Twitter中毒もといTwitter廃人のみなさまにオススメの設定になったと思います。

次回はInstagramの設定についても書いてみます。

 

頼む、ツイートしてくれ。

*1:画面が更新されて変更されている可能性があります

*2:既にログインしている人は入力画面は表示されません

*3:デザイン設定の項目から表示と非表示を切り替えられます