ソーシャル・プラグイン　SNSのボタン　設置方法

ボタンを設置するには、コード(スクリプト・ソース)が必要になります。
SNS(social networking service)サイトでコードを生成されるので簡単に取得することができます。
URLを入力がある場合は、入力したURLが指定されます。未入力の場合は、ボタンを設置したURLです。
取得したコード(スクリプト・ソース)を貼り付けるだけで簡単に設置できます。
また、取得したコード(スクリプト・ソース)は、一部を変更するだけで表示を変えることができます。
変更部分の設定についての詳細は、各SNSサイトを参照してください。
※インターネットでネットワークを構築するサービスをSNSと言います。

エスエヌエス　：　ソーシャル　ネットワーキング　サービス

SNS ： Social　Networking　Service

コード(スクリプト・ソース)の取得、変更箇所及び、登録リンク先

※ボタンは、一部のSNS SITEを除き会員登録不要で利用できます。

No.	コードの変更箇所	コードの取得	会員登録要否
1	facebook	Get Code	登録否
2	twitter	Get Code	登録否
3	mixi	Get Code	登録要
4	LinkedIn	Get Code	登録否
5	Myspace	~~Get Code~~※	登録否

※Myspaceは、2013年6月に3度目のリニューアルで突然コードの取得サイトが表示されなくなりました。

1 facebook Like Button / 「いいね！」ボタン表示サンプル / View Sample

Styleは、standard、button_count、box_count の3種類あります。各サンプルコードの変更箇所の解説をしています。

符号	Style	Script type	備　考
1-1	standard	IFRAME HTML5　Shareボタン付	Send Button (送る・送付ボタン)は、2013年11月に Share Button（シェアボタン）と統合されました。
1-2	button_count	IFRAME HTML5　Shareボタン付	〃
1-3	box_count	IFRAME HTML5　Shareボタン付	〃
1-4	設定のポイント	IFRAME HTML5	表示オプション変更箇所のまとめ
1-5	Comments	HTML5	IFRAMEのサポートはありません。
コードの取得		Like Buttonのプラグインコードの取得は、こちらです。
マニュアル		マニュアル/manua(日本語版)のダウンロード先は、こちらです。 ※サイトが文字化けする場合は、更新してみてください。

1-1 facebook　standard

IFRAME

　次のコードを編集してサイトに貼り付けてご利用ください。
　このソースはURL指定がkijie.comになっておりますので　　の部分を変更してください。
　　・・・like.php?href=http%3A%2F%2kijie.com%2F&width=・・・

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fkijie.com%2F&width=450&height=26&colorscheme=light&layout=standard&action=like&show_faces=false&share=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:26px;" allowTransparency="true"></iframe>

WordPressに表示させる場合

　<iframe>タグのsrc属性内のhrefパラメータの値を<?php the_permalink(); ?>にします。

light 表示　colorscheme=lightに設定　（幅は、580px）

dark 表示　colorscheme=darkに設定　（幅は、580px）

「おすすめ」ボタン表示　action=recommendに設定　（幅は、450px）

HTML5　Shareボタン付

　次のコードをコピーしてサイトに貼り付けてご利用ください。

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

　次のコードを編集して表示したい場所に配置します。
　<div>タグのhref属性の値data-href="http://kijie.com/"のkijie.com/部分を書き換えてください。

<div class="fb-like" data-href="http://kijie.com/" data-width="450" data-show-faces="true" data-share="true"></div>

WordPressに表示させる場合

　<div>タグのhref属性の値data-href="http://kijie.com/"となっている部分を
　data-href="<?php the_permalink(); ?>"にします。

face設定　data-show-faces="true"に設定します。

　trueに設定すると幅450×高さ150のface用スペースが作られます。

1-2 facebook　button_count

IFRAME

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fkijie.com%2F&width=120&height=21&colorscheme=light&layout=button_count&action=like&show_faces=false&share=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:21px;" allowTransparency="true"></iframe>

WordPressに表示させる場合

　<iframe>タグのsrc属性内のhrefパラメータの値を<?php the_permalink(); ?>にします。

HTML5　Shareボタン付

