自分のサイトにほしい!ボタンを貼りたい (ほしいボタン仕様)
ほしい!ボタンは簡単に貼ることができます。
ほしい!ボタンを貼りつけたい場所に、数行のHTMLを追加するだけです。
ほしい!ボタンはOpen Graph Protocolに対応しています。
Open Graph Protocolは、Facebookやmixi、GREEなどの大手SNSで使われていて、それ以外のウェブサイトの情報をあたかもそのサイトのサービスの一部であるかのように扱えるため、簡単に情報を取り込むのに適したフォーマットです。
これを設定しておけば、他のOpenGraphProtocol採用のサイトでも同じものを基本的に使用できます。
どちらも見つからなかった場合、エラーメッセージを出力します。
PHPなどのスクリプト言語などによって、動的に要素を追加すれば、手動でデータを入力する手間を省け、一度に多数のページに対応することができます。
また、Movable TypeやWordPressなどのCMSシステムにも簡単に採用することが可能です。
ほしい!ボタンを貼りつけたい場所に、数行のHTMLを追加するだけです。
<script type="text/javascript" src="http://giftnow.jp/want?c=button,count"></script>
ほしい!ボタンはOpen Graph Protocolに対応しています。
Open Graph Protocolは、Facebookやmixi、GREEなどの大手SNSで使われていて、それ以外のウェブサイトの情報をあたかもそのサイトのサービスの一部であるかのように扱えるため、簡単に情報を取り込むのに適したフォーマットです。
scriptタグには、以下のオプションがご利用頂けます。
・「c」オプション 各オプションは「,」(半角カンマ)で区切ります。- button
- ほしい!ボタン本体(必須)
- count
- ほしい!ボタンを押した人数
- review
- 商品のレビュー
- detail
- 商品名と画像
ギフトナウに掲載される内容は、下記のオプションで設定できます。
・まず、下記の記述でhtmlのOpenGraph名前空間を設定します。(必須)
<html xmlns:og="http://ogp.me/ns#">
・下記metaタグにて、ほしい!ボタンに表示したい要素を設定します。これを設定しておけば、他のOpenGraphProtocol採用のサイトでも同じものを基本的に使用できます。
<html xmlns:og="http://ogp.me/ns#">
<head>
<meta property="og:title" content="設定したい簡潔な商品名(サイト名なども付加できます)" />
<meta property="og:description" content="設定したい商品詳細(商品名より詳細な内容を設定できます)" />
<meta property="og:image" content="サムネイルに設定したい商品画像(できるだけ正方形に近い画像を推奨します。サイズが大きすぎる場合表示できない場合があります)" />
<meta property="og:url" content="設定したいURL(複数のURLが設定される場合などに、アクセスされるURLを設定します。省略された場合、表示ページから自動的に取得します。)" />
</head>
※各OpenGraphのタグが見つからなかった場合、ページのタイトルタグとmeta descriptionタグを、それぞれ商品名と商品詳細に採用します。<head>
<meta property="og:title" content="設定したい簡潔な商品名(サイト名なども付加できます)" />
<meta property="og:description" content="設定したい商品詳細(商品名より詳細な内容を設定できます)" />
<meta property="og:image" content="サムネイルに設定したい商品画像(できるだけ正方形に近い画像を推奨します。サイズが大きすぎる場合表示できない場合があります)" />
<meta property="og:url" content="設定したいURL(複数のURLが設定される場合などに、アクセスされるURLを設定します。省略された場合、表示ページから自動的に取得します。)" />
</head>
どちらも見つからなかった場合、エラーメッセージを出力します。
PHPなどのスクリプト言語などによって、動的に要素を追加すれば、手動でデータを入力する手間を省け、一度に多数のページに対応することができます。
また、Movable TypeやWordPressなどのCMSシステムにも簡単に採用することが可能です。
ほしい!ボタン作成ツール
1.ほしい!ボタンの種類を選択
表示したい項目を選択してください。
右側にプレビューイメージが表示されます。
選択して作成ボタンを押すと右にタグが表示されます。
2.ほしい!ボタンタグ
下記のほしい!ボタンタグをコピーし、ご利用のサイトの管理画面にて表示させたい部分に貼付けてください。
作成ボタンを押すとここにコードが表示されます