各種SNSに共有するためのオリジナルなシェアボタン（URL）の作り方

2018年12月18日2021年11月28日

SNSの時代において、SNSのボタンが存在しないサイトはほとんどありません。コーディグでは確実に求められる要素なので作り方を覚えておきましょう！

SNSのボタンには大きく２つあります。

自身のアカウントへアクセスしてもらうためのボタン
記事をシェアするためのボタン

1つ目に関しては、自分のアカウントのURLをaタグで指定するだけなので簡単だと思います。一方の記事をシェアするためのボタンは、各SNSによって指定するURLの書き方（フォーマット）が決まっています。

一応、２つのリンクの具体的な違いを自分を例に分けてみました（実際にクリックしてみてください！）

アカウントへのボタン	シェアボタン
はにわまんのアカウントへ	この記事をシェアする

今回は、2つ目のシェアボタンの作り方を紹介していきます。覚える必要はありませんが、手元に置いていつでもコピペして使えるようにしておくとコーディングが捗ると思います！

各種SNSに共有するためのオリジナルなシェアボタンの作り方

この記事では以下の6種類のシェアリンク（ボタン）の作り方を紹介していきます。

Twitter
Facebook
LINE
はてなブックマーク
Pocket
Google+

Twitter

[URL]と[タイトル]を指定してあげてください。

<a href="https://twitter.com/share?url=[URL]&text=[タイトル]" rel="nofollow" target="_blank">Twitterでシェアする</a>

この記事を例にすると、以下のように作ることができます。

<a class="btn-twitter" href="https://twitter.com/share?url=https://haniwaman.com/original-share-btn/&text=各種SNSに共有するためのオリジナルなシェアボタンの作り方" rel="nofollow" target="_blank">Twitterでシェアする</a>

Twitterでシェアする

.btn-twitter {
  display: inline-block;
  padding: .6em 1em .6em 2.5em;
  margin: 0 0 .4em;
  background-color: #55acee;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
}
.btn-twitter::after {
  position: absolute;
  content: '\f099';
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400;
  top: 50%;
  left: .5em;
  transform: translateY(-50%);
  font-size: 1.2em;
}

Facebook

[URL]を指定してあげてください。FecebookはURLから勝手にタイトルを取得するみたいです。

<a href="https://www.facebook.com/share.php?u=[URL]" rel="nofollow" target="_blank">Facebookでシェアする</a>

この記事を例にすると、以下のように作ることができます。

<a class="btn-facebook" href="https://www.facebook.com/share.php?u=https://haniwaman.com/original-share-btn/" rel="nofollow" target="_blank">Facebookでシェアする</a>

Facebookでシェアする

.btn-facebook {
  display: inline-block;
  padding: .6em .8em .6em 2.5em;
  margin: 0 0 .4em;
  background-color: #315096;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease 0s;
}
.btn-facebook::after {
  position: absolute;
  content: '\f09a';
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400;
  top: 50%;
  left: .5em;
  transform: translateY(-50%);
  font-size: 1.2em;
}

はてなブックマーク

[URL]と[タイトル]を指定してあげてください。

<a href="https://b.hatena.ne.jp/add?mode=confirm&url=[URL]&title=[タイトル]" target="_blank" rel="nofollow">はてなブックマークでシェアする</a>

この記事を例にすると、以下のように作ることができます。

<a class="btn-hatena" href="https://b.hatena.ne.jp/add?mode=confirm&url=https://haniwaman.com/original-share-btn/&title=各種SNSに共有するためのオリジナルなシェアボタンの作り方" target="_blank" rel="nofollow">はてなブックマークでシェアする</a>

はてなブックマーク

.btn-hatena {
  display: inline-block;
  padding: .6em 1em .6em 2.5em;
  margin: 0 0 .4em;
  background-color: #008fde;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease 0s;
}
.btn-hatena::after {
  position: absolute;
  content: "B!";
  top: 50%;
  left: .5em;
  transform: translateY(-50%);
  font-size: 1.2em;
  font-weight: bold;
}

LINE

[URL]を指定してあげてください。

<a href="https://social-plugins.line.me/lineit/share?url=[URL]" target="_blank" rel="nofollow">LINEでシェアする</a>

この記事を例にすると、以下のように作ることができます。

<a class="btn-line" href="https://social-plugins.line.me/lineit/share?url=https://haniwaman.com/original-share-btn/" target="_blank" rel="nofollow">LINEでシェアする</a>

LINEでシェアする

.btn-line {
  display: inline-block;
  padding: .6em 1em .6em 2.5em;
  margin: 0 0 .4em;
  background-color: #1dcd00;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease 0s;
}
.btn-line::after {
  position: absolute;
  content: "\f3c0";
  font-family: 'Font Awesome 5 Brands';
  top: 50%;
  left: .5em;
  transform: translateY(-50%);
  font-size: 1.2em;
  font-weight: 400;
}

Pocket

[URL]を指定してあげてください。

<a href="https://getpocket.com/edit?url=[URL]" target="_blank" rel="nofollow">Pocketでシェアする</a>

この記事を例にすると、以下のように作ることができます。

<a class="btn-pocket" href="https://getpocket.com/edit?url=https://haniwaman.com/original-share-btn/" target="_blank" rel="nofollow">Pocketでシェアする</a>

Pocketでシェアする

.btn-pocket {
  display: inline-block;
  padding: .6em 2em .6em 2.5em;
  margin: 0 0 .4em;
  background-color: #EE4056;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease 0s;
}
.btn-pocket::after {
  position: absolute;
  content: '\f265';
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400;
  top: 50%;
  left: .5em;
  transform: translateY(-50%);
  font-size: 1.2em;
}

Google+

[URL]を指定してあげてください。

<a href="https://plus.google.com/share?url=[URL]" target="_blank" rel="nofollow">Google+でシェアする</a>

この記事を例にすると、以下のように作ることができます。

<a class="btn-google" href="https://plus.google.com/share?url=https://haniwaman.com/original-share-btn/" target="_blank" rel="nofollow">Google+でシェアする</a>

Google+でシェアする

.btn-google {
  display: inline-block;
  padding: .6em 1em .6em 2.5em;
  margin: 0 0 .4em;
  background-color: #dd4b39;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: relative;
	text-decoration: none;
  transition: all 0.3s ease 0s;
}
.btn-google::after {
  position: absolute;
  content: '\f0d4';
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400;
  top: 50%;
  left: .5em;
  transform: translateY(-50%);
  font-size: 1.2em;
}