Zenn
📱

SNSシェアボタンをHTMLとJavaScriptでつくる【Twitter/Facebook/LINE/hatena/pocket】

2022/07/22に公開
CSS
HTML
JavaScript
コーディング
tech

ブログやメディアサイトではほとんどが実装しているSNSシェアボタン。
公式のプラグインを使うと、簡単にシェアボタンを作成することができます。

しかし、デザインがプラットフォームによってバラバラであることや文言の調整が難しい点からスクラッチでつくりたいなーと思い、CSSで自由にカスタマイズ可能なHTML側のコピペ用SNSシェアボタンのコードをまとめてみました。

スクラッチでつくれば、統一したデザインでつくれるので、ぜひ参考にしていただければと思います。

SNS ボタンをスクラッチでつくる際の注意点

ボタンをつくってデザインを編集する際、一旦SNSのプラットフォーム側のブランドガイドラインを確認しましょう。

公式のブランドガイドラインには、アイコンを斜めにしてはいけない・視認性の悪い組み合わせにしない等のルールが書いてあります。

あと、現在開いているページのURLをシェアするにはJavaScriptの知識が必要です。
大量のブログ記事のあるサイトのシェアボタンを実装する際は、JavaScript で現在開いている URL を取得できるコードを書くことをおすすめします。
JavaScriptのコードについてはおまけのJavaScript版コードで紹介しています。

SNS シェアボタンのコード一覧

それでは、SNSシェアボタンのコードをそれぞれ紹介していきます。

今回はHTMLのみのコードを紹介するので、CSSはみなさんで自由にカスタマイズしてみてくださいー。

一応、デモサイトあるのでこちらも参考にしていただければと思います。
デモサイト

Twitterシェアボタン

Twitterのシェアボタンはスクラッチでもハッシュタグや文章、ユーザー名など細かく設定することができるので便利です。

<!-- twitter -->
<a
  href="http://twitter.com/share?url=yurukei-career.com&text=Twitterのシェアをするときの文章です&via=yurukei20&hashtags=ハッシュタグのテキスト"
  target="_blank"
  rel="nofollow noopener noreferrer"
  >Twitterで共有する</a
>

基本的には、<a href="http://twitter.com/share?url={URL}"></a>で簡単に Twitterシェアができます。

プラスアルファで、シェアするときの文章やユーザー名、ハッシュタグを指定が可能。便利ですねー。

text=Twitterのシェアをするときの文章です
via=ユーザー名（@は不要）
hashtags=ハッシュタグのテキスト（#は不要）

Facebookシェアボタン

Facebookのシェアボタン。
ハッシュタグの指定はできる（？）みたいな話がありましたが、自分ではうまく動かなかったのでURLのシェアのみ紹介します。

<!-- facebook -->
<a
  href="http://www.facebook.com/share.php?u=yurukei-career.com"
  target="_blank"
  rel="nofollow noopener noreferrer"
  >Facebookでシェアする</a
>

基本的には、<a href="http://www.facebook.com/share.php?u={URL}"></a>で簡単に Twitterシェアができます。

LINEシェアボタン

LINEでURLをシェアする際も、スクラッチで作成できます。

<!-- line -->
<a
  href="https://social-plugins.line.me/lineit/share?url=yurukei-career.com"
  target="_blank"
  rel="nofollow noopener noreferrer"
  >LINEで送る</a
>

はてなブックマーク登録ボタン

はてなブックマークもスクラッチでボタンを作成できます。

注意点としては他のシェアボタンと違いプロトコル情報（httpsなど）が不要です。（自分もミスしていたので更新しました💦）

<!-- hatena -->
<a
  href="http://b.hatena.ne.jp/entry/s/yurukei-career.com"
  target="_blank"
  rel="nofollow noopener noreferrer"
  >はてなブックマークに登録する</a
>

pocket登録ボタン

pocket登録ボタンもスクラッチで作成できます。

ただ、pocketの仕様でクリックしたら確認画面が出ることなくいきなりpocketに登録したことになってしまいます…。（ちなみに公式のプラグインを使っても同様の挙動です。）

