Twitterフォローボタンを作成して、はてなブログに設置する方法
こんにちは、ピコピコくんです。
今回はTwitterのフォローボタンを作成してはてなブログに設置する方法について書きました。3分ぐらいで簡単にできるよ！
きっかけ
このブログの右サイドバーの「About Me」にGoogle アドセンスの広告を表示するようにしたら、読者になるボタンとTwitterフォローボタンが広告の下に表示されるようになってしまいました。
はてなブログのサイドバー用モジュールを利用してAbout Meを表示しているんですが、その中に読者になるボタンとTwitterフォローボタンを表示する機能があるんです。
これは便利な機能なんですが、それだと入力したHTMLタグの下、つまり広告の下に読者になるボタンとTwitterフォローボタンが表示されてしまうんです。
そうなるとボタンが見辛くなるのと、広告の誤クリックを招くと考えました。そこで、はてなブログの機能を使わずにTwitterフォローボタンを表示する方法を調べようと思ったのがきっかけです。
フォローボタンの作成方法
1．Twitter Publishページにアクセスする
Twitter Publishページ（ https://publish.twitter.com/ ）にアクセスします。
2．Twitter Buttons を選択する
画面の少し下にある「Twitter Buttons」を選択します。
3．Follow Button を選択する
作成するボタンの候補が表示されるので「Follow Button」を選択します。
4．Twitterのアカウント名を入力して Previewボタンを押す
入力欄にフォロー対象のTwitterアカウント名を入力してPreviewボタンを押します。
5．Copy code ボタンを押す
Copy code ボタンを押してフォローボタンのコードをコピーしたらフォローボタンの完成です。次の手順ではこのコードを使ってはてなブログにフォローボタンを表示します。
フォローボタンの設置方法
フォローボタンの作成方法の手順（5）でコピーしたコードを使って、はてなブログのサイドバーにフォローボタンを表示してみましょう。
1．デザイン画面を開く
はてなブログの管理画面にログインして、デザインの画面を開いたら、工具のマークをクリックして、次に「サイドバー」をクリックします。そして「モジュールを追加」をクリックしてモジュールの追加画面を開きます。
2．モジュールの追加
モジュール追加画面が開いたら、画面左のリストから「HTML」を選択します。続いてモジュールの表示名を任意で設定し、コード入力欄にフォローボタンの作成方法の手順（5）でコピーしたコードを貼りつけて、「適用」ボタンを押して保存します。
3．フォローボタンの表示確認
サイドバーにフォローボタンが表示されました。ちなみにフォローボタンのコードをはてなブログの記事に貼りつければ、記事の中にフォローボタンを設置することもできます。これで好きな場所にフォローボタンを置けるね！
ボタンのカスタマイズ
Twitter Publishのページではフォローボタンのデザインを簡単に、ほんの少し変更することができます。変更できる内容は以下の通りです。
・アカウント名の表示 or 非表示
・ボタンの大きさ（通常 or 大きい）
・ボタンに表示する言語
1．ボタンのカスタマイズページを開く
Twitter Publishページ（ https://publish.twitter.com/ ）でフォローボタンを作成し、Copy Codeボタンが表示されている画面の「set customization options」リンクを押してボタンのカスタマイズページを開きます。
2．アカウント名の表示 / 非表示
カスタマイズページで「Hide Username」をチェックするとボタンからアカウント名が削除されてFollowとだけ書かれたボタンにすることができます。
3．ボタンの大きさ変更
カスタマイズページで「Large Button」をチェックすると大きいサイズのボタンを作ることができます。
4．表示言語の変更
カスタマイズページで言語のリストから任意の言語を選択すると、ボタンに表示する言語を変更することができます。
読者さん募集中
記事を気に入ったら読者登録をお願いします！
