その他メモ

オリジナルのSNSシェアボタンを設置する方法

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 – シェアボタン生成