シェアボタンの上に「マストドンで表示」ボタンを設置

マストドンの投稿を別のインスタンスで表示するためのブックマークレットがあるのだけど、それを使ったシェアボタンがこのサイトにも欲しくて、 #Gemini に頼んで作ってもらった。今は動作確認だけを行って、詳細な分析はしていない。

まずは functions.phpに追加するコード

function mastodon_share_hybrid() {
	$instances = array(
		'mastodon-japan.net' => 'mastodon-japan.net',
		'mastodon.social' => 'mastodon.social',
		'fedibird.com' => 'fedibird.com',
		'mstdn.jp' => 'mstdn.jp',
		'custom' => 'ドメイン記入' // 自由記入欄を表示するための選択肢
	);

	$output = '<select id="mastodon-instance-select">';
	$output .= '<option value="">マストドンで表示</option>';
	foreach ($instances as $value => $label) {
		$output .= '<option value="' . $value . '">' . $label . '</option>';
	}
	$output .= '</select>';

	$output .= '<input type="text" id="mastodon-instance-input" placeholder="ドメインを入力" style="display: none;">'; // 初期状態では非表示
	$output .= '<button id="mastodon-share-button" style="width:80px; height:40px;">シェア</button>';

	$output .= '<script>
		document.getElementById("mastodon-instance-select").addEventListener("change", function() {
			var selectedValue = this.value;
			var inputField = document.getElementById("mastodon-instance-input");
			if (selectedValue === "custom") {
				inputField.style.display = "inline-block"; // "ドメイン記入"が選択されたら表示
			} else {
				inputField.style.display = "none"; // それ以外は非表示
			}
		});

		document.getElementById("mastodon-share-button").addEventListener("click", function() {
			var selectedInstance = document.getElementById("mastodon-instance-select").value;
			var inputInstance = document.getElementById("mastodon-instance-input").value;
			var instance = selectedInstance === "custom" ? inputInstance : selectedInstance; // "ドメイン記入"の場合は入力欄の値を使用
			var url = "' . get_permalink() . '";
			if (instance) {
				var shareUrl = "https://" + instance + "/authorize_interaction?uri=" + encodeURIComponent(url);
				window.open(shareUrl, "_blank");
			} else {
				alert("インスタンスを選択または入力してください。");
			}
		});
	</script>';

	return $output;
}
add_shortcode('mastodon_share_hybrid', 'mastodon_share_hybrid');

その上で、ウィジェットの「投稿SNSボタン上」に「カスタムHTML」を追加し、表示設定を「チェック・入力したページで表示する」にして「ページ」の「投稿」だけをチェックする。タイトルは空欄にして、内容には次のコードを記入する。

[mastodon_share_hybrid]

いろいろと追加注文形式で #Gemini に作ってもらったため、もしかしたら余分なコードがあるかもしれないが、後で確認する。

ちなみに、初めて使ったインスタンスでは警告文が一時的に表示された。ブックマークレットでも警告文が表示されるのかは確認してない。二度目からは警告文が表示されなかったので、確認できないかもしれない。