ブログにBlueskyのシェアボタンを置いたよ

できたもの

記事ページの下にあるBlueskyのマークのボタンをクリックすると、Blueskyに遷移してシェアできます。クリックすると、Blueskyにログインしている場合、Blueskyの画面に遷移して投稿できます👇

作り方

Bluesky公式ドキュメントを参考にしました。

https://bsky.app/intent/compose?text=以降にシェアしたい情報を入れます。

ボタンはReactでこんな感じに書きました（一部省略しています）。

export const BlueskyShareButton = ({ url, title }: Props) => {
  return (
    <Link
      href={`https://bsky.app/intent/compose?text=${encodeURI(
        title ? [title, siteName].join(' - ') : siteName
      )}${url}`}
      aria-label="Bluesky"
    >
      <div title="Blueskyでシェア"></div>
    </Link>
  )
}
 
export default BlueskyShareButton

urlはページのURL、titleはページ名です。
ページ名とサイト名、URLをシェアできるようにしました。画像などはBluesky側が取得してくれます。

Wordpressや各種ブログサービスでは実装が異なると思います。困ったら公式ドキュメントを見ましょう。

お役に立てれば幸いです💕