Ich habe letztes Jahr einen Facebook Like Button zu meiner Website hinzugefügt, weil ich eine schnelle Möglichkeit suchte, das Engagement zu steigern. Leute zum Kommentieren oder Teilen aufzufordern, erschien mir zu viel. Ein einfacher Like-Button war einfacher.
Zuerst habe ich ein kostenloses Plugin ausprobiert, aber es hat mein Layout zerstört. Dann habe ich mit dem Einbettungscode von Facebook herumgespielt. Es hat funktioniert, aber erst nach viel Herumprobieren.
Schließlich habe ich SeedProd verwendet. Es hat weniger als fünf Minuten gedauert und ich musste keinen Code anfassen.
In diesem Leitfaden zeige ich Ihnen beide Methoden, damit Sie diejenige auswählen können, die zu Ihrer Einrichtung passt.
TL;DR: So fügen Sie einen Facebook-Like-Button hinzu
- SeedProd verwenden: Ziehen Sie einen Facebook-Like-Button per Drag & Drop überall auf Ihre Website, ohne Code.
- Manuelle Methode: Betten Sie den Like-Button mit Code aus den Entwicklertools von Facebook ein.
- Beide Methoden erleichtern es Besuchern, Ihre Inhalte zu mögen und Ihre Facebook-Seite zu vergrößern.
Warum einen Facebook-Like-Button zu WordPress hinzufügen?
Das Hinzufügen eines Like-Buttons zu Ihrer WordPress-Website kann dazu beitragen, das Engagement auf Ihrer Facebook-Seite zu steigern. Es ist auch eine großartige Möglichkeit, Benutzer zu ermutigen, Ihre Inhalte in ihren Facebook-Newsfeeds zu teilen, was dazu beiträgt, neue Leute auf Ihre Website zu locken.
Darüber hinaus kann das Einbetten eines Facebook-Like-Buttons auf Ihrer Webseite dazu beitragen, Ihre Social-Media-Follower zu vergrößern und Ihre Online-Community im beliebtesten sozialen Netzwerk aufzubauen. Infolgedessen können Sie die Bekanntheit Ihrer Produkte oder Dienstleistungen steigern und letztendlich die Konversionen erhöhen.
Derzeit bietet WordPress keine integrierte Lösung zum Hinzufügen eines Facebook-Buttons für Likes, daher müssen Sie ein WordPress-Plugin installieren oder den Facebook-Like-Button-Code manuell hinzufügen. Vor diesem Hintergrund zeigen wir Ihnen unten, wie Sie beides tun können.
So fügen Sie mit SeedProd einen Facebook-Like-Button in WordPress hinzu
🔹 Dies ist der einfachste Weg, einen Facebook-Like-Button zu Ihrer WordPress-Website hinzuzufügen. Sie verwenden den Drag & Drop-Builder von SeedProd, um ihn überall zu platzieren, ohne Code.
Zuerst verwenden wir ein WordPress-Plugin, um einen Facebook-Like-Button zu Ihrer Website hinzuzufügen. Wir verwenden SeedProd, das beste WordPress Website- und Page-Builder-Plugin.
SeedProd macht es super einfach, flexible Seitenlayouts in WordPress zu erstellen, einschließlich benutzerdefinierter Landing Pages, Homepages, Sidebars, Header, Footer und mehr. Es verfügt über einen Drag & Drop-Builder und zahlreiche WordPress-Blöcke, um Ihre Website einfach ohne Code oder CSS anzupassen.
Neben der Möglichkeit, vollständig angepasste Landing Pages zu erstellen, können Sie mit SeedProd komplette WordPress-Themes von Grund auf erstellen, und Sie müssen keine einzige WordPress-Theme-Datei anfassen.
Für diese Methode zeigen wir Ihnen, wie Sie das Facebook Like Block-Widget von SeedProd verwenden, um einen Like-Button praktisch überall auf Ihrer WordPress-Website anzuzeigen.
SeedProd installieren und aktivieren
Um zu beginnen, installieren und aktivieren Sie das SeedProd-Plugin auf Ihrer WordPress-Website.
Wenn Sie dabei Hilfe benötigen, finden Sie unsere Dokumentation zur Installation von SeedProd. Diese Anleitung führt Sie durch die Installation des Plugins und die Aktivierung Ihres Lizenzschlüssels.
Hinweis: SeedProd verfügt über eine kostenlose Version, mit der Sie eine einfache Landingpage ohne Code erstellen können. Für diese Anleitung verwenden wir SeedProd Pro wegen seiner Pro WordPress-Blöcke.
Als Nächstes müssen Sie entscheiden, wie Sie SeedProd auf Ihrer Website verwenden möchten. Sie können es verwenden, um einzelne WordPress-Seiten zu erstellen oder ein brandneues WordPress-Theme zu erstellen, um Ihr aktuelles Website-Design zu ersetzen.
Für diese Anleitung zeigen wir Ihnen, wie Sie einen Facebook-Like-Button zu einer Landingpage hinzufügen. Navigieren Sie dazu von Ihrem WordPress-Dashboard zu SeedProd » Landing Pages , um zu beginnen.
Wählen Sie eine vorgefertigte Vorlage
Auf dieser Seite können Sie eines der vorgefertigten Landingpage-Designs von SeedProd auswählen, z. B. Coming Soon, Wartung, Login oder 404.
Alternativ können Sie eine benutzerdefinierte Landingpage erstellen, indem Sie eine Landingpage-Vorlage verwenden, die Sie an Ihre Bedürfnisse anpassen können. Wir werden diese Option verwenden, also klicken Sie auf die Schaltfläche Neue Landingpage hinzufügen .
Auf dem nächsten Bildschirm sehen Sie eine Bibliothek professioneller Landingpage-Vorlagen, die Sie mit dem Drag-and-Drop-Builder von SeedProd anpassen können. Klicken Sie auf eine der Registerkarten oben, um die Designs nach Seitentyp zu filtern, einschließlich:
- Wartungsmodus (Coming Soon)
- Wartungsmodus
- 404-Seite
- Verkäufe
- Webinar
- Lead Squeeze
- Danke
- Anmelden
Sobald Sie ein Design gefunden haben, das Ihnen gefällt, bewegen Sie die Maus darüber und klicken Sie auf das Häkchen-Symbol. Für diese Anleitung verwenden wir die Vorlage Tasty Squeeze Page.
Als Nächstes sehen Sie ein Popup, in dem Sie Ihrer Seite einen Namen geben können. SeedProd gibt der Seite automatisch eine URL, aber Sie können diese später ändern, wenn Sie möchten.
Wenn Sie mit den Details zufrieden sind, klicken Sie auf die Schaltfläche Speichern und Seite bearbeiten .
Fügen Sie den Facebook-Like-Block hinzu
Nachdem Sie eine Vorlage ausgewählt haben, gelangen Sie zum visuellen Editor von SeedProd, wo Sie mit der Anpassung Ihres Landingpage-Designs beginnen können. Er ist einfach zu bedienen, mit Blöcken und Abschnitten auf der linken Seite und einer Live-Vorschau auf der rechten Seite.
Klicken Sie einfach auf ein beliebiges Element in Ihrer Vorschau, um den Inhalt an Ihre Bedürfnisse anzupassen.
Sie können beispielsweise auf einen beliebigen Text- oder Überschriftenblock klicken, um die Überschrift und die Beschreibungen zu ändern.
Wenn Sie dies tun, öffnet sich auf der linken Seite ein Einstellungsfenster, in dem Sie den Inhalt, die Schriftgröße, die Ausrichtung und mehr ändern können.
Sie können auch die Vorlagenbilder austauschen und durch Ihre eigenen ersetzen. Klicken Sie dazu auf ein beliebiges Bild und wählen Sie dann das Papierkorbsymbol im Einstellungsfenster aus, um es zu entfernen.
Von dort aus können Sie ein neues Bild von Ihrem Computer oder Ihrer WordPress-Mediathek hochladen.
Jetzt kennen Sie die Grundlagen der Navigation im Page Builder. Sehen wir uns an, wie Sie Ihrer Landingpage einen Facebook-Like-Button hinzufügen.
SeedProd bietet zahlreiche WordPress-Blöcke, die Sie in Ihr Landingpage-Design einfügen können. Sie machen Ihre Seite nicht nur ansprechender, sondern eignen sich auch hervorragend zum Generieren von Leads und für Social-Media-Follower.
Mit den Facebook-Blöcken von SeedProd können Sie beispielsweise Ihre Facebook-Seite, einzelne Beiträge, Kommentare und sogar einen Like-Button einbetten.
Um den Facebook Like-Button-Block zu Ihrer Seite hinzuzufügen, ziehen Sie ihn einfach aus dem Bereich "Erweiterte Blöcke" auf Ihre Landingpage.
Von dort aus können Sie das Design und Aussehen des Like-Buttons mit den Dropdown-Menüs im Block-Einstellungsbereich ändern. Sie können beispielsweise das Button-Layout ändern, um Ihre Button-Anzahl, eine Like-Box und mehr anzuzeigen.
Sie können auch die Schriftgröße ändern und die Option aktivieren, einen Facebook Share-Button daneben anzuzeigen.
Zusätzlich gibt es Optionen, um eine benutzerdefinierte URL anstelle Ihrer aktuellen Landingpage anzuzielen und das Permalink-Format in einen Pretty Link zu ändern.
Im Tab Erweitert können Sie den Abstand und die Sichtbarkeit des Like-Buttons auf Mobil- und Desktop-Geräten anpassen und ihn ohne Code animieren.
Hinweis: Sie können Ihre Facebook App ID eingeben, indem Sie zu SeedProd » Einstellungen gehen.
Passen Sie Ihr Landingpage-Design weiter an, bis Sie mit dem Aussehen zufrieden sind. Sie können beispielsweise das Farbschema und die Typografie der Seite im Bereich Globale Einstellungen bearbeiten.
Vergessen Sie nicht, oben rechts auf die Schaltfläche Speichern zu klicken, um Ihre Änderungen zu sichern.
Konfigurieren Sie Ihre Seiteneinstellungen
Da die Seite, die wir erstellen, ein Opt-in-Formular enthält, müssen wir als Nächstes einen E-Mail-Marketing-Service verbinden. Klicken Sie dazu auf den Tab Verbinden oben und suchen Sie Ihren E-Mail-Marketing-Anbieter in der Liste.
Befolgen Sie von dort die Anweisungen auf dem Bildschirm, um Ihre E-Mail-Liste zu verbinden.
Sie können auch auf den Tab Seiteneinstellungen oben klicken, um Ihre Landingpage-Einstellungen anzupassen. Auf diesem Bildschirm können Sie den Namen und die URL Ihrer Landingpage ändern und Ihre On-Page-SEO-Einstellungen für Suchmaschinen konfigurieren.
Zum Beispiel können Sie im Abschnitt SEO-Einstellungen All in One SEO, das beste WordPress SEO-Plugin, verwenden, um die Open-Graph-Einstellungen für Ihre Seite zu konfigurieren.
Diese Metadaten helfen Facebook, Informationen über Ihre Seite zu sammeln, einschließlich des Vorschaubilds, des Seitentitels, der Beschreibung und des Autors.
Darüber hinaus ermöglichen die Seiteneinstellungen das Hinzufügen benutzerdefinierter Skripte, wie z. B. Ihres Facebook-Pixels oder Google Analytics-Tracking-Codes.
Weitere Details finden Sie in unserer Dokumentation zu Landingpage-Einstellungen.
Veröffentlichen Sie Ihre Änderungen
Sobald Ihre Seite genau so aussieht, wie Sie es möchten, können Sie sie auf Ihrer WordPress-Website live schalten. Klicken Sie dazu auf den Dropdown-Pfeil der Schaltfläche Speichern und wählen Sie Veröffentlichen.
Jetzt können Sie Ihre Landingpage besuchen und Ihren Facebook Like-Button in Aktion sehen.
So fügen Sie einen Facebook Like-Button manuell mit Code hinzu
🔹 Wenn Sie kein Plugin verwenden möchten, zeigt Ihnen diese Methode, wie Sie den Code für den Facebook Like-Button direkt in WordPress kopieren und einfügen. Es sind ein paar zusätzliche Schritte erforderlich, aber es funktioniert auf jeder Website.
Eine weitere Möglichkeit, einen Facebook Like-Button zu Ihrer WordPress-Website hinzuzufügen, ist die Verwendung von benutzerdefiniertem Code. Diese Methode erfordert jedoch, dass Sie HTML-Code direkt in WordPress kopieren und einfügen. Daher empfehlen wir sie nur für Personen, die mit der Bearbeitung von Code vertraut sind.
Dennoch werden wir das WPCode-Plugin verwenden, um das Hinzufügen von benutzerdefiniertem Code zu WordPress zu vereinfachen.
Zuerst müssen Sie die Seite „Like Button“ auf der Meta for Developers-Website (developers.facebook.com) aufrufen und nach unten zum Abschnitt „Like Button Configurator“ scrollen.
Geben Sie als Nächstes Ihre Facebook-Seiten-URL in das Feld „URL to Like“ ein. Dies sollte die Seite sein, die Sie mit dem Facebook Like-Button verknüpfen möchten.
Passen Sie anschließend einfach die Einstellungen an, um das Layout und die Größe des Like-Buttons auszuwählen. Sie sehen auch eine Vorschau des Like-Buttons.
Wenn Sie mit der Vorschau zufrieden sind, klicken Sie auf die Schaltfläche Get Code.
Nun sehen Sie ein Popup mit 2 Code-Snippets und 2 verschiedenen Tabs namens JavaScript SDK und iFrame. Klicken Sie auf die JavaScript-Option.
Dies ist das, was Sie zu Ihrer WordPress-Website hinzufügen müssen, um den Like-Button anzuzeigen.
Wenn Sie diese Code-Snippets direkt zu Ihrem WordPress-Theme hinzufügen, besteht die Gefahr, dass Ihre Website beschädigt wird. Außerdem könnten die Code-Snippets überschrieben werden, wenn Sie Ihr Theme aktualisieren.
Eine einfachere Möglichkeit, diesen Code hinzuzufügen, ist das WPCode-Plugin. Es ermöglicht Ihnen, Code-Snippets auf Ihrer Website einzufügen und zu verwalten, ohne Ihre Theme-Dateien direkt zu bearbeiten.
Zuerst müssen Sie das WPCode-Plugin installieren und aktivieren.
Nach der Aktivierung des Plugins navigieren Sie in Ihrem WordPress-Dashboard zu Code Snippets » Header und Footer.
Kopieren Sie nun das erste Code-Snippet von Facebook und fügen Sie es nach dem <body>-Tag in die header.php-Datei Ihres WordPress-Themes ein.
Kopieren Sie einfach den Code, fügen Sie ihn in den Abschnitt „Body“ ein und klicken Sie auf die Schaltfläche Änderungen speichern.
Als Nächstes müssen Sie das zweite Code-Snippet kopieren und auf Ihrer WordPress-Website einfügen, um den Facebook Like-Button anzuzeigen.
Navigieren Sie dazu in Ihrer WordPress-Administration zu Code Snippets » + Snippet hinzufügen oder klicken Sie auf die Schaltfläche Neu hinzufügen.
Auf dem nächsten Bildschirm können Sie ein Snippet aus der vordefinierten Bibliothek auswählen oder einen neuen benutzerdefinierten Code hinzufügen.
Klicken Sie also auf die Option „Add Your Custom Code (New Snippet)“ und wählen Sie die Schaltfläche Snippet verwenden.
Geben Sie Ihrem benutzerdefinierten Code dort einen Namen und fügen Sie das zweite Code-Snippet von Facebook in den Abschnitt „Code Preview“ ein.
Stellen Sie sicher, dass Sie auf das Dropdown-Menü „Code Type“ klicken und „HTML Snippet“ auswählen.
Wählen Sie als Nächstes im Abschnitt „Insertion“ aus, wo der Facebook Like-Button angezeigt werden soll. Sie können ihn zum Beispiel vor dem Inhalt Ihres Blogbeitrags erscheinen lassen.
Klicken Sie dazu auf das Dropdown-Menü „Location“ und wählen Sie die Option „Insert Before Content“ im Abschnitt „Page-Specific“.
Klicken Sie abschließend auf die Schaltfläche „Save Snippet“ und schalten Sie den Schalter von Inaktiv auf „Active“.
Besuchen Sie nun einen beliebigen Blogbeitrag, um Ihren Facebook Like-Button vor dem Beitragsinhalt zu sehen.
FAQs zum Hinzufügen eines Facebook Like-Buttons
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie einen Facebook Like-Button zu Ihrer Website hinzufügen. Vielleicht gefällt Ihnen auch dieses Tutorial zum Einbetten von Facebook-Events in WordPress.
Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
