Google+, Facebook, Twitter それぞれのシェアリンクを HTML a タグから直接作る方法

作成日 2018.05.09
更新日 2018.08.06

ウェブサイトを作られている方で SNS のシェアリンクを作成するときに, SNS のアイコンが表示されたボタンのようなものではなく, サイトのデザインにより合わせられるように HTML 要素の <a> タグから直接シェアリンクを作りたい場合ってありませんか.

まさに僕がそういうシェアリンクを作りたかったので, <a> タグの href アトリビュートにどのような URL を入力すると, それぞれの SNS のシェアリンクが作成できるのか調べて見ました.

シェアリンクの作り方

<a> タグの href アトリビュートに入力する URL は次のように作ります:

ベースとなる URL の末尾に ? を付け加える
クエリパラメータのキーと値を KEY=VALUE という形式でさらに付け加える
値は URL エンコード (パーセントエンコード) する
キーと値のペアを複数指定する場合, それぞれのペアを & で区切る

URL エンコードする方法を JavaScript, PHP, Python, Ruby と 4 つのプログラミング言語別に最後の方に掲載しておりますので, よろしければ参考にされてください.

Google+

ベースとなる URL:

https://plus.google.com/share

クエリパラメータ

キー	説明	例
`url`	シェアする URL.	`https://example.com/`
`hl`	使用する言語.	`ja`

Share endopoint の URL の例:

https://plus.google.com/share?
  url=https%3A%2F%2Fexample.com%2F
  &hl=ja

注意: 実際の URL では改行を削除する必要があります.

Goole+ の share endopoint に関するより詳しい情報は次の URL を参照ください:

https://developers.google.com/+/web/share/#sharelink-endpoint

Facebook

ベースとなる URL:

https://www.facebook.com/dialog/share?

クエリパラメータ

キー	説明	例
`app_id`	App の固有識別子. 必須パラメータ.	`145634995501895`
`display`	どのようにダイアログを表示させるかを決める.	`popup`
`href`	シェアする URL.	`https://developers.facebook.com/docs/`
`redirect_uri`	シェア完了後にリダイレクトさせる URL.	`https://developers.facebook.com/tools/explorer`

Share Dialog の URL の例:

https://www.facebook.com/dialog/share?
  app_id=145634995501895
  &display=popup
  &href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F
  &redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer

注意: 実際の URL では改行を削除する必要があります.

Facebook の Share Dialog に関するより詳しい情報は次の URL をご参照ください:

https://developers.facebook.com/docs/sharing/reference/share-dialog

Twitter

ベースとなる URL:

https://twitter.com/intent/tweet

クエリパラメータ

キー	説明	例
`text`	シェアするテキスト.	`Hello World`
`url`	シェアする URL.	`https://example.com/`
`hashtags`	付け加えるハッシュタグ. 複数指定するときはカンマで区切る.	`nature,sunset`
`via`	ツイート元の Twitter アカウント名.	`twitterdev`
`related`	関連する Twitter アカウント. 簡単な説明を付け加える場合はアカウント名の後にコロンを付けて, その後に付け加える. 複数のアカウントを指定する場合はカンマで区切る.	`twitter:Twitter News,twitterapi:Twitter API News`
`in-reply-to`	紐付け先のツイート ID.	`525001166233403393`

Web Intent の URL の例:

https://twitter.com/intent/tweet?
  text=Hello%20World
  &urlhttps%3A%2F%2Fexample.com%2F
  &hashtags=nature%2Csunset
  &via=twitterdev
  &related=twitter%3ATwitter%20News%2Ctwitterapi%3ATwitter%20API%20News
  &in-reply-to=525001166233403393

注意: 実際の URL では改行を削除する必要があります.

Twitter の Web Intent に関するより詳しい情報は次の URL をご参照ください:

https://dev.twitter.com/web/tweet-button/web-intent

URL エンコードする方法

JavaScript, PHP, Python, Ruby と 4 つのプログラミング言語別にクエリパラメータの値を URL エンコードして一つの URL を生成する方法を紹介します.

ただ紹介させていただくコードはあくまで一例で, 必ずしも冗長ではないコードとは思いませんので, あくまで参考ということにしていただければと思います.

JavaScript の場合 encodeURIComponent 関数を使って URL エンコードします:

function createShareLink(url, params) {
    var encoded_params = [];
    for (var key in params) {
        var value = encodeURIComponent(params[key]);
        encoded_params.push(key + "=" + value);
    }
    return url + "?" + encoded_params.join("&");
}

var base_url   = "https://plus.google.com/share";
var parameters = { url: "https://example.com/",
                   hl:  "ja" }

console.log(createShareLink(base_url, parameters));
// => https://plus.google.com/share?url=https%3A%2F%2Fexample.com%2F&hl=ja

PHP の場合, urlencode 関数を使用して URL エンコードします:

<?php
function create_share_link($url, $params) {
    $encoded_params = array();
    foreach ($params as $key => $value) {
        array_push($encoded_params, $key . "=" . urlencode($value));
    }
    return $url . "?" . join("&", $encoded_params);
}

$base_url   = "https://plus.google.com/share";
$parameters = array( "url" => "https://example.com/",
                     "hl"  => "ja" );

echo(create_share_link($base_url, $parameters));
# => https://plus.google.com/share?url=https%3A%2F%2Fexample.com%2F&hl=ja
?>

Python の場合, urllib.parse.urlencode() メソッドを使用して URL エンコードします:

from urllib.parse import urlencode

def create_share_link(url, params):
    encoded_params = urlencode(params)
    return url + '?' + encoded_params

base_url   = 'https://plus.google.com/share'
parameters = [ ('url', 'https://example.com/'),
               ('hl',  'ja') ]

print(create_share_link(base_url, parameters))
# => https://plus.google.com/share?url=https%3A%2F%2Fexample.com%2F&hl=ja

Ruby の場合 ERB::Util.url_encode メソッドを使用して URL エンコードします:

require 'erb'
include ERB::Util

def create_share_link(url, params)
  encoded_params = params.map { |key, value| key + '=' + url_encode(value) }.join('&')
  url + '?' + encoded_params
end

base_url   = 'https://plus.google.com/share'
parameters = [ ['url', 'https://example.com/'],
               ['hl',  'ja'] ]

puts create_share_link(base_url, parameters)
# => https://plus.google.com/share?url=https%3A%2F%2Fexample.com%2F&hl=ja