Bubble.io Tutorial - Share Buttons einbauen [Deutsch]

Schritt-für-Schritt Anleitung, um Share Buttons für die großen Social Media Plattformen (Facebook, Twitter, LinkedIn) und für Email Sharing in Bubble einzubauen.

Chris Strobl
Chris Strobl

In diesem Video lernt ihr Share Buttons in Bubble.io einzubauen. Hierfür gibt es zwei Wege, welche jeweils Vor- und Nachteile bieten. (1) AddToAny Share Buttons Plugin (2) Eigene Share Buttons erstellen - Facebook - Twitter - LinkedIn - Email

Bubble.io Tutorial - Share Buttons in Bubble einbauen (Deutsch)

Ich habe euch für die Linkstruktur für Share Buttons ein Google Doc erstellt: https://docs.google.com/document/d/1lDCEtHpS9WnzTwstzcrceIyHf-m3FGPOOXzEn7tee-0/edit?usp=sharing


Video Transkript

Hallo, mein Name ist Chris Strobl und ich zeige euch heute wie wir Share Buttons, also Buttons  zum Teilen, ganz einfach in Bubble integrieren können. Dafür gibt es zwei Wege. Nämlich den ersten mit einem Plugin, das Plugin heißt AddToAny Share Buttons und sobald ihr dieses installiert habt, seht ihr nun in Visual Elements "Share Buttons".

Zieht das Element einfach mal rein. Die Vorteile sind: Share Buttons ist extrem einfach zu implementieren. Das heißt bei URL to Share, macht ihr einfach die URL, das heißt genau This url Adresse. Den Page Namen könnt ihr verändern und ihr könnt ganz unterschiedliche Buttons nun hinzufügen und alles wird automatisch gemacht. Weiterhin könnt ihr die Farben ändern. Ihr könnt hier eine Overwrite Icon Colors machen oder auch die nativen Farben benutzen.

Und schließlich ist sehr beliebt, es gibt mehr als 24.000 Downloads. Wir nehmen jetzt noch LinkedIn und Overwrite Icon Colors. Die Nachteile sind, dass die Icons leider nicht konfigurierbar sind und auch die Reihenfolge der Icons ist so nicht anpassbar. Und wenn wir das jetzt zentrieren, haben wir einmal die share Buttons mit dem Plugin. Ein weiterer Weg ist nun, dass wir das Ganze mit nativen Share Buttons machen und diese selber entwickeln. Hierfür erstelle ich eine Gruppe und nenne diese Gruppe "Share Buttons". In dieser Gruppe erstellen wir die vier Icons. Wir gehen auf Icon, nehmen 30px x 30px.

Und das erste Icon ist Facebook. Hier geht auch X 20, Y 20. Das zweite Icon ist Twitter. Dann LinkedIn und schließlich ein E-Mail Icon. Diese Icons triggern wir nun mit einem Workflow. Aber bevor wir das machen, habe ich etwas vorbereitet, nämlich ein Google Docs, was auch in den Shownotes zu finden ist. Nämlich, wie die Linkstruktur für die einzelnen sozialen Netzwerke ist, meine Quelle ist websiteplanet.com/webtools/sharelink. und hier könnt ihr nämlich kostenlos jederzeit einen share Link generieren lassen, ob das nun für Facebook ist; für Twitter, LinkedIn oder für E-Mail. Wenn wir uns die Link- Struktur anschauen von Facebook. Also als erster Link, dann kopieren wir das aus dem Dokument und gehen aufs Start/ edit workflow. Hierfür gibt es jetzt zwei Möglichkeiten einmal mit Navigation, Open an external website.

Oder aber ihr wollt die Webseite in einem neuen Fenster öffnen, dann nutzt ihr das Plugin Open URL in New Tab. Dafür habe ich auch schon ein Video gemacht, was ihr hier finden könnt. Wir gehen zurück in den Workflow Open an external website; kopieren unseren Link und anstatt des statischen "Links", wählt ihr "Insert dynamic data" und This  URL. Bei Facebook könnt ihr lediglich den Link teilen, Nicht auch einen Text. Wir gehen in das zweite Icon "Twitter". Start/edit workflow. Navigation. Open an external website.

Und wenn wir uns die Share-Button Struktur wieder anschauen, sehen wir jetzt, dass wir einen Link und einen Text haben. Ihr kopiert das. Ihr ersetzt Link mit this URL und bei Text schreiben wir NoCodeGermany. Hier könnt ihr quasi euren Tweet schreiben. Als drittes nun LinkedIn. Hier gab es im Jahr 2020 ein Update. Hier habe ich euch auch den Post in Stackoverflow hinzugefügt. Aktuell können wir nur einen Link in LinkedIn sharen. Ihr kopiert den Text. Navigation. Open an external website. Und nehmt wieder This URL. Schließlich E-Mail. Start/ edit workflow. Hier empfehle ich mailtolink.me

Ihr könnt hier quasi genau einfügen, was ihr machen wollt, wie ihr eine E-Mail schreiben wollt, welche Headline und welchen Text. Und könnt dann quasi euch den Code generieren lassen. Die Struktur habe ich wiederum vorbereitet. Die können ihr kopieren. Navigation. Open an external website. Und könnten uns hier einerseits dynamisch z.b. "Current User's email", wenn ihr diese vom Profi habt. Das Subject. Und schließlich auch die url im Body. Wie z.b. hier dynamisch "This  URL". Bevor wir nun in Preview gehen, positionieren wir die Gruppe noch einmal. Zentrieren das ganze horizontal. Wir gehen jetzt einmal im Preview und wir sehen, wie die unterschiedlichen Links und Texte als Share Buttons mit einem Klick verfügbar sind. Euch  steht damit die Wahl frei, ob ihr das nativ machen wollen oder mit einem Plugin.

Beide Lösungen bringen Vorteile und beide haben auch kleinee Nachteile. Ich wünsche euch weiterhin viel Erfolg und auf bald.

TutorialsPlugins