Fediverseの投稿を他のマストドンのインスタンスで表示するためのブックマークレットとWordPress用コード

自分が使っているマストドンのインスタンスとは異なるインスタンスでの投稿をブーストしたりするために自分が使っているインスタンスで表示するためのブックマークレットのコードは次の通り。

javascript:(function(){window.open('https://ドメイン/authorize_interaction?uri='+encodeURIComponent(document.URL));})();

このコードを基に、プラグイン「ActivityPub」 でFediverseの一部となったWordPressの記事をマストドンのインスタンスで表示させるボタンのコード。WordPressの記事ページに表示する。

次のphpコードをfunctions.phpに追加し、ウィジェットの「カスタムHTML」などに [mastodon_share_hybrid] と記述する。

シェアボタンの上に「マストドンで表示」ボタンを設置 | いしい＠試行錯誤
https://ishii00141.stars.ne.jp/20250322-1621-2080/

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 .= '<form onsubmit="return false;"><input type="text" id="mastodon-instance-input" name="domain" placeholder="Enterで入力履歴保存" style="display: none;"></form>'; // 初期状態では非表示
	$output .= '<button id="mastodon-share-button" style="width:80px; height:40px;">シェア</button>';

	$output .= '<script>
		document.getElementById("mastodon-instance-select").addEventListener("change", function() {
			const selectedValue = this.value;
			const 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() {
			const selectedInstance = document.getElementById("mastodon-instance-select").value;
			const inputInstance = document.getElementById("mastodon-instance-input").value;
			const instance = selectedInstance === "custom" ? inputInstance : selectedInstance; // "ドメイン記入"の場合は入力欄の値を使用
			const url = "' . get_permalink() . '";
			if (instance) {
				const 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');

追記（2025/4/5）：

　WordPressに設置してあった次のページに関連するコードにマストドンのインスタンスで表示するためのコードを追加した。

<div class="container">
    <textarea id="inputUrl" placeholder="変換前のURLを入力してください"></textarea>
    <textarea id="outputUrl" placeholder="変換後のURL（クリックでコピー）" readonly></textarea>
    <select id="mastodon-instance-select-c">
        <option value="">マストドンで表示</option>
        <option value="mastodon-japan.net">mastodon-japan.net</option>
        <option value="mastodon.social">mastodon.social</option>
        <option value="fedibird.com">fedibird.com</option>
        <option value="mstdn.jp">mstdn.jp</option>
        <option value="custom">ドメイン記入</option>
    </select>
    <form onsubmit="return false;">
        <input type="text" id="mastodon-instance-input-c" name="domain" placeholder="Enterで入力履歴保存" style="display: none;">
    </form>
    <button id="mastodon-share-button-c" style="width:80px; height:40px;display: none;">シェア</button>
</div>
<script>
    const inputUrl = document.getElementById('inputUrl');
    const outputUrl = document.getElementById('outputUrl');
    const instanceSelect = document.getElementById('mastodon-instance-select-c');
    const instanceInput = document.getElementById('mastodon-instance-input-c');
    const shareButton = document.getElementById('mastodon-share-button-c');

    inputUrl.addEventListener('input', function() {
        const url = inputUrl.value;
        let newUrl = url;

        const mastodonMatch = url.match(/https:\/\/([^\/]+)\/@([^\/]+)/);
        if (mastodonMatch && mastodonMatch.length === 3) {
            const domain = mastodonMatch[1];
            const userId = mastodonMatch[2];
            newUrl = `@${userId}@${domain}`;
        } else {
            newUrl = url.replace(/\/[\w\-]+\/#comment-([\w\-]+)/, '/?c=$1');
        }

        outputUrl.value = newUrl;
    });

    // 出力フォームのクリックイベントを処理
    outputUrl.addEventListener('click', function() {
        outputUrl.select();
        document.execCommand('copy');
    });

    // マストドンへシェアする共通処理関数
    function shareToMastodon(instance, url) {
        if (url) {
            const shareUrl = `https://${instance}/authorize_interaction?uri=${encodeURIComponent(url)}`;
            window.open(shareUrl, "_blank");
        } else {
            alert("変換後のURLが入力されていません。");
        }
    }

    // マストドンで表示（インスタンス選択時の処理）
    instanceSelect.addEventListener("change", function() {
        const selectedValue = this.value;

        if (selectedValue === "custom") {
            instanceInput.style.display = "inline-block"; // "ドメイン記入"が選択されたら表示
            shareButton.style.display = "inline-block";    // シェアボタンを表示
        } else if (selectedValue) {
            instanceInput.style.display = "none"; // それ以外は非表示
            shareButton.style.display = "none";    // シェアボタンを非表示
            shareToMastodon(selectedValue, outputUrl.value);
        } else {
            instanceInput.style.display = "none";
            shareButton.style.display = "none";
        }
    });

    // シェアボタンのクリックイベント（カスタムドメイン用）
    shareButton.addEventListener("click", function() {
        const instance = instanceInput.value;
        const url = outputUrl.value;

        if (instance) {
            shareToMastodon(instance, url);
        } else {
            alert("ドメインを入力してください。");
        }
    });
</script>

コメント

コメントを投稿