🔗
WordPressでネイティブデバイスの共有機能対応の記事シェアボタンを付ける。
WordPressでネイティブデバイスの共有機能対応の記事シェアボタンを付ける。
Web Share APIを使って、WordPressにネイティブデバイス共有機能対応のシェアボタンを付けたときにやったことをまとめます。
Web Share API の詳細についてはこちらの記事が割と細かく書かれていてわかりやすいかなと。
Web Share APIの紹介
おおまかな実装方法
- シェアボタンを吐くphp関数を用意。
- Web Share API は JavaSciptで叩く。（async/awaitで非同期）
- phpからJSにdata-setで必要データを受け渡し
- シェアボタンには<button>を利用
Web Share APIに渡すデータ
- url
- title（今回の場合は記事タイトル）
- text（今回の場合は記事の抜粋）
の3つのプロパティを持ったオブジェクトデータ
具体的な実装
PHP
share.php
<?php
//ループ外でも呼び出しできるよう、Postを$postで取得。
function share($post) {
?>
// data-share-[property名]で受け渡し用のデータを用意。
//the_title()を使うとそのままマークアップがHTML上で吐かれるので、get_the_title()を利用。抜粋とパーマリンクも同様。
<button id="share-button" data-share-title="<?= get_the_title($post) ?>" data-share-url="<?= get_the_permalink($post) ?>" data-share-text="<?= get_the_excerpt($post);?>"> </button>
<?php
}
JavaScript
share.js
//share-buttonを取得
const shareButton = document.getElementById("share-button")
// async/awaitでWeb Share APIにアクセスする関数を作成
async function share(title, text, url) {
try {
await window.navigator.share({
title: title,
text: text,
url: url
})
} catch(e) {
console.log(e.message);
}
}
//Web Share API非対応の場合buttonを削除。Partial Supportのため。
if(!navigator.share) {
shareButton.style.display = "none";
return;
}
//クリック時の挙動をaddEventListnerで登録
shareButton.addEventListener("click", () => {
//share関数を呼び出し、datasetから値を受け渡し。
share(shareButton.dataset.shareTitle, shareButton.dataset.shareText, shareButton.dataset.shareUrl);
})
以上の実装です。
APIにtitleやurlを渡すだけであれば、document.titleやlocation.hrefも利用可能ですが、PHP側でurlやtitleを加工する場合も踏まえ、datasetを利用しています。
参考にした記事
最後に
macOSのChromeやFirefoxなど一部非対応のブラウザやWindows OSのように共有先が少ない場合などまだまだ発展性のある技術です。
オマケ
こちらのコードを利用して、(SENSE:D)[https://sensed.jp] というWebメディアにシェア機能を実装しています。デザインから実装まで関わったウェブサイトです。もしよければご覧ください。
Crafts Digitallyでは、ほかにもWebサイト制作を行っております。ご興味のある方はわたくしのDMまで。
Discussion