《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エレメントを配置して、③で取得したコードをペーストする。