Hike×Hack

ライフハックや日常に役立つガジェットなどを好物とするかけすけ(@kakesuke02)が書くライフハック系ブログ

【連載】バルーン型のソーシャルボタンをブログに設置する方法。 (2)Twitter編

20140423105509

 

こんにちは! Hike×Hackのかけすけ( @kakesuke02 )です!

 

今日も、現在連載中の「ソーシャルボタンの設置手順」についての記事です。

 

昨日は「はてなブックマーク」のボタンについて説明しましたが、本日は「Twitter」のソーシャルボタンを設置する手順をお伝えしましょう。

 

Twitterのボタンは、「設定」「コピー&ペースト」以外にもしなくてはならないことがあります。そのため、「取得ページに飛べば、後は自分でどうにかするぜ!」と思わずに、ぜひとも最後まで読み進めていただけたら嬉しいです。

 

では早速、みていきましょう。ソーシャルボタンの設置手順第2弾、「Twitterボタン」の設置手順です。

 

 

20140427101216

 

 

≪1.取得ページに飛ぶ≫

 

例によって、まずはHTMLコードを取得するページに飛びましょう。

 

 

Twitter Buttons | AboutTwitter Buttons | About

 

 

≪2.HTMLコードを取得する≫

 

リンク先に飛ぶと、以下の様なページが表示されます。

 

 

20140427101202

 

 

ここでやることは3つ。

 

1.ボタンは「Share a link」を選択。

2.設定では「日本語」を選択するだけ。

3.プレビューは気にせず、ひとまずHTMLコードをコピーする。

 

これらのことだけです。ちなみに、画像だと「Via」には私のTwitterIDが入っていますね。

 

これを入れると、このボタンを使って誰かがツイートをした時に、そのツイートの末尾に「@kakesuke02さんから」というのが追加されるのです。(もちろん、あなたのTwitterIDを入れれば、あなたのIDで追加されます。)

 

これは、はてなのデフォルトのボタンにはついていない機能で、人によっては重宝するかと思います。また、記入しなくてもボタンは作れるので、Twitterアカウントを持っていなくともボタンを作成することはできます。

 

さて。プレビューを見ると、まだ望んでいる形式ではないと思います。ですが。とりあえず、生成されたHTMLコードをコピーしてください。形式を変える方法もしっかりお伝えするのでご安心を。まずは、コードを貼り付けにいきましょう。

 

 

≪3.HTMLコードの貼り付け≫

 

「記事下」に表示させるために、コードを貼り付けましょう。貼り付けの手順については、以下の記事に書いてあります。

 

 

【連載】バルーン型のソーシャルボタンをブログに設置する方法。 (1)はてなブックマーク編 - Hike×Hack【連載】バルーン型のソーシャルボタンをブログに設置する方法。 (1)はてなブックマーク編 - Hike×Hack

 

 

 

さあ、これで作業は完了……と、言いたいところですが。

 

Twitterのソーシャルボタンを大きなバルーン型にするためには、あと1つある作業をしなくてはなりません。知識の必要ない簡単なことではありますが、その手順についても説明させていただきます。

 

 

≪4.コードに文字列をつけたす≫

 

生成されたコードをそのまま貼り付ても、おそらく「え、ちがうちがう、この形式じゃない」となるでしょう。

 

ボタンの上にバルーンがあって、そこに数字が表示される。

 

その形式を実現させるために、やることが1つだけあります。それは、あなたが貼り付けた、ボタンのHTMLコード。

 

 

20140427101203

 

 

その中に「~~ data-lang=”ja”」という記述があると思います。そのすぐ後ろに、「_data-count=”vertical”」と入力してください。(「_」は半角スペース)

 

以上です。

 

この作業をしても反映されないという方は、使っている文字が「全角」になっていないか、いま一度ご確認ください。

 

どうでしょうか。これでTwitterのソーシャルボタンもお望みの形になりましたでしょうか。 また、「ボタンを横一列に並べる方法」については、連載の終盤で書く予定です。

 

次回は「Google+」のソーシャルボタンの設定手順となります。また明日、お会いしましょう。

 

 

――あなたの旅先案内人 かけすけ( @kakesuke02 )より

 

 

≪まとめ≫

 

■ Twitterの、バルーン付きシェアボタンの設置方法。

■ 生成されたコードをそのまま貼り付けるのは不十分。

■ 「data-count="vertical"」という文字列を、必要箇所につけたす。

 

 

連載記事一覧

(1)はてなブックマーク編

(2)Twitter編

(3)Google+編

(4)Pocket編

■※(5)facebook編はなし。

(6)横一列に並べる「テーブルタグ」編

(7)まとめ編