今回は、「jQuery.socialbutton」というjQueryプラグインを使う方法をご紹介いたします。
短いソースをHTMLに記述するだけで、簡単に各種SNSボタンを一括掲載できて便利です。
本稿執筆時点では、Facebook、Twitter、mixi、Google+、GREE、はてな、Evernote、Pinterest の各ボタンの掲載に対応していました。
これらの中から必要なものだけを選んで、一括掲載できます。このスクリプトを使ってみるには、以下の手順で操作してください。
こんにちは。All About ホームページ作成ガイドの西村文宏です。
最近では、FacebookやTwitterなどのSNSと連携できるボタンをウェブページ上に設置しているサイトをよく見かけます。
例えば、クリックするとFacebookのタイムラインなどに掲載できる「いいね！」ボタンや、Twitterに投稿できる「ツイート」ボタンなどです。
それらのボタンを掲載しておけば、SNSで話題にしてもらえる可能性が高まるため、アクセス数の向上が望めます。
また、「今どれくらい『いいね！』されているか」といった数を表示することもできるため、そのページの人気度を把握する参考にもなります。
これらのボタンは、各SNSサイト上で公開されている指定のソースを、HTMLに記述すると掲載できます。
しかし、個々のソースを1つ1つ調べるのは面倒ですね。
そんなときには、これらのSNSボタンを一括して掲載できるスクリプトを利用するのがお勧めです。
●1. 配布サイトからJavaScriptファイルをダウンロード
コチラの配布サイトからスクリプト本体をダウンロードします。
上記のページを下方向へスクロールしていくと、『その１：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ボタン全部を一括して掲載することもできます。
また、ボタンの大きさなどの種類を指定できるオプションも用意されています。
それらの詳しい記述方法については、次ページでご紹介いたします。
続きはアクセストレードに
ログインしてご覧ください。
ログインしてご覧ください。
SHARE
ご注意ください
- 本記事の内容は、2016/09/20更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
- 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
- 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。
関連記事
カテゴリーから探す
タグから探す
- アフィリエイトをはじめよう！
- 無料新規パートナー登録
- 広告出稿を希望のかたはこちら
- 無料資料請求はこちら