綺麗なカウント付きシェアボタンを簡単に設置できるJS「Shr」

綺麗なカウント付きシェアボタンを簡単に設置できるJavaSciprt「Shr」を紹介します。

綺麗なカウント付きシェアボタンを簡単に設置できるJS「Shr」
Shr

対応しているソーシャルネットワークはGitHub、Facebook、Twitter、Pinterest、Google+の5種類です。

JavaScriptを読み込んで、シンプルなHTMLを記述するだけで設置することができます。

シェアボタンのデザインはCSSで簡単に変更可能です。FacebookやTiwtterなどのアイコンはSVGを使っているので、大きさを自由に変更できます。

各サービスが提供しているオリジナルのシェアボタンは読み込みに時間がかかるため、オリジナル画像のシェアボタンを設置するサイトが増えてきました。Shrを使えば、簡単にオリジナル画像のシェアボタンを設置することができます。

スポンサーリンク

デモ

デモページ

デモページを実装してみました。

シェアボタンのデザインはシンプルで綺麗、シェアカウントも表示されます。

設置は簡単です。

使い方

ダウンロード

ソースコードはGitHubに公開されています。「Clone or download」 > 「Download ZIP」からZIPファイルをダウンロードできます。

GitHub

ダウンロードしたZIPファイルを展開したら、「dist」フォルダにある「shr.js」、「shr.css」、「sprite.svg」を使います。

画像ファイル

sprite.svgをimageフォルダにアップロードします。

CSS

shr.cssを読み込みます。

ボタンのスタイルを調整します。

HTML

シェアボタンのHTMLを用意します。それぞれのURLやテキスト部分をページに合わせて変更します。

HTMLの詳細を解説します。

GithubのStarボタン

GitHubページのURLを記述します。

Facebookのシェアボタン

u=の後にシェアしたいページのURLを記述します。

Twitterのツイートボタン

text=の後にテキストを、url=の後にページのURLを、via=の後に@usernameを記述します。via=が不要な場合は、via=以降を削除します。

Pinterestのピンボタン

url=の後にページのURLを、media=の後に画像のURLを、description=の後に画像の説明を記述します。

Google+のシェアボタン

url=の後にページのURLを記述します。

JS

shr.jsを読み込みます。依存ライブラリはなく、単独で動作します。

</body>閉じタグの直前などでスクリプトを実行します。

以上で、シェアボタンの設置は完了です。

まとめ

シェアボタンを簡単に設置できるJavaScript、「Shr」を紹介しました。綺麗なデザインのシェアボタンを簡単に設置することができます。シェア数の表示機能もついており、実装も簡単です。

スポンサーリンク
Shr – 綺麗なカウント付きシェアボタンを簡単に設置できるJS

みんなが見ている人気記事

コメントを投稿する

  • Posted on 2016.06.16
  • Views 417