ノーコード PR

【Bubble】AddtoAny Share Buttonsの使い方を徹底解説

addtoany-share-buttons
記事内に商品プロモーションを含む場合があります

Bubbleで開発したWebアプリケーションにSNS共有ボタンを設置したい場合は、Bubbleの公式プラグインである「AddtoAny Share Buttons」を利用するのが良いでしょう。

本記事ではそんなAddtoAny Share Buttonsの使い方について徹底解説していきます。

今すぐノーコード案件を探す!

【公式HP】https://crowdtech.jp/

  • 90%以上がフルリモート案件
  • 週1〜3日程度の副業向け案件が多い
  • 自身のライフスタイルに合った働き方ができる
  • エージェントによる手厚いサポートを受けることができる
  • 案件提案から契約締結、勤怠管理まで全てオンラインで完結

\ 最短60秒で登録可能! /
無料会員登録
案件を探す

AddtoAny Share Buttonsプラグインをインストール

AddtoAny Share Buttons

はじめに「AddtoAny Share Buttons」プラグインをインストールする必要があります。

左側メニュー「Plugins」→「+Add plugins」をクリックし、「AddtoAny Share Buttons」と検索すると上の画像の通りプラグインが表示されるので「Install」ボタンを押下しインストールしましょう。

以降の手順は「AddtoAny Share Buttons」プラグインがインストールされていることを前提としております。

Bubbleアプリへのシェアボタンの設置

users

プラグインをインストールした状態であれば、「Design」タブに「Share Buttons」エレメントが表示されているはずなので、表示したい箇所にドラッグ&ドロップしましょう。

Share Buttons

仕組みとしてはチェックを入れたSNSの共有ボタンが表示されるというシンプルなものとなっております。デフォルトでは「Email」「Facebook」「Twitter」のシェアボタンが設置されているはずです。

「URL to share」はユーザーに投稿してもらいたいリンクで動的な値も設定できます。

例えば「This url」を選択した場合はアイコンをクリックしたアプリ内のページへのリンクを共有することができます。

パラメーター「Page name」はソーシャルメディアの投稿に表示される名前となります。

また、「Add a generic button for more services」にチェックを入れると、SNSアイコンリストの最後にプラスアイコンが追加され、他のSNSによる共有も可能となります。

「Overwrite icon colors」にチェックを入れると、単色となってしまいますがアイコンの色を上書きできます。

ここまでの内容を踏まえて設定を行いPreviewから動作確認をしてみましょう(^^)

以下の画像はTwitterの共有ボタンを押下した際の挙動となります。※すでにTwitterにログインしている状態での挙動です。

SNS共有ボタン

また、プラスアイコンをクリックすると、その他SNSアイコンが表示され、押下すると該当するSNSに共有することができるはずです。

TwitterとFacebookのSNS共有機能のみ実装できれば要件を満たすという場合は、ここまでの手順で以上となります。お疲れ様です!

LINEのシェアボタンをデフォルトで表示させたい場合は次章の手順を実施する必要があります。

LINEの共有ボタンをデフォルトで設置する方法

line-share-button

日本向けのサービスを開発するのであれば、LINEの共有ボタンは欠かせません。ということで本章ではLINEの共有ボタンをデフォルトで設置する方法について解説していきます。

LINE共有ボタンの作成

まず、LINE Social Pluginsにアクセスし「LINEで送る」ボタンを設置するを開きます。

すると以下の画面に遷移するかと思うので、必要な情報を入力していきましょう。

LINE Developers

URLには「https://アプリ名.bubbleapps.io/version-test」と入力します。Preview画面の「?debug_mode=true」の部分を削除したURLです。

なお、本番環境になったら再度URLを変更する必要があるので注意してください。

ボタンサイズは他のSNS共有ボタンに合わせるためにも「小」にしておくと良いでしょう。

設置値を入力して「LINE Social Plugins ガイドラインに同意します」にチェックを入れるとコードが表示されるのでコピーします。

LINE共有ボタンの設置

以下の画像の通り、HTML要素をドラッグ&ドロップして、Appearanceに<i></i>と入力し、間に先ほどコピーした値を貼り付けましょう。

HTML要素

Preview画面でLINEのアイコンがデフォルト表示されることを確認できるはずです。

最後に他のSNSアイコン群とLINEアイコンをGroup化しておくと良いでしょう(^^)

LINEの共有ボタンをデフォルトで表示するにはHTML要素を別途埋め込む必要がある。

AddtoAny Share Buttonsの使い方|まとめ

addtoany-share-buttons

ここまでBubbleで開発したWebアプリケーションにSNS共有ボタンを設置する際に便利なプラグイン「AddtoAny Share Buttons」の使い方について解説してきました。

「AddtoAny Share Buttons」を活用することで、少ない開発工数でSNS共有機能の実装可能なので、是非本記事の内容を参考にしてWebアプリに導入してみてください(^^)

ここまで記事を読んでいただきありがとうございました。当ブログでは他にもBubbleによるWebアプリ開発のTipsについて解説しているので、気になる記事がないか確認いただけると幸いです。

今すぐノーコード案件を探す!

【公式HP】https://crowdtech.jp/

  • 90%以上がフルリモート案件
  • 週1〜3日程度の副業向け案件が多い
  • 自身のライフスタイルに合った働き方ができる
  • エージェントによる手厚いサポートを受けることができる
  • 案件提案から契約締結、勤怠管理まで全てオンラインで完結

\ 最短60秒で登録可能! /
無料会員登録
案件を探す

bubble-box
【完全解説】Boxプラグインを用いてBubbleのストレージ容量を拡張する方法ノーコードツール「Bubble」のストレージ容量はFreeプランで0.5GB、Personalプランで10GBと、お世辞にも多くないので...
stripe
【Bubble】Stripeプラグインを用いたクレカ決済の実装手順Bubbleで開発したWebアプリにStripeによる決済処理を導入するには?本記事ではStripeを活用した通常課金・返金処理、仮売上と請求確定、サブスクリプション処理とその解約処理の実装方法について解説しております。...
こちらの記事もおすすめ!

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です