Blueskyを始めてみたので、本ブログにもシェアボタンを設置してみました。
|
今回はその紹介になります。
■【Blogger備忘録】Blueskyのシェアボタンをブログに簡単に設置する（GitHub利用）
目次[非表示]
●使用するソースコード（GitHubより）
Blueskyには公式のシェアボタンは今のところ無いようなので、GitHubで公開されているコードを使いました。
|
| リンク：GitHub bsky-share-button |
・オプション
ボタンサイズとシェアするページタイトルとURLを変更することが出来ます。
●設定方法
以下の設定はBlogger編集画面の『テーマ』>『HTMLを編集』で行います。
以下ではBloggerのHTMLを編集します。編集する前に復旧できるように必ず忘れずにHTMLのバックアップを取ってから行ってください。
また、このHTMLの編集について本ブロブおよび筆者は一切の責任を負いません。参考にされる方は全て自己責任で実施してください。
- ソースコードの設置
上記のGitHubのコードをシェアボタンを設置したい場所にコピペするだけです。
|
| GitHub bsky-share-button画面 |
簡単ですね。
- ボタンサイズの変更
ボタンサイズは上記コードの中でサイズを指定することで変更できます。
|
| GitHub bsky-share-button画面 |
- width：シェアボタンの幅
- height：シェアボタンの高さ
他のSNSの公式（純正）シェアボタンとボタンの高さを揃えるには
- 『height="20"』
だといい感じです。ボタン幅（width）はお好みでどうぞ😋。
- シェアするページタイトルとURLの変更
ボタンサイズと同様にボタンのソースコードを編集することで変更できます。
|
| GitHub bsky-share-button画面 |
- title：シェアするページタイトル
- url：シェアするURL
ちなみに私のブログでは変更していません。
- 縦方向の位置を他のシェアボタンと揃える
上記ソースコードをコピペしただけだと、他のSNSの公式（純正）シェアボタンと並べると縦方向の位置がズレてしまいます。
 |
本件に関してはHTMLの編集で対応が可能です。詳細はこちら（本ブログ内リンク）をご覧ください。
|
| リンク（本ブログ内🔗）：【Blogger備忘録】シェアボタンの縦方向の位置を揃える（inline-block要素の使用） |
●使用感
無事に設置できました😋。縦方向のボタン位置のズレも修正できていい感じです♪
|
シェアボタンを押してみるとこんな感じの投稿画面になります。
|
| Bluesky画面（PCブラウザ） |
Xのシェアボタンと同じような使い勝手ですね。
スマホだとこんな感じです。
 |
| Blueskyアプリ画面（スマホ） |
●改善要望点
今のところ特にありません😋。
●まとめ
GitHubで公開されているソースコードをコピペするだけで簡単にBlueskyのシェアボタンをブログに設置することができました。
Xと比べるといろいろとまだまだな感じのあるBlueskyですが、いつ大化けするか分からないので今後も使っていこうと思います。
