daragoのラクガキノート。〜世のため人のため〜

超雑記ブログ。必ず役に立ちます。

【はてなブログ】ブログにSNSのブログパーツを設置する方法(Twitterのタイムライン、feedlyなど)

重要ミッション!(ランク☆☆☆)

自分のブログとSNSを連携させろ!!

 

今回は

  1. はてなブログにTwitterのタイムラインを表示させます。
  2. はてなブログにfeedlyボタンを設置

2つともかなり簡単な作業なので、それぞれ5分程度で終わると思います。けど、重要なことだと思うのでまだやっていない方は是非やってみてください。

 

はてなブログにTwitterのタイムラインを表示させる。

やることは主に3つ。

  • 自分のTwitterでログインします。
  • Twitter Publishに進みコードを取得
  • はてなブログに貼り付ける

 

はてなブログのブログパーツでは、自分のTwitterアカウントのタイムラインを表示させることはできません。

ですので上記のような手順で自分でHTMLのコードをサイドバーに貼り付ける必要があります。その手順をサクッと紹介していきます。

まずは自分のTwitterでログイン。

他人のアカウントにログインしても意味はないぞ!自分のアカウントのURLを知っていればログインしなくても、直接入力しても出来るかも。

 

Twitter Publishに進みコードを取得

Twitter Publishに進み、自分のTwitterアカウントのURLを「Enter a Twitter URL」の欄に入力する。

入力するものはhttps://twitter.com/の後に自分のTwitterアカウントをつけたものです。このアカウントだとdarago777までですね。

Twitter Publishの画面

Twitter Publishの画面キャプチャー。
Enter a Twitter URLの欄に自分のTwitterアカウントのURLを入力する。

 

読み込みに成功すると画面の下にコードが生成されています。Copy Codeをクリックして自分のはてなブログに移動しましょう。

Twitter Publish

コードが自動生成されるので、ブログのHTML欄に貼り付ける。

コピーしたコードをはてなブログに貼り付ける

デザイン→カスタマイズ→サイドバー→HTML

でHTMLの欄に先ほどのコードを貼り付けしましょう。

 

ブログで見た時に縦に長く表示されていて長さを調整したい場合は「copy code」の上にある「set cusutomization options」をクリックし詳細設定をしてください。縦の長さを調整するにはHeight(px)に値を入力してください。このブログは400pxにしています。

 

サイドバーの一番下にTwitterのタイムラインを表示させるときは、延々と下まで続いてしまうので調整が必要かと思います。

途中のサイドバーにタイムラインを表示させる場合、短縮表示されるので調整の必要はありません。

 

feedlyをサイドバーに設置する方法

feedlyとは、複数のブログをまとめて見るためのツールです。ブログを読む時はいちいち単独のURLにログインするのではなく、登録したブログをまとめて読む方が便利なのです。feedlyはRSSと呼ばれるツールなんです。

意外とブログ読者には使われているツールなので設置をしておきましょう。

 

feedly.com

上のリンクからfeedlyボタンのコード生成ができます。

 

STEP.1 ボタンの形状を選択する

ボタンの形状の選択

 

STEP.2 自分のブログのURLを入力する

 

feedlyからhtmlコードを生成する

feedlyからhtmlコードを生成

 

STEP.3 コードのコピーをする

HTMLのコードをコピー

 

それほど難しい作業ではないと思いますが、何かわからないことがあればコメントをしてください。

 

この記事で扱ったものは、SNSもうまく運用したい方には必須の作業です。

まだやっていない方は必ず今すぐに作業をしてくださいね。

 

おーり。