【Firebase】SNS共有用のDynamicLinksを手動で構築する

「ツイートする」ボタンのようなSNS共有用のリンクはFirebaseであればDynamic Linksで容易に生成が可能です。
Firebase×Flutterといえば基本的にFlutterFire(https://firebase.flutter.dev/) を使っておけば間違いはないわけですが、残念ながら2023年1月7日現在、FlutterFireのDynamicLinksはWebに非対応です。
ではWebでは使えないのかというとそんなことはなく、DynamicLinksは形式に沿って記述すれば手動で生成できます。
今回はFlutter/Dartでサンプルを作成していますが、基本的に言語関係なく同様の方法で利用可能です。

完成形

黄色枠部分を生成します。
共有すると青枠部分のような見覚えのあるフォーマットが表示されます。

参考

正直なところこの記事読まなくても公式のページ読めば十分です。
https://firebase.google.com/docs/dynamic-links/link-previews
https://firebase.google.com/docs/dynamic-links/create-manually

流れ

1. Firebaseコンソールでサブドメインを設定しておく
2. 共有用画像のURLを用意する
3. フォーマットの通りにURLを生成する
4. 日本語や#等一部記号をURLエンコードする
   ※サブドメインに指定するのは赤線部分

サンプルとか

ソースコード

パッケージなのでダウンロードして展開するか、GitHubのURLをpubspec.yamlで指定してあげれば使用できると思います。
https://github.com/esuno/manually_constructured_dynamic_link

動くサンプル(ツイートボタン)

https://esuno.info/ogp/?link=https://esuno.info/%23/experiments/dynamic_link_tweet_button&st=%E3%83%84%E3%82%A4%E3%83%BC%E3%83%88%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB&sd=%E3%80%90Firebase%E3%80%91SNS%E5%85%B1%E6%9C%89%E7%94%A8%E3%81%AEDynamicLinks%E3%82%92%E6%89%8B%E5%8B%95%E3%81%A7%E6%A7%8B%E7%AF%89%E3%81%99%E3%82%8B%E3%80%80%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB&si=https://storage.googleapis.com/esunoinfo-ogp/dynamic_link_tweet_button.png
ちなみに当該手法で生成したダイナミックリンクはこのとおりQiitaでは効かない模様。無念です