【Blogger】SNS シェアボタンをWeb Share APIに変えてみた

日付:

 久しぶりにBloggerのテーマ弄り。

ブログの機能で必要なのかよく分からない機能SNSシェアボタン。

私が使っていないだけかも知れませんが、自己満足なだけで設置している気がして来ました。

Twitterからの流入もある場合、廃止すると不利な気はしますが、設置してあるSNS共有ボタンを使用してくれているのか分かりません。（知る術はありますが…）

テーマのメンテを考えるとSNS毎にボタンを用意してコードを記述したり、複数のボタン配置を考えたり、変更があったりすると面倒なだけです。

SNS毎のシェアボタンは廃止してWeb Share API に変更

どうせ自己満足の機能なら新しい事をやってみようかと。

ボタンをクリック（タップ）するとシェア可能なアプリ一覧UIを表示するAPIを使い、シェアボタンをJavascriptで組んでみました。

シェアボタンをクリックすると表示されるUI

Web Share APIの実行には多少条件があります。

まず、Bloggerなら問題無いですが、HTTPSのサイトのみ動きます。

実行されるブラウザにも制限があり、Safari/Edge/Chrome for android/Firefox for android等、スマホブラウザではほぼ使えます。

PCでは同じChromiumベースのChromeが未対応なのにEdgeは対応しています。

最新の対応状況はCan I useで確認出来ます。

また、このAPIの仕様はドラフトのステイタスですが、環境さえ問題無いならば機能は使えるらしい。

WD 仕様解説

Web Share API仕様は以下の通り単純で簡単。

  navigator.share({
    title: 共有するタイトル,
     text: 何かテキスト,
      url: ページURL,
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));

共有する項目は3つ。これらを共有するアプリへ渡すことになります。
  • title: 共有するアプリによって使われる場合と使われない場合があります。Gmailを選んだ場合はメールの件名として使われ、クリップボードにコピーする場合は無視されます。
  • text: 固定のメッセージやページタイトル等
  • url:  固定アドレスを入れてもページアドレスでも可。location.hrefを記述すればページアドレスになります。

BloggerにWeb Share APIを実装

変更する場合、テーマ（テンプレート）のバックアップを取ってから変更しましょう。

HTMLの変更はBloggerの管理画面より テーマ＞＞HTMLの編集と進みテンプレートのHTMLを変更します。尚、変更については自己責任でお願いします。

HTML

使用しているテーマの好きな所にシェアボタンを設置します。
button タグにてシェアボタンを作ります。
<button id='sharebtn'>シェアする？</button>  
ボタンの配置とスタイルはcssでお好みで。

JavaScript

ボタンに続けて記述しても良いのですが、今回は〈/html〉の直前に記述しておきます。
<!--SHARE button     -->
<script>
document.querySelector('#sharebtn').addEventListener('click', navshare)
function navshare() {
 if (navigator.share) {
   navigator.share({
    title: document.title,
    url: location.href,
    })
    .then(() =&gt; console.log('Successful share'))
    .catch((error) =&gt; console.log('Error sharing', error));
  }
  else 
    {alert('お使いのブラウザでは共有機能が使用できません\n現在のページのURLをクリップボードにコピーしました');
  navigator.clipboard.writeText(location.href);
     }
}
</script>

ちょっと覚書を。

document.querySelector('#sharebtn').addEventListener('click', navshare)は、ボタンid=sharebtnがクリックされた時にnavshareを実行させます。

if〜elseでWeb Share API使える環境or非環境で処理を分岐させています。

ifでnavigator.shareが有効な場合

navigator.shareが値promiseを返した場合、if以降の処理を継続させます。promiseが戻らない時はelse以降の処理をさせます。

シェアするアプリに渡す項目

  • title: documment.titleを指定。ページのタイトルを取得します。
  • text: 今回は入れていません。
  • url: location.hrefを指定。

UIが表示されると戻される値は以下で処理

  •  .thenはシェアを完了した時=アプリを選んだ時の値resolveが返された時の処理
  •  .catchはシェアを完了しなかった（ユーザーによるキャンセルも含む）時の値reject返された時の処理

navigator.shareが無効else 以降の処理

Web Share APIが使えない時の処理。

大半のPCブラウザはコチラの処理が実行されます。

alertで以下ダイアログを表示させて、更にページのurlをクリップボードにコピーしています。

URLをクリップボードにコピーしておけば最低限のシェアはしてくれるかも。


Web Share APIのメリット・デメリット

一応個人的なメリット/デメリットなど。

メリット

  • ページ上もボタン１つなのでスッキリ。メンテも楽。
  • 共有する場合は、そのディバイスにインストールされている共有可能なアプリだけ表示される。 

デメリット

  • シェアボタンを押してアプリを選んで…なので、クリック（タップ）回数は1回増えます。
  • Chrome for androidではブラウザはアドレスバーをクリックするとシェアボタンが表示され、今回と同じ動作をします。この方法を知っている人はページに共有ボタンが有ろうが無かろうが共有出来るっていう。


このテーマでは、投稿文の終わりにシェアアイコンを装備してみたけれど、好みの問題ですかね。


以上

コメント

コメントを投稿