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

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ボタンを一括して掲載するスクリプトの使い方(第3回)

  • publish_advertise
2013/10/16

 

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

 

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

 

今回は、もう少し詳しいカスタマイズ方法などをご紹介いたします。

 

●Facebook用のボタンをカスタマイズする

 

Facebookの「いいね!」ボタンを掲載する場合、前回までは以下のようなソースをご紹介していました。

 


<script type=”text/javascript”>

$(function() {

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

});

</script>

<div id=”facebook_like”></div>


 

この3行目の部分にオプションを加えることで、表示形態をカスタマイズできます。

例えば、以下のように記述すると、「いいね!」ボタンだけでなく、「いいね!」された数も同時に表示されるようになります。

 


<script type=”text/javascript”>

$(function() {

   $(‘#facebook_like’).socialbutton(‘facebook_like’, {

      button: ‘button_count’

   });

});

</script>

<div id=”facebook_like”></div>


 

4行目の「button:」の後に、ボタンの形態を記述します。上記のように「button_count」と記述すると、横方向に「いいね!」数が表示されます。

「box_count」と記述すれば、縦方向に「いいね!」数が表示されます。

 

●Twitter用のボタンをカスタマイズする

 

例えば、Twitterの「ツイート」ボタンを掲載する場合、前回までは以下のようなソースをご紹介していました。

 


<script type=”text/javascript”>

$(function() {

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

});

</script>

<div id=”twitter”></div>


 

こちらも先ほどと同様に、3行目の部分にオプションを加えることで、

表示形態をカスタマイズできます。

 

例えば、以下のように記述すると、ツイートされた数が横方向に表示されるようになります。

 


<script type=”text/javascript”>

$(function() {

   $(‘#twitter’).socialbutton(‘twitter’, {

      button: ‘horizontal’

   });

});

</script>

<div id=”twitter”></div>


 

4行目の「button:」の後に、ボタンの形態を記述します。

上記のように「horizontal」と記述すると横方向にツイート数が表示され、「vertical」だと縦方向に表示されます。

 

「none」だとツイート数は表示されずに、ボタンだけが表示されます。指定できるオプションは、SNSボタンによって異なります。詳しくは、以下の配布サイト内で説明されていますので、デフォルトの表示が気に入らない場合には、いろいろ試してみてください。

 


http://itra.jp/jquery_socialbutton_plugin/


 

さて、前々回から今回にかけて、各種SNSのボタンを一括掲載できる便利なスクリプト「jQuery.socialbutton」の設置方法をご紹介してきました。

 

SNSごとに1つ1つボタンの設置方法を調べるのは面倒ですが、このスクリプトなら簡単に一括掲載できます。

 

ぜひ、ご活用ください。

 

 

 

 

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

▲ページトップへ戻る

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

▲ページトップへ戻る