【JQuery】主なソーシャルボタンをサイトに一括設置する方法

公開日:
更新日:
カテゴリー: JQuery

サイトのアクセスアップは主に検索エンジン対策(SEO)のみという方もまだまだ多いと思いますが、数年前からツイッターやフェイスブックなどのソーシャルメディアを活用したアクセスアップも大きな手段となっています。

ツイッターでツイートされたり、フェイスブックでいいね!を押されたり、はてなブックマークがついたりして拡散すれば、とてつもないアクセスが来る可能性があります。そのため、特別な理由がない場合は、設置しておいたほうが良いと思います。

ここでは、JQueryと「jQuery.socialbutton」プラグインを利用した、主流なソーシャルボタンをサイトに一括設置する方法を説明します。

各種ファイルの取得

JQuery本体

JQueryの本体はGoogleのライブラリを使用します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

「jQuery.socialbutton」プラグイン

ソーシャルボタンの設置はアイトランス株式会社様の「jQuery.socialbutton」プラグインを利用させていただきます。

プラグインの入手と使用方法は上記リンクから取得・参照できますが、ここでは設置方法等がよくわからない方向けに説明したいと思います。

では、こちらより「jQuery.socialbutton」プラグイン(バージョンは1.9.1)を、こちらより設置用のJQueryコードをダウンロードしてください。

ダウンロード後は、それらのファイルをサイトのルートディレクトリ(一番メインのフォルダ)にアップロードしてください。

設置

ファイルの読み込み

アップロード後、ソーシャルボタンを設置したいページ(HTMLファイル)のヘッド部分(<head>~</head>の部分)に下記コードを記述してください(WordPressの場合は「header.php」に記述)。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://○○○.com/jQuery.socialbutton.js"></script>
<script type="text/javascript" src="http://○○○.com/socialbutton.js"></script>

※「○○○.com」は自分のサイトURL

ボタンの設置

ソーシャルボタンを設置したい場所に、以下のタグを貼り付けてください。

ツイートボタン

<div id="twitter"></div>

フェイスブック「いいね!」ボタン

<div id="facebook_like"></div>

グーグルプラスワン

<div id="google_plusone"></div>

はてなブックマーク

<div id="hatena"></div>

ラインで送るボタン

<div id="line_okuru"></div>

 

あわせて読んでほしい!

 

コメント

まだコメントはありません。

コメントフォーム
お名前
コメント