勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

SNSのシェア(いいね)ボタンを設置できるjQueryプラグイン「jsSocials」の利用方法

  jQuery JavaScript

サイト内にSNSのシェア(いいね)ボタンを設置する際、WordPressだと何らかのプラグインで実装できるが、そうじゃない場合はアイコン画像を設置したりURLを設定したり等、やや面倒な作業が必要になる。この辺り何とかならないか調べたところ「jsSocials」プラグインで解決できそう。以下に利用方法をメモ。

 

jsSocials

公式サイト

http://js-socials.com/

GitHub

https://github.com/tabalinas/jssocials

CDN

CDNで使う場合は以下を記述する。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsSocials/1.5.0/jssocials.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsSocials/1.5.0/jssocials.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsSocials/1.5.0/jssocials-theme-flat.min.css">

jQueryプラグインなのでjQueryも読み込むこと。また、アイコンを利用する際はFont AwesomeのCSSも必要となる上、v5やv6だと正常に表示されない点に注意する。

 

サンプル

https://taitan916.info/sample/jsSocials/

 

利用方法

ソースコード

<div id="share"></div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsSocials/1.5.0/jssocials.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsSocials/1.5.0/jssocials.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsSocials/1.5.0/jssocials-theme-flat.min.css">

<script>
$("#share").jsSocials({
    url: `シェアしたいURL`,
    text: `シェアしたいテキスト`,
    showLabel: false, //ボタンのテキスト(twitter等)
    showCount: false, //シェア数(いいね数等)
    shares: ["email", "twitter", "facebook", "googleplus", "linkedin", "pinterest", "stumbleupon", "pocket", "whatsapp", "viber", "messenger", "vkontakte", "telegram", "line", "rss"],
});
</script>

オプション項目について

各オプション項目についてはこちらのドキュメントページを参照すること。

 - jQuery JavaScript

  関連記事

jQueryとCSSで指定したテキストに対してラインマーカーを引く方法

サイト内で強調したいテキストに対して蛍光ペンでマーカーを引くようなアニメーション ...

jQueryでUNIXタイムスタンプの取得

jQueryでUNIXタイムスタンプを取得したい場合、 $.now()だけで取得 ...

「slick」で作成したスライダー画像にランキングの順位を表示する方法

「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...

jQueryのプラグイン(ColorPicker)でカラーコードを視覚的に選択させる方法

カラーコードを入力するフォームがあって、HTMLやCSSの知識がない方のために、 ...

jQueryで画像を遅延ロードする「jquery.lazyload.js」の利用方法

画像を遅延ロードさせたい時にはjQueryプラグインのlazyloadが便利。以 ...