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を使用したウィンドウの設定をまとめました。
【Javascript】window.open()で新規ウィンドウを開く
関連リンク
【Twitter・Facebook】OGPの設定方法
【Javascript】window.open()で新規ウィンドウを開く
Twitter – シェアボタン生成 
Facebook – シェアボタン生成
スポンサーリンク
