ソーシャルボタン（シェアボタン）のフォーマットまとめ

公開 2024/03/13 22:03

最終更新 2025/10/06 22:43

こんなのはとっくにどなたかまとめているはずですが。
いわゆるSNSに投稿するためのボタン（リンク）のフォーマットを、自分用メモを兼ねて置いておきます。

■X（旧Twitter）

https://twitter.com/share?url=（シェアしたいテキスト）&text=（シェアしたいURL）&hashtags=（ハッシュタグ）&via=（任意のアカウント）

※「twitter.com」を「x.com」にしても同じ。

■Facebook（Meta）

https://www.facebook.com/share.php?u=（シェアしたいテキスト）

■はてなブックマーク

https://b.hatena.ne.jp/entry/（シェアしたいURL）

■LINE

https://line.me/R/msg/text/?（シェアしたいテキスト）

■note

https://note.com/intent/post?url=（シェアしたいURL）

■タイッツー

https://taittsuu.com/share?text=（シェアしたいテキスト）

■BlueSky

https://bsky.app/intent/compose?text=（シェアしたいテキスト）

MastodonやMisskeyのような分散型ソーシャルネットワークの場合、サーバー（インスタンス）毎にアドレスが変わるので、サーバー（インスタンス）のヘルプとか設定も参照。

■Mastodon（下はmstdn.jp）

https://mstdn.jp/share?text=（シェアしたいテキスト）

■Misskey（下はMisskey.io）

https://misskey.io/share?text=（シェアしたいテキスト）

シェアしたいテキストの中に改行を入れるなら「%0A」で。

逆転裁判攻略
http://www.ne.jp/asahi/game/gyakusai/index.html

がシェアしたいテキストなら、例えばタイッツーさんだと、「逆転裁判攻略」を16進数文字コードにエンコード（%E9%80%86%E8%BB%A2%E8%A3%81%E5%88%A4%E6%94%BB%E7%95%A5）して、

https://taittsuu.com/share?text=%E9%80%86%E8%BB%A2%E8%A3%81%E5%88%A4%E6%94%BB%E7%95%A5%0Ahttp://www.ne.jp/asahi/game/gyakusai/index.html

これでOK。

ただしBlueSkyは「%0A」が効かない（半角スペースになってしまう？）ようです。2024年3月現在。

JavaScriptで『「ページタイトル」（改行）「URL」』というテキストを取得しシェア用のURLにするなら、以下みたいな感じで。

HTML：

<div class="social">
	<p><a id="x-social-button" href="#" target="_blank"><img src="img/social_x.svg" alt="Xでシェアする" width="88"></a></p>
	<p><a id="facebook-social-button" href="#" target="_blank"><img src="img/social_facebook.svg" alt="facebookでシェアする" width="88"></a></p>
	<p><a id="hatena-social-button" href="#" target="_blank"><img src="img/social_hatena.svg" alt="hatenaでシェアする" width="88"></a></p>
	<p><a id="line-social-button" href="#" target="_blank"><img src="img/social_line.svg" alt="Lineでシェアする" width="88"></a></p>
	<p><a id="bluesky-social-button" href="#" target="_blank"><img src="img/social_bluesky.svg" alt="Blueskyでシェアする" width="88"></a></p>
	<p><a id="taittsuu-social-button" href="#" target="_blank"><img src="img/taitsu.svg" alt="タイッツーでシェアする" width="88"></a></p>
	<p><a id="misskey-social-button" href="#" target="_blank"><img src="img/social_misskey.svg" alt="misskey.ioでシェアする" width="88"></a></p>
	<p><a id="mastodon-social-button" href="#" target="_blank"><img src="img/social_mastodon.svg" alt="mastodon.jpでシェアする" width="88"></a></p>
	<script src="js/social.js"></script>
</div>

JavaScript（js/social.js）

// 順にX, facebook, HatenaBookmark, Line, bluesky, タイッツー, misskey, mastodon

// SNSの名前　適当に変更
const socialName = 'hoso_boso',

// ハッシュタグ　適当に変更（日本語等はencodeURIでエンコード）
hashTag = encodeURIComponent('ライブアライブ'),

webAddress = encodeURIComponent(location.href),
webTitle = encodeURIComponent(document.title),

newUrl = [
`x.com/share?url=`+webAddress+`&text=`+webTitle+`&via=`+socialName,
`www.facebook.com/share.php?u=`+webAddress,
`b.hatena.ne.jp/entry/`+webAddress,
`line.me/R/msg/text/?`+webTitle+`%0A`+webAddress,
`bsky.app/intent/compose?text=`+webTitle+`%20`+webAddress+`%20%23`+hashTag,
`taittsuu.com/share?text=`+webTitle+`%0A`+webAddress+`%20%40`+socialName+`%20%23`+hashTag,
`misskey.io/share?text=`+webTitle+`%0A`+webAddress+`%20%40`+socialName+`%20%23`+hashTag,
`mstdn.jp/share?text=`+webTitle+`%0A`+webAddress+`%20%40`+socialName+`%20%23`+hashTag,
];

// DOMContentLoadedでHTML読み込み後から処理開始
document.addEventListener("DOMContentLoaded", () => {
	// document.querySelectorAllでclass="social"以下取得
	const socialList = document.querySelectorAll('.social>p>a');
	// forEachで新しいアドレス設置処理
	socialList.forEach((n,index) => {
		socialList[index].href = `https://`+newUrl[index];
	});
});