　次のコードをコピーしてサイトに貼り付けてご利用ください。

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

　次のコードを編集して表示したい場所に配置します。
　<div>タグのhref属性の値data-href="http://kijie.com/"のkijie.com/部分を書き換えてください。

<div class="fb-like" data-href="http://kijie.com/" data-width="450" data-layout="button_count" data-show-faces="=false" data-share="true"></div>

WordPressに表示させる場合

　<div>タグのhref属性の値data-href="http://kijie.com/"となっている部分を
　data-href="<?php the_permalink(); ?>"にします。

1-3 facebook　box_count

　次のコードをコピーし編集してサイトに貼り付けてご利用ください。
　このソースはURL指定がkijie.comになっておりますので　　の部分を変更してください。
　　・・・like.php?href=http%3A%2F%2kijie.com%2F&width=・・・

IFRAME

<IFRAME src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fkijie.com&share=false&layout=box_count&width=75&show_faces=true&action=like&colorscheme=light&font&height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:75px; height:65px;" allowTransparency="true"></IFRAME>

WordPressに表示させる場合

　<iframe>タグのsrc属性内のhrefパラメータの値を<?php the_permalink(); ?>にします。

HTML5　Shareボタン付

　次のコードをコピーしてサイトに貼り付けてご利用ください。

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

　次のコードを編集して表示したい場所に配置します。
　<div>タグのhref属性の値data-href="http://kijie.com/"のkijie.com/部分を書き換えてください。

<div class="fb-like" data-href="http://kijie.com/" data-width="75" data-layout="box_count" data-show-faces="false" data-share="true"></div>

WordPressに表示させる場合

　<div>タグのhref属性の値data-href="http://kijie.com/"となっている部分を
　data-href="<?php the_permalink(); ?>"にします。

1-4 設定のポイント

　プラグインコードを変更することで表示を変化させることができます。

IFRAME

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fkijie.com%2F&width=120&height=23&colorscheme=light&layout=button_count&action=like&show_faces=false&share=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:23px;" allowTransparency="true"></iframe>

の部分が設定部分です。

　　・URLの指定　⇒　href=http%3A%2F%2F…URL…&　※URLを記述します。
　　・standardボタン　⇒　layout=standard
　　・button_countボタン　⇒　layout=button_count
　　・box_countボタン　⇒　layout=box_count
　　・「いいね！」ボタン表示　⇒　action=like
　　・「おすすめ」ボタン表示　⇒　action=recommend
　　・ligh表示　⇒　colorscheme=light
　　・dark表示　⇒　colorscheme=dark
　　・Show faces表示ありとなしの設定　⇒　show_faces=true　show_faces=false
　　・送るボタンありとなしの設定　⇒　send=true　send=false　（2013年11月以前の設定）
　　・シェアボタンありとなしの設定　⇒　share=true　share=false　（2013年11月以降の設定）
　　※Send Button (送る・送付ボタン)は、2013年11月に、Share Button（シェアボタン）と統合されました。
　　　設定は、2013年11月時点で、send または、share どちらも可能です。

WordPressに表示させる場合

　<iframe>タグのsrc属性内のhrefパラメータの値を<?php the_permalink(); ?>にします。

HTML5

<div class="fb-like" data-href="http://…URL…" data-width="450" data-show-faces="true" data-share="true"></div>

の部分が設定部分です。

　　・URLの指定　⇒　data-href="http://…URL…"　※URLを記述します。
　　・standardボタン　⇒　デフォルトです。data-layout="***"は記述しません。
　　・button_countボタン　⇒　data-layout="button_count"
　　・box_countボタン　⇒　data-layout="box_count"
　　・「いいね！」ボタン表示　⇒　デフォルトです。
　　・「おすすめ」ボタン表示　⇒　data-action="recommend"を追加します。
　　・ligh表示　⇒　デフォルトです。
　　・dark表示　⇒　data-colorscheme="dark"を追加します。
　　・Show faces表示ありとなしの設定　⇒　data-show-faces="true"　data-show-faces="false"
　　・送るありとなしの設定　⇒　data-share="true"or data-share="false"で設定・・・
　　・送るボタンありとなしの設定　⇒　data-share="true"or data-share="false"（2013年11月以前）
　　・シェアボタンありとなしの設定　⇒　data-share="true"or data-share="false"（2013年11月以降）
　　※Send Button (送る・送付ボタン)は、2013年11月に、Share Button（シェアボタン）と統合されました。
　　　設定は、2013年11月時点で、send または、share どちらも可能です。

