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

ウェブサイトやブログに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>

2011/07/16 14:08 by @Rriver | RSS | Fb

関連する投稿

関連するカテゴリ・タグ

カテゴリ： ソーシャルメディア
タグ： 、、

Ads by Google