<!-- pocket -->
<a
  href="http://getpocket.com/edit?url=https://yurukei-career.com"
  target="_blank"
  rel="nofollow noopener noreferrer"
  >pocketに登録</a
>

おまけ：各種 SNS のブランドカラー

一応、CSSで編集する人用に各種SNSのブランドカラーだけ列挙しておきます。（主に自分用）

ferretさんの代表的な SNS＆Web サービスのブランドカラーコードという記事を参考にしています。

.share_twitter {
  background-color: #1da1f2;
}
.share_facebook {
  background-color: #1877f2;
}
.share_line {
  background-color: #00b900;
}
.share_hatena {
  background-color: #5279e7;
}
.share_pocket {
  background-color: #ee4056;
}

おまけ：JavaScriptでシェアURLを自動でつくる

せっかくなので、JavaScriptでURLを取得してシェアボタンの情報を自動で設定できるようなコードをまとめました。

以下のサンプルコードでは、JavaScriptはidで、CSSはクラス名で管理しています。

<!-- facebook -->
<a
	id="js-share-facebook"
	class="share_button share_facebook"
	href=""
	target="_blank"
	rel="nofollow noopener noreferrer"
	>Facebookでシェアする</a
>
<!-- twitter -->
<a
	id="js-share-twitter"
	class="share_button share_twitter"
	href=""
	target="_blank"
	rel="nofollow noopener noreferrer"
	>Twitterで共有する</a
>
<!-- line -->
<a
	id="js-share-line"
	class="share_button share_line"
	href=""
	target="_blank"
	rel="nofollow noopener noreferrer"
	>LINEで送る</a
>
<!-- hatena -->
<a
	id="js-share-hatena"
	class="share_button share_hatena"
	href=""
	target="_blank"
	rel="nofollow noopener noreferrer"
	>はてなブックマークに登録する</a
>
<!-- pocket -->
<a
	id="js-share-pocket"
	class="share_button share_pocket"
	href=""
	target="_blank"
	rel="nofollow noopener noreferrer"
	>pocketに登録</a
>

HTML側のIDでjs-share-XXXXと設定しているものから以下のようなコードを書くと現在のページURLを取得して自動でシェアボタンを作成できます。

const share_url = location.href;
const share_hostpath = location.host + location.pathname;
const share_title = document.title;

// facebook
const share_facebook = document.getElementById("js-share-facebook");
share_facebook.setAttribute(
	"href",
	"http://www.facebook.com/share.php?u=" + share_url
);

// twitter
const share_twitter = document.getElementById("js-share-twitter");
share_twitter.setAttribute(
	"href",
	"https://twitter.com/share?url=" + share_url + "&text=" + share_title
);

// line
const share_line = document.getElementById("js-share-line");
share_line.setAttribute(
	"href",
	"https://social-plugins.line.me/lineit/share?url=" + share_url
);

// hatena
const share_hatena = document.getElementById("js-share-hatena");
share_hatena.setAttribute(
	"href",
	"http://b.hatena.ne.jp/entry/s/" + share_hostpath
);

// pocket
const share_pocket = document.getElementById("js-share-pocket");
share_pocket.setAttribute(
	"href",
	"http://getpocket.com/edit?url=" + share_url
);

一応CSSも掲載しておきますー。

body {
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 32px;
}
section {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 16px;
}
.share_button {
	display: inline-block;
	padding: 8px 24px;
	border-radius: 8px;
	color: #fff;
	background-color: #333;
	text-decoration: none;
	transition: 0.4s;
}
.share_button:hover {
	opacity: 0.7;
}
.share_twitter {
	background-color: #1da1f2;
}
.share_facebook {
	background-color: #1877f2;
}
.share_line {
	background-color: #00b900;
}
.share_hatena {
	background-color: #5279e7;
}
.share_pocket {
	background-color: #ee4056;
}

こちらがデモサイトですー。

みなさんの参考になれば幸いです。それでは。👋

Discussion