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

Tech

できたもの

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

Blueskyでシェア

作り方

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

Action Intent Links | Bluesky
Authors, websites, and apps can use action intent links to implement "Share on Bluesky" buttons, or similar in-app actions. Logged-in users will be directed to the corresponding action view in the Bluesky app (mobile or web app) with context pre-populated. Logged-out users will be prompted to sign-in or create an account first. Following the link does not automatically result in the action; the logged-in user still needs to confirm the action.
docs.bsky.app
Action Intent Links | 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 や各種ブログサービスでは実装が異なると思います。困ったら公式ドキュメントを見ましょう。

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

Share