ソーシャルボタンの仕様とリンク集

ウェブサイトやブログにTwitterやFacebookの「いいね!」ボタンなどのソーシャルボタンを設置するのは当たり前になるつつある昨今。仕様をいつも忘れてしまって、毎回検索しているので覚え書き。とりあえず、Twitter、はてなブックマーク、Google+ボタンの仕様をまとめてみました。

※2011年7月16日時点での仕様です。

では、まずはTwitterから。

Twitter

JavaScript版のTweetボタンのアンカータグ

<a href >内に記述することで、個別に各要素を指定できます。

アンカータグ 説明
data-url TweetするURL
data-text ページタイトル、記事のタイトルなどのTweetするテキスト
data-count Tweetボタンの種類。none (横・カウント数なし)、horizontal (横・カウント数あり)、vertical (縦・カウント数あり)の3つから選べる
data-via 指定したTwitterユーザが”via @rriver”のようにTweetテキストに追加されます。

仕様詳細ページ

WordPressに設置するときのコードサンプル。

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="rriver" data-url="<?php the_permalink() ?>" data-text="<?php the_title(); ?>">Tweet</a>

はてなブックマーク

タグの種類

Twitterと同様に、<a href >内に記述することで、個別に各要素を指定できます。

アンカータグ 説明
リンクURL はてブの場合、リンクURLはhref=”http://b.hatena.ne.jp/entry/”のスラッシュのあとに入れます。
data-hatena-bookmark-title ページタイトル、記事のタイトルなどのTweetするテキスト
data-hatena-bookmark-layout ボタンの種類。simple (B!アイコンのみ)、standard (横・カウント数あり)、vertical (縦・カウント数あり)の3つから選べる

仕様

WordPressに設置するときのコードサンプル。

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" data-hatena-bookmark-title="<?php the_title(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" /></a>

Google+ボタン

Googleが提供しているコードにhref=””でリンクURLを追加すれば良いようです。

仕様

以下、WordPressに導入する際のコードのサンプルです。

<g:plusone size="medium" href="<?php the_permalink() ?>"></g:plusone>

About the author

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Twitter @rriver またはFacebook まで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です