【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>
あわせて読んでほしい！
今年（2017年）の3月に7年間勤めた公務員を退職して現在ニートしているアホです。ニート歴5か月目に突入！ﾔﾊﾞｲ
【経歴】
- 公立高校
- 国立大学
- 国立大学大学院（専門は生物化学領域）
- 公務員
- ニート（今ここ）
- ？？？
【一言】
（公務員やめた後悔は正直）ある
関連してそうなオススメ記事
コメント
まだコメントはありません。