自分の tumblr ブログに Twitter のフォローボタンを表示する方法

自分の tumblr ブログに Twitter のフォローボタンを表示する方法について書きます。
なお、tumblr に限らず、他のブログ（Blogger とか）だろうと、途中までは同じ方法で OK です。

Twitter の "Twitter ボタン" の URL にアクセスします。

"フォローする" のチェックボックスを選択すると、下記画面が表示されます。

"ユーザー" には自分の Twitter アカウント名を入力します。"言語設定" では "日本語" を選択します。
右に表示されている Twitter フォローボタンは、実際の表示イメージになっています。

下記のコード部分をコピーしておきます。

tumblr にログインして、"テーマをカスタマイズ" をクリックします。

下記画面のように、"説明" の箇所に、コピーしておいたコードをペーストします。
そして、"保存" ボタン、"閉じる" ボタンの順にクリックします。
これで手順は完了です。

では、自分の tumblr ブログを見てみましょう。
下記画面のように、Twitter のフォローボタンが表示されています。OK!!!

Twitter フォローボタンのさらなるカスタマイズ

以上ではものたりなくて、Twitter フォローボタンをさらにカスタマイズしたいなら、以降を読んでください。
https://dev.twitter.com/docs/follow-button に色々と掲載されているので、この内容にそって以下に説明します。

https://dev.twitter.com/docs/follow-button によると、Twitter フォローボタンでは以下のカスタマイズが可能です。

• data-show-count : Followers count display
• data-size : Button Size
• data-lang : Language
• data-width : Width
• data-align : Alignment
• data-show-screen-name : Show Screen Name
• data-dnt : Opt-out of tailoring Twitter

data-show-count : Followers count display

原文はココ
By default, the User's followers count is not displayed with the Follow Button. You can enable the display of this number using the data-show-count attribute:

data-show-count = "false" (default)
data-show-count = "true"

ボタンにフォロワー数を表示するかどうかです。
フォロワー数を表示しないのであれば "false" とし、表示するのであれば "true" とします。
見比べてみましょう。左が "false" で、右が "true" です。

data-size : Button Size

原文はココ
The size of the button can render in either "medium", which is the default size, or in "large" - which is the larger button.

data-size = "medium" (default)
data-size = "large"

ボタンのサイズです。デフォルトだと "medium" で、サイズを大きくするなら "large" とします。
見比べてみましょう。左が "medium" で、右が "large" です。

data-lang : Language

原文はココ
The Follow Button is available in English (en), French (fr), German (de), Italian (it), Spanish (es), Korean (ko) and Japanese (ja). To specify the language for the Follow Button, use the lang property and set it to the two letter ISO-639-1 language code.

data-lang = "xx"

ボタンの表示言語です。日本語ならば "ja" とします。英語ならば "en" とします。
見比べてみましょう。左が "ja" で、右が "en" です。

data-width と data-align : Width and alignment

原文はココ
You can specify the width and the alignment of the Follow Button using the data-width (in pixels or percentage) and data-align (left or right) parameters. Note this is only supported on the Javascript version.

data-width = "NNNpx"

ちょっと説明が難しいのですが、ボタンエリアの横幅を指定します。NNN の部分には数字を入れます。

data-align = "left" (default)
data-align = "right"

ボタンの位置を、ボタンエリア内の左によせるか、右によせるか。
見比べてみましょう。左は指定なしで、右が data-width="200px" data-align="right" です。

data-show-screen-name : Show Screen Name

原文はココ
The user's screen name shows up by default, but you can opt not to show the screen name in the button. You can do this by using the "data-show-screen-name" attribute.

data-show-screen-name = "true" (default)
data-show-screen-name = "false"

ボタン内に Twitter アカウント名を入れるには "true" とします。いれないなら "false" とします。
見比べてみましょう。左が "true" で、右が "false" です。

data-dnt : Opt-out of tailoring Twitter

原文はココ
Twitter buttons on your site can help us tailor content and suggestions for Twitter users. If you want to opt-out of this feature, set the optional data-dnt parameter to be true. Learn more about tailoring Twitter.

data-dnt="true" (default)
data-dnt="false"

Twitter フォローボタンの概観は変わりません。

Twitter, Buffer まとめはこちら

Tumblr まとめはこちら