TwitterやFacebookの公式SNSボタンを自作でオリジナルデザインにする方法

Web制作
フラットなSNSボタン

TwitterやFacebookなど公式が配布するSNSボタンに頼らず、自作のリンクとアイコンだけで軽くてデザインの揃ったシェアボタンを作る方法を、現行のシェア用URLに合わせてまとめ直しました。

公式のSNSボタンを貼ってみたものの、「色も形もバラバラでサイトのデザインに馴染まない」「読み込みが妙に重い」「Twitterが現Xになってボタンの仕様が変わり、また直すのか…」と、もやもやした経験はないでしょうか。私は長年Web制作をやってきて、その都度ふりまわされてきた側です。

公式ボタンはSNS側の都合で仕様がころころ変わります。かつてTwitterはツイート数カウントの表示を廃止し、Google+はサービスごと終了、Facebookのボタンも何度も仕様が変わりました。そのたびにコードを貼り替えるのは正直しんどい。

そこで行き着いたのが、公式が配布するJavaScriptのウィジェットに頼らず、シェア用のURLを自作の<a>リンクに組み込んでしまうやり方です。アイコンはSVGやWebフォントで好きなようにデザインできるので、サイトの世界観を崩しません。仕組みさえ分かれば一度作ってしまえば長く使えます。今回はそのコードと、各SNSの現行シェアURLを整理して紹介します。

そもそも公式ボタンの何が困るのか

公式ボタンが配布しているのは、たいてい「読み込むだけでボタンが表示されるJavaScript」です。手軽な反面、次のような弱点があります。

1つめは表示速度。公式ボタンは外部のスクリプトやiframe、画像を読み込みます。SNSの数だけ外部ドメインへの通信が増えるので、ページの表示が目に見えて遅くなることがあります。表示速度はGoogleのランキング要因（Core Web Vitals）にも関わるため、SEOの観点でも軽いに越したことはありません。

2つめはデザインの自由度。公式ボタンは各社が決めた色・形・サイズで表示されます。横に並べると高さや余白が微妙に揃わず、サイトの雰囲気から浮きがちです。CSSで細かく調整しようにも、iframeの中身には手を出せません。

3つめが仕様変更への弱さ。冒頭で触れたとおり、公式ボタンはSNS側の都合で挙動やデザインが変わります。動かなくなって初めて気づく、ということも珍しくありません。

これらをまとめて解決するのが、シェア用URLを直接リンクにする自作ボタンです。やっていることは「指定したURLとテキストを、SNSの投稿画面に渡すだけ」。外部スクリプトを一切読み込まないので軽く、見た目は完全に自分で決められます。

各SNSの現行シェアURL（2026年版）

自作ボタンの心臓部は、各SNSが用意している「シェア用URL」です。ここにシェアしたいページのURLや文言をURLエンコードして渡します。現在使える主要なものを整理します。{url}や{text}の部分を、実際のページURL・テキストに置き換えてください。

X（旧Twitter）

Xには「Web Intents（ウェブインテント）」という仕組みがあり、アプリ登録なしでシェア用の投稿画面を開けます。現行のエンドポイントはhttps://x.com/intent/tweetで、旧来のhttps://twitter.com/intent/tweetも引き続き使えます。主なパラメータは次のとおりです。

https://x.com/intent/tweet?text={投稿文}&url={ページURL}&hashtags={タグ}&via={ユーザー名}

textが投稿に差し込む文章、urlがシェアするページのURL、hashtagsはカンマ区切りのハッシュタグ（#は不要）、viaは「via @ユーザー名」として引用元を添えるアカウント名です。urlは投稿時に自動で短縮されます。

出典：Web Intents – X Developer Platform

Facebook

Facebookは共有用のエンドポイントsharer.phpに、シェアしたいページのURLをuパラメータで渡します。投稿文はFacebook側がページのOGP情報から組み立てるため、テキストは基本的に渡しません。

https://www.facebook.com/sharer/sharer.php?u={ページURL}

出典：Share Button – Social Plugins – Meta for Developers

LINE

LINEは「LINEで送る」用にsocial-plugins.line.meのエンドポイントを用意しています。urlにプロトコル（https://〜）込みの正しいURLを渡すのがポイントです。

https://social-plugins.line.me/lineit/share?url={ページURL}

はてなブックマーク

はてなブックマークは、確認画面付きの追加URLにページのURLを渡します。

https://b.hatena.ne.jp/entry/panel/?url={ページURL}&btitle={ページタイトル}

コピペで作るSNSボタンのHTMLとCSS

ここから実際のコードです。WordPress用に書いていますが、それ以外の環境では<?php the_permalink(); ?>や<?php the_title(); ?>の部分を、表示するページの実URL・タイトルに置き換えてください。

HTML

各リンクにはtarget="_blank"で別タブ表示、rel="noopener noreferrer"を必ず付けます。noopenerは別タブで開いた先のページから元ページを操作される「タブナビング」を防ぐためのもので、外部リンクでは付けておくのが安全です。

