ウェブサイトやブログにTwitterやFacebookの「いいね！」ボタンなどのソーシャルボタンを設置するのは当たり前になるつつある昨今。仕様をいつも忘れてしまって、毎回検索しているので覚え書き。とりあえず、Twitter、はてなブックマーク、Google+ボタンの仕様をまとめてみました。
※2011年7月16日時点での仕様です。
では、まずは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>2011年7月16日に公開され、2017年11月23日に更新された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。