人生総合ライフハック図書館

時事、節約、健康、遊び、恋愛…あらゆるライフハック情報を発信します。

ウェブにtwitterのタイムラインとフォローボタンを表示する方法

私のブログの右下のように、Twitterのタイムラインがサイドバーに表示されるブログを目にすることも多いのではないでしょうか。今回はその設定方法を端的に説明します。

 【タイムライン】Twitter側の操作

まずタイムラインについて、説明します。

1、下記URLにアクセスします。

https://publish.twitter.com/#

 

2、入力欄にTwitterの自身のページのURLを貼ります。

Twitterトップページの「https://twitter.com/」の後ろに「@自分のアカウント」を入れたものになります。 

f:id:enjoy-efficient-life:20190604094029p:plain

 

3、左を選択します。

f:id:enjoy-efficient-life:20190602151055p:plain

 

4、このままでもいいのですが、ホームページに載せるTwitter枠の大きさを調整します。まず、赤く囲った「set customization options」をクリックします。

f:id:enjoy-efficient-life:20190602151338p:plain

 

5、高さ・幅・デザイン等を設定します。

幅は、最小値の220pixel〜デフォルトのデザインでは280pixelまでしか設定できず、それ以上にしても280pixelのまま表示されます。高さも同様で、200〜600pixelの間で設定できます。私は、幅280、高さ600にしました。

最後の「Opt-out of tailoring Twitter」にチェックをすると、ツイッターのホーム画面にある「オススメユーザー」欄に自分が表示されます。

全て確定したらUpdateをクリックします。

f:id:enjoy-efficient-life:20190602152017p:plain

f:id:enjoy-efficient-life:20190604095017p:plain

  

6、コードをコピーします。

クリックするだけでコピーされます。

f:id:enjoy-efficient-life:20190602152812p:plain

【タイムライン】はてなブログ側の操作

7、デザイン → カスタマイズ → サイドバー → でモジュール追加をクリック

f:id:enjoy-efficient-life:20190602152630p:plain

  

7、HTMLをクリックして、タイトル「Twitter」と入力し、下の欄に先ほどのコードを貼り付け、適用をクリックして終わりです。

f:id:enjoy-efficient-life:20190602153138p:plain

【フォロー】Twitter側の操作

デザイン設定でプロフィールをクリックして、フォローボタンにチェックを入れれば表示されますが、他の部位にリンクを作りたい場合や、大きさ等を変更したい場合は、以下の手続きを進めてください。

f:id:enjoy-efficient-life:20190604111933p:plain

 

1、先ほどの2まで同じで、下記URLにアクセスし、URLを入れます。

https://publish.twitter.com/#

 

2、右をクリックします。f:id:enjoy-efficient-life:20190604112000p:plain

 

3、左がフォローボタン、右がリプライボタンを生成できます。

f:id:enjoy-efficient-life:20190604112133p:plain

 

4、名前を隠すかどうか、ボタンを大きくするかどうかの計4種類を選択できます。

f:id:enjoy-efficient-life:20190604112336p:plain

 

私の場合以下の4つです。

f:id:enjoy-efficient-life:20190604113135p:plainf:id:enjoy-efficient-life:20190604113157p:plain

f:id:enjoy-efficient-life:20190604113143p:plainf:id:enjoy-efficient-life:20190604113150p:plain

 

5、同様にアップデートを押して、URLをクリックして、自身のブログに貼り付ければ完成です。