<ul class="share-buttons">
  <!-- X（旧Twitter） -->
  <li class="share-x">
    <a href="https://x.com/intent/tweet?text=<?php echo urlencode(get_the_title()); ?>&url=<?php the_permalink(); ?>"
       target="_blank" rel="noopener noreferrer" aria-label="Xでシェア">
      <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" fill="currentColor">
        <path d="M18.9 1.6h3.5l-7.6 8.7L23.7 22h-7l-5.5-7.2L4.9 22H1.4l8.1-9.3L.6 1.6h7.2l4.9 6.5 5.7-6.5zm-1.2 18.3h1.9L6.4 3.6H4.3l13.4 16.3z"/>
      </svg>
      <span>ポスト</span>
    </a>
  </li>
  <!-- Facebook -->
  <li class="share-facebook">
    <a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>"
       target="_blank" rel="noopener noreferrer" aria-label="Facebookでシェア">
      <span>シェア</span>
    </a>
  </li>
  <!-- LINE -->
  <li class="share-line">
    <a href="https://social-plugins.line.me/lineit/share?url=<?php the_permalink(); ?>"
       target="_blank" rel="noopener noreferrer" aria-label="LINEで送る">
      <span>送る</span>
    </a>
  </li>
  <!-- はてなブックマーク -->
  <li class="share-hatena">
    <a href="https://b.hatena.ne.jp/entry/panel/?url=<?php the_permalink(); ?>&btitle=<?php echo urlencode(get_the_title()); ?>"
       target="_blank" rel="noopener noreferrer" aria-label="はてなブックマークに追加">
      <span>ブックマーク</span>
    </a>
  </li>
</ul>

Xのアイコンは公式のロゴを<svg>で直接埋め込んでいます。SVGなら拡大してもにじまず、fill="currentColor"にしておけばCSSのcolorでアイコン色を一括指定できて便利です。他のSNSも同様にSVGを入れてもいいですし、アイコンフォント（Webフォント）で揃えるのも手軽です。

CSS

横並び・角丸・ホバー時の色変化までをまとめた例です。各SNSのブランドカラーを当てています。flexで並べているので、ボタンの数が増減してもレイアウトが崩れません。

.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.share-buttons li {
  flex: 1 1 auto;
  min-width: 90px;
}
.share-buttons a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  transition: opacity .2s;
}
.share-buttons a:hover {
  opacity: .8;
  color: #fff;
  text-decoration: none;
}
.share-x a        { background: #000000; }
.share-facebook a { background: #1877f2; }
.share-line a     { background: #06c755; }
.share-hatena a   { background: #00a4de; }

色は各社のブランドガイドに沿った現行カラーにしてあります（Xは黒、Facebookは#1877f2、LINEは#06c755、はてブは#00a4de）。サイトのトーンに合わせて、あえてモノトーンや枠線だけのデザインにしても構いません。ここが自作ボタンの一番おいしいところです。

CSSで作ったオリジナルのSNSボタン

自作ボタンのメリットと注意点

最大のメリットは軽さです。外部スクリプトを読み込まないので、SNSの数を増やしてもページが重くなりません。リンクとCSS、アイコンだけなので表示も一瞬です。次にデザインの自由度。色・形・並びを完全にコントロールでき、サイトの世界観に溶け込ませられます。そして仕様変更に強いこと。シェアURLは公式ウィジェットより変更頻度が低く、万一変わっても直すのはURL1行で済みます。

一方で注意点もあります。公式ボタンが表示してくれる「いいね数」や「シェア数」といったカウントは、自作ボタンでは出せません。数字を見せて拡散を後押ししたい場合は公式ボタンに分があります。ただ、カウントの取得こそが重さの主因でもあるので、表示速度を優先するなら割り切ってよい部分でしょう。

もう一点、シェアURLの仕様はSNS側が予告なく変えることがあります。設置後もたまにボタンが正しく動くか確認しておくと安心です。とくにX（旧Twitter）はドメインがx.comに移行した経緯があるので、古い記事のコードを流用するときは要注意です。

なお、Google+終了後のシェアボタン構成については、別記事でもX・Facebook・LINE対応の設置方法をまとめています。あわせてどうぞ。

関連記事：Google+終了後のSNSシェアボタン設置方法【X・Facebook・LINE対応】

まとめ

公式SNSボタンの「重い・デザインが揃わない・仕様変更に振り回される」という悩みは、シェア用URLを自作リンクに組み込むことでまとめて解決できます。要点を整理します。

仕組みはシンプルで、各SNSのシェアURLにページのURLや文言をURLエンコードして渡すだけ。X（旧Twitter）はhttps://x.com/intent/tweet、Facebookはhttps://www.facebook.com/sharer/sharer.php?u=、LINEはhttps://social-plugins.line.me/lineit/share?url=、はてなブックマークはhttps://b.hatena.ne.jp/entry/panel/?url=が現行のエンドポイントです。

アイコンはSVGかWebフォントで自由にデザインでき、リンクにはtarget="_blank"とrel="noopener noreferrer"を忘れずに。外部スクリプトを読み込まないので軽く、SEO上も有利です。

私のおすすめは、まずは今回のHTMLとCSSをそのままコピペして動かしてみること。動く土台ができてから、色やアイコンをサイトに合わせて少しずつ調整していくのが一番ラクで失敗がありません。公式ボタンの仕様変更に毎回ふりまわされる暮らしから、これで卒業できます。

CSS HTML SEO Webデザイン Web制作

関連する記事