Twitter(X)の移住先として注目を集めているSNS「Bluesky」が1.70にアップデートし、徐々に機能が全盛期のTwitterに近づいてきました。よいことですね。
ハッシュタグ、ミュートワードの機能が追加されたことで多くの人から歓迎の声が上がっていますが、Web開発者としてはやはりWeb共機能の実装が大きいトピックです。ブログ運営している方なんかはSNSへのリンクをつけるのが当たり前なので、この流れには乗っておきたいところですね。
基本は公式に書いてある通りですが、本記事でも作り方を解説します。
Bluesky共有ボタンの実装方法
【Wordpress用】コピペフリーコード
細かいことはすっ飛ばしてとにかくコードだけほしいということであれば、以下のコードをコピペして使ってください。ボタンのデザインはお使いの環境に合わせて適宜いじってください。
<div class="share-button share-bluesky">
<a class="share-bsky" href="https://bsky.app/intent/compose?text=<?php echo urlencode(get_permalink()); ?> <?php the_title(); ?>" target="_blank" rel="noopener noreferrer">
<span>Post</span></a>
</div>.post div.share-button {
display: inline-block;
width: 24%;
min-width: 150px;
text-align: center;
margin: 0 2px;
}
div.share-button a {
width: 100%;
border-radius: 4px;
position: relative;
display: inline-block;
text-decoration: none;
margin: 0 0.2em 0.2em 0;
white-space: nowrap;
cursor: pointer;
}
div.share-button a.share-bsky {
background: #0085ff;
color: #fff;
padding: 0.6em 0;
}解説
Blueskyのポスト画面へは以下のURLで飛べます。
https://bsky.app/intent/compose?text=(ポストしたい文字列)なので、a要素のhrefにこれを指定してあげるだけです。
ブランドカラー、ロゴマークについて
Blueskyのブランドカラーは#0085ffです。
ロゴマークは使用について現在明確な記載がありませんので（私が発見できていないだけかもしれません）、本記事での紹介は控えます。今のところ公式に配布はされていないはずです。
