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

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

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

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

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

一応、2つのリンクの具体的な違いを自分を例に分けてみました(実際にクリックしてみてください!)

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

今回は、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;
}

(おまけ)WordPressでのシェアボタンの作り方

WordPressでもURLの書き方は同じです。ただし、静的サイトではURLやタイトルを直書きするのに対してWordPressでは各ページのURLとタイトルを動的に取得してこなければなりません。

具体的にはthe_title()the_permalink()になるのですが、詳しくは以下の記事で紹介しているので、こちらもコピペして使ってみてください!

WordPressでSNSシェアボタンを作るためのコードの書き方とCSSデザイン

おわり

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

今回は以下の6つのURLの型を紹介しました。

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

案件によっては他にも必要になってくるかもしれません。それぞれのSNSでURLの型は決まっているはずなので、一度出会ったシェアボタンのURLは2回目に使い回せるように手元にメモして残しておくと、どんどんと楽になっていきます!

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事