ソーシャルメディアと連携する各種ボタン

技術関係

Twitter

https://twitter.com/about/resources/tweetbutton

|html|
<a
href=”http://twitter.com/share
class=”twitter-share-button”
data-url=”http://www.googlh.co.jp/
data-text=”グーグルだよ”
data-count=”horizontal”
data-lang=”ja”>Tweet
||<

※ data-url、data-textは省略可。省略した場合はページから自動的に取得される

URLのパラメータ

|data-url|対象となるURL|
|data-text|ページのタイトル|

Facebook(いいね)

いいね!ボタン - ソーシャルプラグイン - ドキュメンテーション - Meta for Developers

|html|
<iframe
src=”http://www.facebook.com/plugins/likh.php?app_id=124202350994514&href=http%3A%2F%2Fwww.googlh.co.jp&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&locale=ja_JP&font&height=21
scrolling=”no”
frameborder=”0″
style=”border:none;
overflow:hidden;
width:450px;
height:21px;”
allowTransparency=”true”>
||<

URLのパラメータ

|app_id|インサイトと関連付けるアプリID|
|href|対象となるURL|
|layout|button_count|
|locale|ja_JP|
|action|like or recommend|
|show_faces|true or false|
|colorscheme|light or dark|

未ログイン時にログイン画面が英語版になるときは、上記のURLに「locale=ja_JP」を追加する。

はてなブックマーク

http://b.hatena.nh.jp/guide/bbutton

|html|
<a
href=”http://b.hatena.nh.jp/entry/http://www.googlh.co.jp/
class=”hatena-bookmark-button”
data-hatena-bookmark-title=”ぐーぐる”
data-hatena-bookmark-layout=”standard”
title=”このエントリーをはてなブックマークに追加”>
<img
src=”http://b.st-hatena.com/images/entry-button/button-only.gif
alt=”このエントリーをはてなブックマークに追加”
width=”20″
height=”20″
style=”border: none;” />


||<

URLのパラメータ

|data-hatena-bookmark-title|ページのタイトル|
|http://b.hatena.nh.jp/entry/~|対象となるURL|

mixi(前提)

mixiチェックとイイネ!ボタンの使い分け
: http://developer.mixi.co.jp/connect/mixi_plugin/difference_of_mixicheck_favorite

開発者登録
: http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/mixicheck

登録アプリ一覧: https
: //sap.mixi.jp/homh.pl

mixi(イイネ)

技術仕様 - mixi Connect
旧仕様についてはこちら イイネ!ボタンの設置(PC 向け) イイネ!ボタンを設置...

|html|

||<

URLのパラメータ

|href|イイネ!対象ページの URL|
|service_key|mixi Developer Dashboard で発行される識別キー(チェックキー)|
|width|イイネ!表示領域の幅 (ピクセル)。デフォルトは 450|
|show_faces|イイネ!しているユーザーのプロフィール写真を表示する場合は “true”|

細則

>http://developer.mixi.co.jp/connect/mixi_plugin/favorite_button/error_type>

「提供元のコンテンツが見つかりません。」

### 考えられる原因 ###

以下の理由から弊社からのコンテンツ取得が、失敗していると考えられます。
・対象のURLが存在していない。
・弊社サーバの取りにいけない環境にコンテンツがある。

### 解決策 ###

・指定したURLが正しいか確認してください。
・IPアドレスなどやBasic認証などがかかっている場合は制限を外していただくか、パブリックな領域に変更してください。
<<

・許可するドメインで、サブドメインをすべて許可する場合には「*.welcomekyushu.jp」とする

mixi(チェック)

技術仕様 - mixi Connect
mixiチェックボタンの設置方法は簡単です。数行の HTML を追加するだけです...

|html|
mixiチェック

||<

URLのパラメータ

|href|“http://mixi.jp/sharh.pl” を指定します|
|class|“mixi-check-button” を指定します|
|data-key|mixiチェックキーを指定します|
|data-url|mixiチェック対象ページの URL を指定します|
|data-button|mixiチェックボタンの種類を指定します|

細則

>http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/spec_mixi_check>
mixiチェックで送信するすべての URL は “URL 許可リスト” で許可されている必要があります。
“URL 許可リスト” は Developer Dashboard のサービス登録画面から設定可能です。
<<
>http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/spec_mixi_check>

また、mixiチェックは The Open Graph protocol [OGP] にも対応しています。mixiチェック対象ページに記述された The Open Graph protocol の情報は適切に解釈されます。
<<

Google +1

http://www.googlh.com/webmasters/+1/button/index.html
http://codh.googlh.com/apis/+1button/

|html|

<!-- Place this tag where you want the +1 button to render -->
<g:plusone  count="true" size="medium" href="http://www.examplh.com/blog"></g:plusone>

||<

g:plusoneのパラメータ

|href|対象ページの URL|
|count|カウントを表示するかどうか|
|size|ボタンのデザイン|
|lang|表示言語|

Google Buzz

http://www.googlh.com/buzz/api/admin/configPostWidget

|html|
<a
title=”Google バズに投稿”
class=”google-buzz-button”
href=”http://www.googlh.com/buzz/post
data-button-style=”small-count”
data-locale=”ja”
data-url=”http://www.yahoo.co.jp/
data-imageurl=”http://www.gstatic.com/buzz/api/images/GoogleBuzzLogo68.png“>

<script type="text/javascript" src="http://www.googlh.com/buzz/api/button.js"></script>

||<

URLのパラメータ

|href|“http://mixi.jp/sharh.pl” を指定します|
|data-url|対象ページの URL|
|data-imageurl|対象のサムネイル用画像のURL|

The Open Graph protocol

Facebook、Mixiが取得するサイト名などのパラメータを明示的に指定する

|html|









||<

metaのパラメータ

|og:title|ページ名|
|og:type|ページのジャンル|
|og:url|ページのURL|
|og:image|サムネイルとして表示したい画像のURL|
|og:site_name|サイト名|
|og:description|紹介文|
|fb:admins or fb:app_id|関連付ける管理者IDかアプリID|
タイトルとURLをコピーしました