こんにちは！ Hike×Hackのかけすけ( @kakesuke02 )です！
今日も、現在連載中の「ソーシャルボタンの設置手順」についての記事です。
昨日は「はてなブックマーク」のボタンについて説明しましたが、本日は「Twitter」のソーシャルボタンを設置する手順をお伝えしましょう。
Twitterのボタンは、「設定」「コピー＆ペースト」以外にもしなくてはならないことがあります。そのため、「取得ページに飛べば、後は自分でどうにかするぜ！」と思わずに、ぜひとも最後まで読み進めていただけたら嬉しいです。
では早速、みていきましょう。ソーシャルボタンの設置手順第２弾、「Twitterボタン」の設置手順です。
≪１．取得ページに飛ぶ≫
例によって、まずはHTMLコードを取得するページに飛びましょう。
≪２．HTMLコードを取得する≫
リンク先に飛ぶと、以下の様なページが表示されます。
ここでやることは３つ。
１．ボタンは「Share a link」を選択。
２．設定では「日本語」を選択するだけ。
３．プレビューは気にせず、ひとまずHTMLコードをコピーする。
これらのことだけです。ちなみに、画像だと「Via」には私のTwitterIDが入っていますね。
これを入れると、このボタンを使って誰かがツイートをした時に、そのツイートの末尾に「@kakesuke02さんから」というのが追加されるのです。(もちろん、あなたのTwitterIDを入れれば、あなたのIDで追加されます。)
これは、はてなのデフォルトのボタンにはついていない機能で、人によっては重宝するかと思います。また、記入しなくてもボタンは作れるので、Twitterアカウントを持っていなくともボタンを作成することはできます。
さて。プレビューを見ると、まだ望んでいる形式ではないと思います。ですが。とりあえず、生成されたHTMLコードをコピーしてください。形式を変える方法もしっかりお伝えするのでご安心を。まずは、コードを貼り付けにいきましょう。
≪３．HTMLコードの貼り付け≫
「記事下」に表示させるために、コードを貼り付けましょう。貼り付けの手順については、以下の記事に書いてあります。
さあ、これで作業は完了……と、言いたいところですが。
Twitterのソーシャルボタンを大きなバルーン型にするためには、あと１つある作業をしなくてはなりません。知識の必要ない簡単なことではありますが、その手順についても説明させていただきます。
≪４．コードに文字列をつけたす≫
生成されたコードをそのまま貼り付ても、おそらく「え、ちがうちがう、この形式じゃない」となるでしょう。
ボタンの上にバルーンがあって、そこに数字が表示される。
その形式を実現させるために、やることが１つだけあります。それは、あなたが貼り付けた、ボタンのHTMLコード。
その中に「~~ data-lang=”ja”」という記述があると思います。そのすぐ後ろに、「_data-count=”vertical”」と入力してください。(「_」は半角スペース)
以上です。
この作業をしても反映されないという方は、使っている文字が「全角」になっていないか、いま一度ご確認ください。
どうでしょうか。これでTwitterのソーシャルボタンもお望みの形になりましたでしょうか。 また、「ボタンを横一列に並べる方法」については、連載の終盤で書く予定です。
次回は「Google+」のソーシャルボタンの設定手順となります。また明日、お会いしましょう。
≪まとめ≫
■ Twitterの、バルーン付きシェアボタンの設置方法。
■ 生成されたコードをそのまま貼り付けるのは不十分。
■ 「data-count="vertical"」という文字列を、必要箇所につけたす。
――あなたの旅先案内人 かけすけ( @kakesuke02 )より
連載記事一覧
■※(5)facebook編はなし。