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

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

  • publish_advertise
2013/10/16

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

 

 最近では、FacebookやTwitterなどのSNSと連携できるボタンをウェブページ上に設置しているサイトをよく見かけます。

 

例えば、クリックするとFacebookのタイムラインなどに掲載できる「いいね!」ボタンや、Twitterに投稿できる「ツイート」ボタンなどです。

 

それらのボタンを掲載しておけば、SNSで話題にしてもらえる可能性が高まるため、アクセス数の向上が望めます。

 

また、「今どれくらい『いいね!』されているか」といった数を表示することもできるため、そのページの人気度を把握する参考にもなります。

 

これらのボタンは、各SNSサイト上で公開されている指定のソースを、HTMLに記述することで掲載できます。

 

しかし、個々のソースを1つ1つ調べるのは面倒ですね。

 

そんなときには、これらのSNSボタンを一括して掲載できるスクリプトを利用するのがお勧めです。

 

今回は、「jQuery.socialbutton」というjQueryプラグインを使う方法をご紹介いたします。

短いソースをHTMLに記述するだけで、簡単に各種SNSボタンを一括掲載できて便利です。

 

本稿執筆時点では、Facebook、Twitter、mixi、Google+、GREE、はてな、Evernote、Pinterest の各ボタンの掲載に対応していました。

 

これらの中から必要なものだけを選んで、一括掲載できます。このスクリプトを使ってみるには、以下の手順で操作してください。

 

●1.配布サイトからJavaScriptファイルをダウンロード

 

コチラの配布サイトからスクリプト本体をダウンロードします。

 

上記のページを下方向へスクロールしていくと、『その1:jQueryとプラグインをダウンロード』という大きな見出しが見えます。

 

そのすぐ下に、『jquery.socialbuttonプラグインはこちらからダウンロードしてご利用ください。min版はこちらにあります。』

 

という本文が書かれています。

 

この『min版はこちら』の部分のリンクを右クリックして、「名前を付けてリンク先を保存」などの機能を使って保存してください。

 

本稿執筆時点では、「jquery.socialbutton-1.9.0.min.js」という名称のファイルがダウンロードできました。

(名称の細部はバージョンによって異なる可能性があります。)

 

●2.自サイトにアップロード

 

ダウンロードした「jquery.socialbutton-1.9.0.min.js」ファイルを、自サイト内の適当な場所にアップロードしてください。

場所はどこでも構いません。使いやすい場所に置けば良いでしょう。

 

●3.HTMLソースに、JavaScriptを読み込む記述を2行追加

 

HTMLのhead要素内(<head>~</head>の間)に、以下の2行を追記します。

 


<script src=”http://code.jquery.com/jquery-1.8.3.min.js” type=”text/javascript”></script>

<script src=”./js/jquery.socialbutton-1.9.0.min.js” type=”text/javascript”></script>


 

1行目は、jQuery本体を読み込む記述です。

2行目は、socialbuttonsプラグインを読み込む記述です。

(ディレクトリ名部分は、アップロード先のディレクトリに修正してください。)

 

●4.SNSボタン表示用のソースをコピー&ペースト

 

 最後に、各SNSボタンを表示させるためのソースを、ページ内に掲載します。

 

例えば、以下のように6行を記述すると、Facebookの「いいね!」ボタンだけを表示できます。

 


<script type=”text/javascript”>

$(function() {

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

});

</script>

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


 

また、以下のように6行を記述すると、Twitterの「ツイート」ボタン(ツイート件数表示付き)を表示できます。

 


<script type=”text/javascript”>

$(function() {

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

});

</script>

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


 

 上記では、ボタンを1つずつ掲載していますが、望みのSNSボタン全部を一括して掲載することもできます。

 

また、ボタンの大きさなどの種類を指定できるオプションも用意されています。

それらの詳しい記述方法については、次回にご紹介いたします。

 

 

 

 

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

▲ページトップへ戻る

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

▲ページトップへ戻る