【Bubble開発】開いているページのリンクをSNSで共有する機能の実装方法（LINE／X／Facebook対応）

Bubbleで作成したアプリやサービスを多くの人に広めるには、SNS共有機能の導入が非常に有効です。

この記事では、開いているページ（＝Current Page URL）をLINE、X（旧Twitter）、Facebookで簡単に共有できるボタンの実装方法を解説します。

実装イメージ動画はこちら！

実装手順

1. LINE共有用ボタン：Open an external websiteでURLを指定
2. X共有用ボタン：同様にURLを指定して投稿画面へ誘導
3. Facebook共有ボタン：HTMLエレメント内でボタンをコーディング
4. Current Page URL を埋め込んで動的なURL共有を実現

実装方法

LINEで共有する方法

BubbleのWorkflowで以下のように設定

• イベント：When Button LINE is clicked
  
• アクション：Open an external website
  
• URL（Destination）：

https://social-plugins.line.me/lineit/share?url=This URL&from=line_scheme

This URL の部分には Current Page URL を挿入すればOKです。

 新しいタブで開くように「Open in a new tab」もONにしておきましょう。

X（旧Twitter）で共有する方法

同じく「Open an external website」を使います。

• イベント：When Button X is clicked
  
• アクション：Open an external website
  
• URL（Destination）：

https://x.com/intent/post?text=&url=This URL

※text=に文言を入れれば、共有時のテキストも指定可能です。

Current Page URL を挿入すれば、今見ているページがそのままXに投稿されるようになります。

Facebookで共有する方法

Facebookの場合はBubble標準の「Open an external website」ではうまく共有ができないため、HTMLエレメントを使ってカスタム実装します。

HTMLコードの例

Current Page URL の部分には、BubbleのDynamic Dataで現在のURLを挿入してください。

レイアウト調整ポイント

• HTMLエレメントの Width・Height でボタンサイズを調整
• 見た目を非表示にしたい場合は、Opacity: 0% に設定して透明ボタンとして使うことも可能です（画像③参照）
  

補足：Current Page URLの挿入方法

Bubbleで「現在開いているページのURL」を取得するには、以下のDynamic Dataを使います。

Current Page URL

これを上記の各SNSの共有URLの「This URL」部分に埋め込めば、その時開いているページをSNSへ共有できるようになります。

まとめ

SNS	実装方法	備考
LINE	Open an external website	URLの末尾に &from=line_scheme を追加
X（旧Twitter）	Open an external website	text= パラメータで文言も指定可能
Facebook	HTMLエレメント + buttonタグ	CSSでスタイル調整／透明化も可能

SNS共有機能を導入することで、サービスの拡散力を大きく高めることができます。
プロジェクトのプロモーションや口コミ拡散にぜひ活用してください！