《Bubble》SNS共有機能の実装方法（プラグイン有/無）

プラグインを使用する場合

まずはプラグインをインストールします。

今回使用するのはBubble公式が出している「AddtoAny Share Buttons」プラグインです。

SNS共有機能の実装（プラグイン有）

基本的な設定

　①「Share Buttons」エレメントの配置。

　②「Share Buttons」エレメントの設定。

📌「Share Buttons」の特徴

▪ デフォルトで「Email」 「Facebook」 「X(旧Twitter)」が表示されており、チェックをつけたSNSが追加で表示される。

▪ 「URL to share」ではユーザーが共有したいリンクを動的な値として設定できる。

▪ 「Overwrite icon colors」ではSNSアイコンの色を任意の色に変更できる。しかし全部同じ色になる。

▪ LINEへの共有がない。

「URL to share」の使用例

　設定としてはユーザーが共有したいリンクを入力するための「input」を配置して、「URL to share」にその値を設定するだけ。

あとは「input」にURLを入力して、共有したいSNSのアイコンを押せば各SNSでリンクを共有するためのウィンドウが表示される。

「Overwrite icon colors」の使用例

　チェックをつけると「Icons color」という項目が表示されるので、任意の色を設定する。

SNS共有機能の実装（プラグイン無）

プラグインを使用しない場合は、シェアボタンを作成するためのHTMLコードを各SNSのサービスページから取得してくる方法があります。

例として X と LINE での共有を紹介します。

X（旧Twitter）

　① Twitter Publish にアクセスして、下にスクロールして「X Buttons」を選択する。

　②「Share Button」を選択する。

　③HTMLコードが作成されるので「Copy Code」する。

　④BubbleエディターでHTMLエレメントを配置して、③で取得したコードをペーストする。

※シェアする内容をカスタマイズしたい場合は以下のパラメータを用いる。

引用：https://www.howtonote.jp/twitter/button/index4.html

LINE

　①LINE Social Plugins アクセスし、「LINEで送る」ボタンを設置するを選択する。

　②ボタンのスタイルを設定し、「LINE Social Plugins ガイドラインに同意します」にチェックをつけるとコードが作成されるのでコピーする。

⚠️「URLを設定」の値は、シェアしたいページのPreview画面URLから

「?debug_mode=true」を削除したものを入力する

　③BubbleエディターでHTMLエレメントを配置して、②で取得したコードをペーストする。

⚠️ date-url="URL"の値をThis URLに変えておく

　まとめ

　以上二つのパターンで解説しました。

プラグイン有りの場合は値の設定を含め実装が簡単。

プラグイン無しの場合は各サイトにアクセスし、コードを取得する手間があります。

しかし、多少の手間はありますが実装自体は簡単で、配置やパラメータによるシェア内容のカスタマイズなどの自由度も高いため、プラグイン無しでの実装のほうが使いやすいと感じました。是非用途に合わせてお試しください！