TwitterとFacebookのオリジナルシェアボタンの設置メモです。
SNSシェアボタンの設置デモ
シェアボタンをクリックで指定サイズのサブウィンドウが開くようになっています。
サンプルコード
HTML
<div class="icon_wrap"> <a href="#" class="js-share-button" data-type="twitter" data-text="デモ | オリジナルのSNSシェアボタンを設置する方法" data-url="" data-hashtags="シェアボタンテスト" data-via="" data-related="" ><img src="img/icon_twitter.svg" alt="twitter" /></a> <a href="#" class="js-share-button" data-type="facebook" data-url="" ><img src="img/icon_facebook.svg" alt="facebook" /></a></div>Javascript
$(".js-share-button").on("click", function (e) { e.preventDefault(); var $this = $(this); var type = $this.data("type"); //Twitter&Facebook url var url = $this.data("url") !== undefined ? $this.data("url") : ""; if (url === "") { url = window.location.href; } //Twitter text var text = $this.data("text") !== undefined ? $this.data("text") : ""; if (text === "") { text = ""; } //Twitter hashtags var hashtags = $this.data("hashtags") !== undefined ? $this.data("hashtags") : ""; if (hashtags === "") { hashtags = ""; } //Twitter via var via = $this.data("via") !== undefined ? $this.data("via") : ""; if (via === "") { via = ""; } //Twitter related var related = $this.data("related") !== undefined ? $this.data("related") : ""; if (related === "") { related = ""; } var windowName = ""; var windowOpt = "width=600, height=450, menubar=no, toolbar=no, scrollbars=yes"; var beforeEncode_value; var _value; if (type === "twitter") { beforeEncode_value = "https://twitter.com/share?text=" + text + "&url=" + url; if (hashtags) { beforeEncode_value += "&hashtags=" + hashtags; } if (via) { beforeEncode_value += "&via=" + via; } if (related) { beforeEncode_value += "&related=" + related; } _value = encodeURI(beforeEncode_value); } if (type === "facebook") { _value = "https://www.facebook.com/share.php?u=" + url; } if (_value !== "") { window.open(_value, windowName, windowOpt); } return false;});Twitterシェアボタンの説明
data-type=“twitter” でJavascriptでTwitterかFacebookかを判別しています。 data-urlはデフォルトでページのURLが入るようになっています。 変更する場合はdata-url=""に追記します。
その他パラメータは必要な分を追記すればツイートの際に反映されます。
<a href="#" class="js-share-button" data-type="twitter" data-text="デモ | オリジナルのSNSシェアボタンを設置する方法" data-url="" data-hashtags="シェアボタンテスト" data-via="" data-related="" ><img src="img/icon_twitter.svg" alt="twitter"/></a>下記はTwitterツイートの際に設定できるパラメータです。
| パラメータ | 説明 |
|---|---|
| text | シェア時のデフォルトテキストを設定 |
| url | ページ情報のURL |
| hashtags | シェア時のデフォルトハッシュタグを設定 |
| カンマで区切って複数指定することができます。 | |
| via | ツイートに【@◯◯さんから】という表示を追加 |
| TwitterのIDを設定して使用します。 | |
| related | ツイート後に指定したTwitterのIDのフォローを促します。 |
サンプルデモで作成した場合、生成されるURL例が以下になります。
https://twitter.com/share?text=デモ | オリジナルのSNSシェアボタンを設置する方法&url=http://hibi-update.org/demo/sns-share/&hashtags=シェアボタンテストただこのままでは、IE11ではシェアボタンを押してもエラーになってしまいます。 【 | 】とか空白が引っかかってしまいます。
その為、下記のJavascriptコードでエンコードしています。
_value = encodeURI(beforeEncode_value);Facebookシェアボタンの説明
Twitterシェアボタンと同様にdata-urlはデフォルトでページのURLが入るようになっています。指定したい場合はdata-url=""に記載します。
<a href="#" class="js-share-button" data-type="facebook" data-url="" ><img src="img/icon_facebook.svg" alt="facebook"/></a>サンプルデモで作成した場合、生成されるURL例が以下になります。
https://www.facebook.com/share.php?u=https://hibi-update.org/demo/sns-share/シェアボタンのウィンドウをカスタマイズする
下記の変数でウィンドウ幅と高さを指定しています。
var windowOpt = "width=600, height=450, menubar=no, toolbar=no, scrollbars=yes";詳しくは下記の記事に、window.openを使用したウィンドウの設定をまとめました。