概要

Twitter、Facebookなどのシェア機能はURLを叩くことができれば自前で実装することができる。

ベースとなるシェアURLにクエリパラメータを付与する形で実装する。

jsでクエリパラメータを付与する方法は色々な方法があるが、今回はURLSearchParamsを使用する。

URLSearchParamsはIE11だと使えないのには注意してほしい。(他のブラウザだとだいたい使用可能)

Can I use... Support tables for HTML5, CSS3, etc

URLSearchParamsについて

new URLSearchParamsでは、URLSearchParamsオブジェクトとして扱われるため、クエリパラメータの文字列のみ欲しい場合は.toString()してあげる必要がある。

const baseUrl = 'https://twitter.com/intent/tweet?';
const queryParam1 = ['key', 'value'];

// https://twitter.com/intent/tweet?key=value
const query = new URLSearchParams([queryParam1]).toString();

TwitterのシェアURLについて

ベースURL

https://twitter.com/intent/tweet?

クエリパラメータ

url=シェアするURL&text=ツイート本文&via=シェアするURLのアカウント&hashtags=ハッシュタグ&related=ツイートした後フォローさせたいアカウント

ハッシュタグを複数付けたい場合は「,」で区切ればOK。

&hashtags=ハッシュタグ1,ハッシュタグ2

実装

const baseUrl = 'https://twitter.com/intent/tweet?';
const text = ['text', 'ツイート本文'];
const hashtags = ['hashtags', ['ハッシュタグ1', 'ハッシュタグ2'].join(',')];
const url = ['url', location.href];
const via = ['via', 'tos'];
const query = new URLSearchParams([text, hashtags, url, via]).toString();
const shareUrl = `${baseUrl}${query}`;

FacebookのシェアURLについて

ベースURL

https://www.facebook.com/sharer/sharer.php?

クエリパラメータ

facebookの場合、urlのみ指定することができる。

u=シェアするURL

実装

URLだけなので正直そのまま文字列結合でもいいと思います。

const baseUrl = 'https://www.facebook.com/sharer/sharer.php?';
const url = ['u', location.href];
const query = new URLSearchParams([url]).toString();
const shareUrl = `${baseUrl}${query}`;

各種SNSのアイコン

Font Awesome Brand Iconsを使用すればOK。

npm、またはyarnで導入する場合はこちら。@fortawesome/free-brands-svg-icons - npm

$ npm i --save @fortawesome/free-brands-svg-icons

Or

$ yarn add @fortawesome/free-brands-svg-icons

まとめ

今回はURLSearchParamsを使って実装してみましたが、１回使い方がわかると結構便利でこれからも使って行きたくなりました。

ほかSNSもクエリパラメータさえわかれば同じような手法で実装できると思います。

参考URL

URLSearchParams - Web API | MDN

【ソーシャルサービス】シェアURLまとめ - Qiita