各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」

All About ホームページ作成ガイド 西村 文宏
All About ホームページ作成ガイド
西村 文宏 (ニシムラ フミヒロ)
2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。著書として、「プロ顔負けのホームページ作成術」・「SEO・SEM使いこなしテクニック」などがあり、最近は作家デビューも果たしている。
コーポレートサイトhttp://allabout.co.jp/gm/gt/1053/
講師PR
RSSフィードを自動生成するフリーソフト「Fumy RSS & Atom Maker」が人気です!『にししふぁくとりー』
http://www.nishishi.com/

SNSボタンを一括して掲載するスクリプトの使い方(第2回)

  • publish_advertise
2013/10/16

こんにちは。All About ホームページ作成ガイドの西村文宏です。

 

前回は、短いソースをHTMLに記述するだけで、簡単に各種SNSボタンを掲載できるスクリプト「jQuery.socialbutton」の設置方法を簡単にご紹介いたしました。

 

今回は、望みのSNSボタン全部を一括掲載する方法をご紹介いたします。

 

●対応しているすべてのSNSボタンを一括掲載する

 

以下のソースは、このスクリプトで表示できるすべてのSNSボタンを、特に何のオプションも指定せずに、一括掲載するソースです。

 


<script type=”text/javascript”>

$(function() {

   $(‘#facebook_like’).socialbutton(‘facebook_like’);

   $(‘#facebook_share’).socialbutton(‘facebook_share’);

   $(‘#twitter’).socialbutton(‘twitter’);

   $(‘#google_plusone’).socialbutton(‘google_plusone’);

   $(‘#mixi_like’).socialbutton(‘mixi_like’, { key: ‘★識別キー★’ });

   $(‘#mixi_check’).socialbutton(‘mixi_check’, { key: ‘★識別キー★’ });

   $(‘#hatena’).socialbutton(‘hatena’);

   $(‘#gree’).socialbutton(‘gree_sf’);

   $(‘#evernote’).socialbutton(‘evernote’);

   $(‘#pinterest’).socialbutton(‘pinterest’);

});

</script>

<div>

   <p>Facebook(いいね)ボタン:  </p> <div id=”facebook_like”></div>

   <p>Facebook(シェア)ボタン:  </p> <div id=”facebook_share”></div>

   <p>Twitter(ツイート)ボタン: </p> <div id=”twitter”></div>

   <p>Google Plus(+1)ボタン:  </p> <div id=”google_plusone”></div>

   <p>mixi(いいね)ボタン:      </p> <div id=”mixi_like”></div>

   <p>mixi(チェック)ボタン:    </p> <div id=”mixi_check”></div>

   <p>はてなブックマークボタン:</p> <div id=”hatena”></div>

   <p>GREE(いいね)ボタン:      </p> <div id=”gree”></div>

   <p>Evernote(クリップ)ボタン:</p> <div id=”evernote”></div>

   <p>Pinterestボタン:         </p> <div id=”pinterest”></div>

</div>


 

上記の合計26行のソースを掲載したHTMLを、ウェブ上にアップロードしてからブラウザで閲覧すると、各種SNSボタンが並んで表示されます。

 

※前回ご紹介した、HTMLのhead要素内に記述する2行も必須です。

※ウェブサーバ上にアップロードしてから表示確認する必要があるので注意してください。

ローカルに置いたままでは、多くのボタンが表示されません。

 

これらのボタンの中には、特に掲載したくない不要なボタンもあるでしょう。

 

その場合は、JavaScript側とHTML側とで、該当する行を丸ごと削除してください。

 

なお、mixiに関しては、上記のソースのままではボタンは表示されません。

以下でご紹介する「識別キー」の取得と、その記載が必要です。

 

●mixiの識別キーを得る方法

 

「mixi(いいね)」や「mixi(チェック)」のボタンを表示するには、mixiサイトでアプリ開発のための「個人パートナー登録」(無料)をした後に、「識別キー」を取得し、そのキー(40文字程度の英数字)をスクリプトのソース中に記述しておく必要があります。

 

取得するには、以下の手順で操作してください。

 

まず、mixiにログインしてから、「個人パートナー登録」ページにアクセスします。

 


https://mixi.jp/guide_developer.pl


 

「個人パートナー登録する」ボタンをクリックしてから、住所・電話番号などの個人情報を入力します。

このとき、本人確認のため、携帯端末のメールアドレスの入力が必須です。

 

携帯端末に届いたメール内に書かれたURLにアクセスすることで、「個人パートナー登録」が完了します。

 

※認証キーを得るだけであれば、クレジットカード情報の入力は不要です。

個人パートナー登録が完了したら、「ダッシュボード」ページの中から「mixi Plugin」を選択し、「新規作成」をクリックします。

 

mixiボタンを設置したいサイト名やURLを入力し、もし必要であれば許可ドメインパターンも指定します。

すると、次に「登録サービス詳細」ページが表示されます。ここに、「認証情報」という区画があり、そこの「識別キー」欄に40文字程度の文字列が表示されているはずです。それが「識別キー」です。

 

その識別キーをコピーして、先のソースにペーストしてください。

 

例えば、キーが「1A2B3C4D5E6F7G8H9I0J」であれば、以下のように記述します。

 


$(‘#mixi_like’).socialbutton(‘mixi_like’, { key: ’1A2B3C4D5E6F7G8H9I0J’ });


 

上記は「mixi(いいね)」ボタン用のソースですが、「mixi(チェック)」ボタン用のソースでも、以下のように同じ識別キーが使えます。

 


$(‘#mixi_check’).socialbutton(‘mixi_check’, { key: ’1A2B3C4D5E6F7G8H9I0J’ });


 

さて、これで各SNSのボタンすべてを表示できるようになりました。

各ボタンには、表示形態がいくつか用意されている場合があります。

 

詳しい記述方法は、次回にご紹介いたします。

 

 

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
<<前の記事に戻る  続きを読む>>
続編
2013.10.16
SNSボタンを一括して掲載するスクリプトの使い方(第1回)
2013.10.16
SNSボタンを一括して掲載するスクリプトの使い方(第3回)

▲ページトップへ戻る

1CLICKアンケート!!
Loading...
1CLICKアンケート!!
アフィリエイトで稼ぐための心構え3カ条
1.「稼ぐ気持ち」を出しすぎない
稼ぎたい気持ちが全面に出ていると、ユーザーはサイトに対し良い印象を持ちません。
2.「納得できる方法」で稼ぐ
報酬額ばかりで選ばず、自分自身がお薦めできるプログラムを心が伝わるように紹介しましょう。
3.実績のある方法や考え方などを「学ぶ」
「成功者のノウハウ」、「今盛り上がっている市場は?」など、常に最新情報をキャッチし、実践できているかどうかが、アフィリエイト成功のカギ。アフィ大では、アフィリエイトで稼ぐためのお役立ち情報を数多くの成功者が発信しています。ぜひご活用ください!

▲ページトップへ戻る