X（旧Twitter）やFacebookには、サイトやブログに設置するための公式の投稿（ポスト、シェア、ツイート）ボタンが用意されている。
しかし、Blueskyには今のところ公式ボタンは存在しない模様。
というわけで自作するしかない。
一応、Blueskyの開発情報、技術仕様等は、 Bluesky Documentation に書かれている。 現在英語版のみで日本語版はない。
Blueskyへの投稿に関する仕様を探すと Action Intent Links に書かれていた。 「Blueskyで共有」ボタンを作る例が書かれている。
仕様はXに非常に似ている。
例えば以下のようなリンクを張る。
このHTMLコードは以下の通り。
<a target="_blank" href="https://bsky.app/intent/compose?text=example">Blueskyへ投稿</a>
エンドポイントは https://bsky.app/intent/compose で、パラメータ（引数）は text のみ。
一般的には、text にページのタイトルやURLを指定する。 パラメータはURLエンコードする。
書き込める文字数の制限は300文字まで。
このリンクをクリックまたはタップすると、パソコンの場合は使用しているブラウザで投稿画面が表示される。 iPhone（iOS）、Androidなどのスマホは、Blueskyの公式アプリをインストールしている場合、そのアプリが起動し、投稿画面が表示される。
この例では「example」という文字を書き込む。
Bluesky公式サイトには様々なところに蝶（チョウ）のアイコンがあり、基本的にどれもSVGで表示されている。
そこから拝借しても怒られることはなさそうだが、他のSNSのように公式に配布しているデータがないか探した。
上記の Action Intent Links には、Font Awesome（いろいろなアイコンを配布しているサイト）にBlueskyのロゴがあると書かれている。
以下はFont Awesome版。
さらにその文章の続きには「Press FAQ」ページの下部のリンクを参照するよう書かれている。 指示通りに探すと、 Bluesky Media Kit - Google ドライブ にデータがあった。
ここにある「Bluesky logo」のデータをダウンロードする。
以下はBluesky公式版。
Blueskyで使われている蝶のアイコンをいくつか調べると青色（ブルー）の指定がまちまちで統一されていない。 上記メディアキットに含まれる青色は「#1185fe」。 その他「#0085ff」や「rgb(10,122,255)」などがある。
テキストのリンクでは分かりにくいし地味なので、Blueskyのロゴを使って投稿ボタンを作る。 また、JavaScriptでページのタイトルとURLを取得するようにする。
以下は実際の表示例。
まず、ロゴのSVGにリンクを張る。 HTMLは以下の通り。
<a id="ex_bluesky_button" target="_blank" href="https://bsky.app/"><svg width="32" height="32" viewBox="0 0 568 501" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M123.121 33.6637C188.241 82.5526 258.281 181.681 284 234.873C309.719 181.681 379.759 82.5526 444.879 33.6637C491.866 -1.61183 568 -28.9064 568 57.9464C568 75.2916 558.055 203.659 552.222 224.501C531.947 296.954 458.067 315.434 392.347 304.249C507.222 323.8 536.444 388.56 473.333 453.32C353.473 576.312 301.061 422.461 287.631 383.039C285.169 375.812 284.017 372.431 284 375.306C283.983 372.431 282.831 375.812 280.369 383.039C266.939 422.461 214.527 576.312 94.6667 453.32C31.5556 388.56 60.7778 323.8 175.653 304.249C109.933 315.434 36.0535 296.954 15.7778 224.501C9.94525 203.659 0 75.2916 0 57.9464C0 -28.9064 76.1345 -1.61183 123.121 33.6637Z" fill="#1185fe"/> </svg></a>
SVGのタグ（要素）をHTMLに直接書かず、ロゴのSVGファイルを別途用意してリンクを張っても良い。 以下は、ロゴのファイルが bluesky_logo.svg の場合。
<a id="ex_bluesky_button" target="_blank" href="https://bsky.app/"><img src="bluesky_logo.svg" width="32" height="32" alt="Bluesky"></a>
ページのタイトルとURLを取得する方法はいろいろあるが、例えばJavaScriptでは以下のように記述する。
<script>
(function(){
var text = encodeURIComponent(document.title.substring(0, 150) + ' ' + document.URL);
document.getElementById('ex_bluesky_button').setAttribute('href', 'https://bsky.app/intent/compose?text=' + text);
})();
</script>
ロゴの後に記述する。 ロゴの前に記述する場合は、DOMContentLoaded などイベントの後に発動するようにする。
制限の300文字を超えることはあまりないと思うが、超えそうな場合は調整する。 URLを削ってしまうとアクセスできないので、この例ではタイトルを150文字以内に制限している。