ブログにTwitterの「フォローする」ボタンを設置しよう
おすっ！つな（@tu_na_69）です(*^-^*)
みなさんはブログとTwitterを連携させていますか？
もうやってますよね。そうですよね。
サイトにTwitterのフォローボタンをまだ設置していないよ・・・
という方がいましたら、そんな方はちょっと読んでみてください。
ブログを書いている人の多くは、TwitterなどのSNSも同時に利用しているのではないでしょうか。それぞれ別々に活動させるのはもったいないです。
連携させて活用してみましょう。
はてなブログの場合は、クリックぽんっ！で簡単に連携させることができます。
プロフィールに「フォロー」ボタンを入れるのもお手軽なのです。
ほかのブログやWordpressのサイトでもTwitterの公式サイトを利用して、Twitterボタンを作ることができます。
ボタンの埋め込みコードを作る
Twitterのタイムラインを埋め込むためのコードを作ります。
↓「Twitter publish」のサイトはこちら
①空欄にTwitterのURLを入力して「enter」を押します。
注：アカウントではありません。
URLです。
わたしのアカウントを例にすると↓こちらがURLになります。
「/」より後ろの「tu_na_69」の部分を自分のTwitterアカウントに変更すればOKです。
よろしければフォローもどうぞよろしくお願いします(・∀・)
②タイムライン表示を選んでクリックします。
右の「ツイッターボタン」を選びます。
③「フォローボタン」または「メンションボタン」を選びます。
「フォローする」ボタンが欲しい時は左の「フォローボタン」をクリック。
④コードをコピーします。
↑上の画面でどちらを選択しても同じようなコード画面が表示されます。
「Copy Code」をクリックして、コードをコピーします。
Follow ⇒ フォローする
コピーしたコードをそのまま貼り付けると、このようになります。
ボタンの表示が「Follow＠～～」と英語表記になっています。「Follow」の英語表記を「フォローする」という日本語に変更します。
コードを貼り付ける前にここでメモを使って書き換えします。
直接書き換えてもOKですが、初心者のうちはメモ帳を使って書き換えるのがおすすめです。
このままでもOKという人は、ここは読まなくてもいいです。素通りして次のコード貼り付けにジャンプしてください。
①メモ帳やテキストエディターのソフトを開きます。
②コピーしたコードを貼り付けます。
③<a href="">～</a>の間の囲み部分の文字を書き換えます。
画像でいうと「Follow@tu_ne69」の部分です。
「＠～」以下のアカウントは残した方がいいです。
「フォローする＠tu_na_69」に変更しました。
「＠tu_na_69さんをフォロー」もいいですね。
④書き換えしたコードをコピーします。
コードを貼り付ける
ブログに「フォローする」ボタンを貼り付けます。
サイドバーや記事下など、貼り付けたいところを選びます。
サイドバーに自由に貼り付けしたい方は、Instagramウィジェットと同じやり方なので、こちらの記事を読んでいただいた方が詳しいかも。
はてなブログのサイドバーに貼り付ける
はてなブログでは、プロフィールに簡単にTwitterのフォローボタンを設置することができます。プロフィールのウィジェットを利用しない人は、HTMLを使って好きなところにフォローボタンを設置してみてください。
①ダッシュボードの「デザイン」→「カスタマイズ」→「サイドバー」をクリック。
②一番下にある「+モジュールを追加」をクリック。
③</>HTMLをクリック
④タイトルを入力。好きなタイトルを入力してください。
⑤コピーしたコードを貼り付けます。
⑥「適用」をクリックして完了です。
FC2ブログのプロフィールに貼り付ける
①管理画面から「設定」→「プラグインの設定」→「公式プラグインの追加」をクリックします。
PC用、ケータイ用スマートフォン用とそれぞれ設定します。少し面倒ですが、貼り付けるだけなので、すぐできますよ。がんばって！ ②プラグインの中から「プロフィール」の「追加」をクリックします。
③【HTMLの編集】をクリックします。
上級者向けと書かれていますが、恐れず進みましょう。大丈夫です。
④すでに記入されているコードの下に、さきほどコピーしたコードを貼り付け、「設定」をクリックして完了です。
まとめ
こんな感じでボタンが表示されました。
はてなブログやほかの無料ブログでも同じように設置できます。
Twitterとブログを連携させて、活用してみましょう(^o^)丿
記事を紹介しくれたサイト
この記事が参考になったと以下のサイトで紹介していただきました。ありがとうございます。
- はてなブログ無料版＊初心者におすすめのカスタマイズ＊かっこいいブログデザイン - ふなさんブログ
- 《38》【twitter】ツイッターのフォローボタンに表示されてるIDを変えたいとき【ツイッター】 - まろやん blog
- はてなブログ初心者専用！カスタマイズやデザイン方法 まとめ - TomoGのごちゃまぜ倉庫
- 自己紹介（はじめての方はどうぞ） - 鯖缶＠3rd＆forever
- 【ブログ】はてな用Twitterアカウントを開設してみたんだ♪(●´ω｀●)☆彡～アクセスアップに最適？！はてなブログとTwitterの連携方法を大公開しちゃうぞ♪～ - ゆるふわSEの日常♪
- twitter初心者によるtwitter初心者のためのtwitter用語集【つまり備忘録】 - ゴリラの村
- 【はてなブログ】サイドバーのプロフィール画像を大きくするにはどうすればいい？ - 音楽の楽しさを共有したいブログ
はてなブログにTwitterのタイムラインを埋め込む方法
おすっ！つな（@tu_na_69）です(@_@。
こんな雪の日には、ブログのサイドバーにTwitterのタイムラインを埋め込みしたいなぁ、なんてことを思うのです。
あなたも同じ考えでしたか。
それでは早速やってみましょう。
埋め込みコードを作る
Twitterのタイムラインを埋め込むためのコードを作ります。
↓「Twitter publish」のサイトへＧＯ
①空欄にTwitterのURLを入力して「enter」を押します。
注：アカウントではありません。
URLです。
わたしのサイトだと↓こちら
よろしければフォローもどうぞよろしくお願いします。
あんまりつぶやいていません。ごめんなさい。
忙しくてつぶやいている暇がない。
記事を書く時間はあっても←こっちの方が時間がかかっているけれども。
あっ、また話が脱線しました。すみません。
②タイムライン表示を選んでクリックします。
左の「タイムライン」を選びます。
③コードをコピーします。
②の画像をクリックすると、下に生成されたコードが表示されます。
「Copy Code」をクリックして、コピーします。
コードの下にはTwitterのタイムラインも表示されますよ。
ブログにコードを貼り付ける
①ダッシュボードから「デザイン」→「カスタマイズ」→「サイドバー」をクリックします。
②一番下にある「+モジュールを追加」をクリック。
③</>HTMLをクリック
④タイトルを入力
「twitterタイムライン」とか「フォローしてね」とか、好きなタイトルを入力してください。
⑤コピーしたコードを貼り付けます。
⑥「適用」をクリックして完了です。
タイムラインをカスタマイズ
コピペしたコードに、ピンクとグリーンの下線部分を追加挿入して、サイズと表示件数をカスタマイズしました。
サイズをカスタマイズ
デフォルト（初期設定）では、タイムラインはかな～り長いのでサイズを調整します。
幅（width="")と長さ（height=""）で調整できますが、長さは表示件数で調整するので、ここでは幅だけにしました。
表示件数をカスタマイズ
サイズのカスタマイズで長さ（height）を設定することも可できますが、それよりも表示件数を設定したほうがすっきりします。
表示件数は１～20の間で設定できます。
「２０」にするなら、長さ設定したほうがいいだろうけど(;^_^A
ここでは、「３」に設定しています。
だいぶすっきりします。
まとめ
ブログにTwitterのタイムラインを埋め込むことで、さらに動きのあるサイトになったと思います。
はてなブログとTwitterを連携させたい方はこちらの記事を参考にどうぞ。
記事を紹介してくれたサイト
この記事が参考になったと言及してくださったサイトを紹介しています。ありがとうございます。
- 特定ツイートを Hatena Blog に表示する方法 - へのへのもへじ
- Twitterのタイムラインをサイドバーに表示させる方法 - すんげブログ
- ブログのサイドバーにTwitterタイムラインを埋め込みました！ - 生きるのをもっと楽に、楽しく
- Twitterのタイムラインをブログに埋め込んでみた - 海外 ひとり旅の野望！
- 【おすすめ】はてなブログのテーマ「UnderShirt」を使ってブログのデザインを一新しました！ - 思い考える日常
- 【ブログ Twitter連携】Twitterもやっているので、はてなブログ内にツイートをのせてみた・・結局やめたその理由とは。 - ken-j’s diary
- 改装しました - みっちぇの節約レポ
- ブログのUIを改善(？)しました！ - 人間初心者
- サイドバーを少しいりじました - KnoNの学び部屋
- はてなブログ初心者専用！カスタマイズやデザイン方法 まとめ - TomoGのごちゃまぜ倉庫
- Twitter連携でフォロアー拡大♪過去ブログの続きです～ - わたしとかぞくと... （サイドビジネスとパートと育児の狭間にて）
- はてなブログのサイドバーにInstagramのリンクをつける方法 - 京野が女、妻、母、エンジニアとしての生き方を考えるブログ
- ブログ立ち上げの記録（7/8更新） - Let's enjoy 同人
- 自己紹介（はじめての方はどうぞ） - 鯖缶＠3rd＆forever
