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

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

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

SNSSocial 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=・・・

WordPressに表示させる場合

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

light 表示 colorscheme=lightに設定 (幅は、580px)


dark 表示 colorscheme=darkに設定 (幅は、580px)


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


HTML5 Shareボタン付


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

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

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


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

WordPressに表示させる場合

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

HTML5 Shareボタン付


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

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

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&amp;width=・・・

IFRAME



WordPressに表示させる場合

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

HTML5 Shareボタン付

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

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

WordPressに表示させる場合

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

1-4 設定のポイント

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

IFRAME

の部分が設定部分です。

  ・URLの指定 ⇒ href=http%3A%2F%2F…URL…&amp; ※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

の部分が設定部分です。

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

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

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

WordPressに表示させる場合

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

2 twitter

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



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


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チェック

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にしてください。


WordPressに表示させる場合

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

5 Myspace

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



─