Bloggerブログへの汎用シェアボタン設置例【Web Share API】

2025/2/17

2025/2/25

本サイトには、広告あるいはアフィリエイトプログラムによるアソシエイトリンクが含まれる場合があります。

本ブログではブログ記事上部と下部にソーシャルシェアボタン（SNSシェアボタン）を設置しています。現在利用しているBloggerテンプレート「JetTheme」では初期状態で7つ用意されています。このうち日本での利用者が多そうなFacebookとTwitter（X）にしぼり、さらにオリジナルでLINEとはてブを追加し設置しています。

SNSごとに個別のソーシャルシェアボタンだけでなく、汎用的な共有ボタンもあると各SNSやメモアプリ等への導線ができ便利と思い新たに設置してみました。Web Share API を使うとシンプルにJavaScriptとHTML・CSSのみでブラウザやOS標準のシェア画面が開くとのことで利用してみました。

なお、筆者はJavaScript等に関しては素人です。素人が独学およびAIチャット等を参考に書いたコードのため間違っている部分などあるかもしれません。

Web Share APIと動作

Web Share API

Web share API を使うと、端末にインストールされているアプリに応じて共有方法を一覧表示しテキストやリンクなどを任意のアプリに渡すことができます。SNSやメッセージアプリだけでなく、メモアプリやAIチャットアプリ等に送ることもできるため、拡散・共有以外の用途にも活用できます。

参考：ウェブ共有 API - Web API | MDN

利用可否はOS・ブラウザにより異なりますが、2025年2月ではPC・スマホともに最新のメジャーなブラウザでは大体使えるようです（PC版FireFoxは未対応）。

参考：Web Share API | Can I use... Support tables for HTML5, CSS3, etc

本ブログでの動作

本ブログに設置したコードでは、Web Share APIが利用可能なブラウザでの動作は以下の画像（Android版Firefox・Chrome、Windows版Chrome）のようになります。

未対応のブラウザでは以下の画像のようにメッセージを表示しクリップボードにURLをコピーするようになっています（画像はWindows版Firefoxの場合）。

ボタン設置とスクリプト実装方法

HTMLでボタン設置

共有機能を呼び出すボタンを設置します。

BloggerではテーマHTMLの編集を伴うため、バックアップを取ることやテスト環境での試験後に本番ブログで利用することを推奨します。

JetThemeの場合

ボタン本体はなんでも良いですが、namimoriはJetTheme標準の他のシェアボタンデザインにあわせて以下のコードにしてみました。

<button class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill share-api' style='background-color:var(--jt-bg-light); width:32px; height:32px;' title='このページをシェアする'><svg aria-hidden='true' class='' style='width: 18px; height: 18px; fill:var(--bs-body-color); max-width: 200%; transform: translate(-15%, -5%);'><use xlink:href='/responsive/sprite_v1_6.css.svg#ic_share_black_24dp'/></svg></button>

<button>タグにWEB share APIを呼び出すためのクラス（今回はclass='share-api'）を自分で決め設定しておきます。HTML内で直接style指定していますが、CSSでデザイン指定しても良いでしょう。

また、Bloggerでは特別な準備不要でシェアアイコンのSVGを呼び出し利用できるのでありがたく使っています（以下のuseタグ部分）。

<use xlink:href='/responsive/sprite_v1_6.css.svg#ic_share_black_24dp'/>

このボタン<button>～</button>をJetTheme では以下の部分（JetShareで検索しヒット）に設置します。

 <b:includable id='JetShare' var='post'>
 <b:if cond='data:jwidget.allBylineItems.share'>
  <div class='social-share mb-3'>
   <div class='d-flex fs-5'>
   <a ～>他のSNSシェアボタン</a>
   <!--ここにボタン設置-->
   </div>
  </div>
 </b:if>
</b:includable>

QooQの場合

利用者の多そうなQooQに適合するボタンデザインも載せておきます。

ボタン本体は以下のようなコードにしました。<button>タグにシェアAPI用のクラス（今回はclass='share-api'）を、<svg>タグに調整用のクラスを設定しておきます。

<button class='share-api' title='このページをシェアする'><svg class='ic_share_black_24dp'><use xlink:href='/responsive/sprite_v1_6.css.svg#ic_share_black_24dp'/></svg></button>

これを以下の部分（<b:includable id='shareButtons' var='post'>で検索）に設置します。

        <b:includable id='shareButtons' var='post'>
<div class='single-share'>
  <a class='single-share-twitter' expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.canonicalUrl + &quot;&amp;text=&quot; + data:post.title' target='_blank' title='ツイッターでつぶやく'>t</a>
  <a class='single-share-facebook' expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='フェイスブックでシェア'>f</a>
  <a class='single-share-hatena' expr:href='&quot;http://b.hatena.ne.jp/add?mode=confirm&amp;url=&quot; + data:post.canonicalUrl' title='はてなブックマークに追加'>B!</a>
  <a class='single-share-pocket' expr:href='&quot;https://getpocket.com/edit?url=&quot; + data:post.canonicalUrl + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Pocketに保存'>P</a>
  <a class='single-share-line' expr:href='&quot;https://social-plugins.line.me/lineit/share?url=&quot; + data:post.canonicalUrl' target='_blank' title='LINEで送る'>L</a>
  <!-- ここにボタン設置 -->
</div>
</b:includable>

CSSはQooQの場合以下のようなものを設定すると他のボタンに馴染むと思います。

.share-api {
    margin: 0.3em;
    border: none;
    border-radius: 3px;
    display: flex;
    padding: .2em 1em;
    background-color: lightgray; /* ボタン背景色 */
    cursor: pointer;
    justify-content: center;
    align-items: center;
}
.ic_share_black_24dp{
	height: 17px;
	width: 17px;
	fill: black; /* アイコンの色 */
}

上記コードで設置したボタンの実際のデザインは以下の画像のようになります。

JavaScript

以下のスクリプトを</body>直前（JetThemeではの下）に設置します。

<!--WEB SHARE API button -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>//<![CDATA[
document.querySelectorAll('.share-api').forEach(button => {
  button.addEventListener('click', () => {
    if (navigator.share) return navigator.share({ title: document.title, url: location.href });
    alert('URLをコピーしました。このブラウザでは共有機能は使えません。');
    navigator.clipboard.writeText(location.href).catch(console.error);
  });
});
//]]>
</script>
</b:if>

document.querySelectorAll('.share-api')に呼び出し用のクラスを記述しボタン要素を取得します。Web Share APIが利用可能なブラウザではページタイトルとURLを各アプリの共有に渡す動作になります（ただし、OSによりタイトルがうまく共有されないなどあるようです。）。利用できないブラウザの場合は、ページURLをクリップボードにコピーしメッセージを表示します。

なお、スクリプトの読み込みをブログ記事ページのみに限定するため、Blogger制御タグ<be:if>～</be:if>でスクリプトを囲っています。また、Bloggerテーマ上でJavaScriptを扱う関係上、CDATAセクション<![CDATA[ ～ //]]>を使っています。Blogger以外のサービスで本コードを利用する場合はこれらは不要です。

まとめ

各サービス固有のボタンをいちいち設置することなくシェア機能を一つのボタンにまとめられるということで便利です。ブラウザ本体の共有機能で代替できますが、それと比べクリック（タップ）回数が少なく済むこと、アイコンが目に入ることでシェアする選択肢を想起させる効果などが期待されます。ページ読み込み速度への影響もほとんどないようで、導入前後で体感・スコアともに変化はほぼ感じませんでした。

Blog