Blueskyの共有ボタンを追加した

2024-03-18 · 3 分で読了 · Hugo Bluesky ·

Bluesky 1.70

一連のポストにある通り、Bluesky 1.70にはハッシュタグ、ミュートワード、iOS/Androidの共有メニューにBlueskyを追加など様々な機能が追加された。その一つがインテントURLの追加で、https://bsky.app/intent/compose?text=...という形式のURLを使うことで予め投稿内容を入力した状態で投稿画面を表示させることができる。同様の機能は𝕏やFacebookなどにもある他、MastodonやMisskeyは外部サイトでインスタンスを選んで投稿することが可能になっている。

Clarity: ポストするテキストの変更

Clarityの標準の共有ボタンは投稿内容が記事タイトルとURLだけになっているが、一般的にはサイト名も含むと思うのでこの対応を行う。layouts/partials/share.htmlを改造してlayouts/partials/head.html にある<title>タグ生成部分をコピーする。各共有ボタンのhrefには、{{ .Title }}の代わりに{{ $title }}を記述することで$title変数に代入されたサイト名を含んだタイトルが投稿テキストとなる。

 1{{- $s := T "share_on" }}
 2{{- $params := site.Params }}
 3{{- $separator := default "|" $params.titleSeparator }}
 4{{- $title := "" }}
 5{{- if and .Title (ne (trim (lower .Site.Title) "") (trim (lower .Title) "")) }}
 6  {{- if eq .Kind "taxonomy" }}
 7    {{- $title = default .Title ( T (lower .Title) ) }}
 8  {{- else }}
 9    {{- $title = .Title }}
10  {{- end }}
11{{- end }}
12{{- if $title }}
13  {{- $title = printf "%s %s %s" $title $separator .Site.Title }}
14{{- else }}
15  {{- $title = .Site.Title }}
16{{- end }}
17<div class="post_share">
18  {{ $s }}:
19  <a
20    href="https://twitter.com/intent/tweet?text={{ $title }}&url={{ .Permalink }}&tw_p=tweetbutton"
21    class="twitter"
22    title="{{ $s }} Twitter"
23    target="_blank"
24    rel="nofollow"
25  >
26    {{ partial "sprite" (dict "icon" "twitter") }}
27  </a>
28  ...

Clarity: 共有ボタンの追加

前の記事にもあるが共有ボタンを追加する場合はlayouts/partials/share.html、layouts/partials/icons-extra.html、assets/sass/_custom.sassを編集する。icons-extra.htmlを読み込む方法などは前の記事を参照。

アイコンのSVGファイルはBlueskyの報道向けFAQからmedia kitをダウンロードできる。bluesky_media_kit_logo.svgをテキストエディターで開き、<svg>要素のviewBox属性と<path>要素のd要素をicons-extra.htmlにコピーする。bluesky_media_kit_logo.svgの<svg>要素はicons-extra.htmlの<symbol>要素に当たる。<symbol>要素には適当にIDを付ける。Clarityではfill属性は別で定義するので除いておく。

 1<svg width="0" height="0" class="hidden">
 2  ...
 3  <symbol
 4    xmlns="http://www.w3.org/2000/svg"
 5    viewBox="0 0 568 501"
 6    id="bluesky"
 7  >
 8    <path
 9      d="..."
10    />
11  </symbol>
12</svg>

アイコンの色は_custom.sassで定義する。bluesky_media_kit_logo_svgs.svgのfill属性よりカラーコードを借用する。

1.bluesky
2  svg
3    fill: #1185fe

そして、share.htmlに共有ボタンを追加する。投稿テキスト中の改行は%0Aで出来るようだ。

 1...
 2<div class="post_share">
 3  {{ $s }}:
 4  ...
 5  <a
 6    href="https://bsky.app/intent/compose?text={{ $title }}%0A{{ .Permalink }}"
 7    class="bluesky"
 8    title="{{ $s }} Bluesky"
 9    target="_blank"
10    rel="nofollow"
11  >
12    {{ partial "sprite" (dict "icon" "bluesky") }}
13  </a>
14  ...
15</div>

完成した共有ボタンがこのようになる。みんな青系好きだね。

スマホ音ゲー環境（2024/02）デレステ: LIVE Carnival 202404 Rank SS突破編成メモ

Blueskyの共有ボタンを追加した

目次

Bluesky 1.70

Clarity: ポストするテキストの変更

Clarity: 共有ボタンの追加