WordPressに表示させる場合

　<div>タグのhref属性の値data-href="http://…URL…"となっている部分を
　data-href="<?php the_permalink(); ?>"にします。

1-5 Comments

light 表示（data-colorscheme="light"）

dark 表示（data-colorscheme="dark"）

HTML5

次のコードをコピーし編集してサイトに貼り付けてご利用ください。

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

次のコードを編集して表示したい場所に配置します。

<div>タグのhref属性の値data-href="http://kijie.com/"のkijie.com/部分を書き換えてください。

表示するコメント数の設定は、data-numposts="*"の"*"部分に数を指定します。

表示色の設定は、data-colorscheme="***"の"***"部分に「light」または、「dark」を指定します。

<div class="fb-comments" data-href="http://kijie.com/" data-numposts="5" data-colorscheme="light"></div>

WordPressに表示させる場合

　<div>タグのhref属性の値data-href="http://kijie.com/"となっている部分を
　data-href="<?php the_permalink(); ?>"にします。

2 twitter

次のコードをコピーして、サイトに貼り付けてご利用ください。
このプラグインコードの変更箇所はありません。

<A class="twitter-share-button" data-lang="ja" href="https://twitter.com/share">ツイート</A>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

カウントの非表示はコードに、data-count="none"を追加するとカウントは表示されません。

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-url="http://…URL…" data-count="none">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

WordPressに表示させる場合

　<a>タグのdata-url属性の値data-url="http://…URL…"となっている部分を
　data-url="<?php the_permalink(); ?>"にします。

3 mixi

次のコード(ソース)をコピーし編集してサイトに貼り付けてご利用ください。
このプラグインコードの変更箇所は　　の部分です。
　・チェックキーの設定・・・data-key="チェックキー"
　　※mixiチェックキーはDeveloperに登録すると取得できます。チェックキー/check key の取得先
　・URLの設定・・・ data-url="URL"
　・ボタンの種類の設定・・・ data-button="ボタンの種類" ("button-1"～"button-6")
　　※data-url と data-button は省略可能です。

button-1	button-2	button-3	button-4	button-5	button-6
mixiチェック	mixiチェック	mixiチェック	mixiチェック	mixiチェック	mixiチェック

<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="チェックキー" data-url="URL" data-button="ボタンの種類">mixiチェック</a> <script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>

WordPressに表示させる場合

　<a>タグのdata-url属性の値data-url="URL"となっている部分を
　data-url="<?php the_permalink(); ?>"にします。

4 LinkedIn（リンクトイン）

次のコードをコピーして、サイトに貼り付けてご利用ください。
カウントの表示は、<script>タグのdata-counter属性の値 data-counter="right"となっている部分を
data-counter="top"などお好みで変更します。言語は、日本語設定は、lang: ja_JPにしてください。

<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
<script type="IN/Share" data-url="http://…URL…" data-counter="right"></script>

WordPressに表示させる場合

　<script>タグのdata-url属性の値data-url="http://…URL…"となっている部分を
　data-url="<?php the_permalink() ?>"にします。

5 Myspace

2013年6月に3度目のリニューアルでコードの取得サイトが表示されなくなりました。
リニューアルされたサイトは閲覧だけでCPUを80% メモリー1Gほど使われてしまい重いです。
~~次のコードをコピーして、サイトに貼り付けてご利用ください。~~

<A href="javascript:void(window.open('http://www.myspace.com/Modules/PostTo/Pages/?u='+encodeURIComponent(document.location.toString()),'ptm','height=450,width=550').focus())"><img src="http://cms.myspacecdn.com/cms/ShareOnMySpace/Myspace_btn_Share.png" border="0" title="Share on Myspace" /></A>

─　