Help us understand the problem. What is going on with this article?

JavaScriptでTwitter、Facebookシェア用URLを作る

概要

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', 'yumemiinc'];
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を使って実装してみましたが、1回使い方がわかると結構便利でこれからも使って行きたくなりました。

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

参考URL

URLSearchParams - Web API | MDN

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした