BubbleでSNSシェアボタンの実装は簡単？便利なプラグインを使用した実装方法を解説！

こんにちは。ファンリピートの森田です！
前職では営業マンでしたが、今年からシステム開発の業務に携わらさせて頂いております。

ノーコードを触るのは初めてですが、当社のチュートリアルを学習して、基本的な使い方や新しく学びえたことがありましたので、初心者の方や興味がある方は是非取り組んでみてください。

プログラミングを書かないノーコードツールBubbleで、今回はSNSシェアボタンの実装を行なっていきます！

Bubbleとは？

URL:https://bubble.io/blog/content/images/2020/09/Logo-with-clearspace.png

・コードを書かずにアプリを作ることができる

一般的なWebサービスやWebアプリの開発では、プログラミングコードを書くといったイメージがありますが、ノーコードツールBubbleでは名前の通り、ノーコードで開発できるサービスとなっています。また、クラウドプラットフォームというサイト上でアプリケーションを構築することができるので、インターネットがあればいつでもどこでもアクセスすることができるため、チームで連携してアプリを作ることができます。

SNSシェアボタンとは？

SNSシェアボタンは押下するとさまざまなSNSへ投稿をシェアできる機能です。

Bubbleには便利なプラグインが多数開発されていますが、今回はAddToAny Share Buttons
を使用して実装していきます。

いざ、実装！！

プラグインのインストール


Search for a plugin…に　AddtoAny Share Buttonsと入力して検索し、installボタンをクリック

デザインタブに戻り、Visual Elementsを確認して下さい。







Share Buttonsというプラグインが追加されています。

シェアボタンを配置する

シェアボタンを配置して下さい。
デフォルトでは、メール、フェイスブック、ツイッターが表示されていますね


Add a button for …のようなボタンを追加していくとシェアボタンを増やしていくことができます。

しかし、あまりに多くを表示しているとかえって見辛いですよね！

その時は下から２番目にあるAdd a generic button for more servicesというところにチェックを入れてみてください。

プラスマークのようなものが表示されるようになりました。

プレビューで確認してみましょう。

これであれば余計なスペースを使うことなくユーザーが使用したいシェアボタンを選ぶことができますね

まとめ：BubbleでSNSシェアの実装は簡単に行うことができます

今回は、Bubbleで投稿をシェアする機能について実装を行いました。

便利なプラグインで用意されている機能を使用した実装でしたが、Bubbleにはまだまだたくさん便利なプラグインがあります。

今後もこういったBubbleを使った機能について紹介をしていきます。