--- title: "TYPO3 Social Media Bar: Social Media Account anzeigen in toujou" url: "https://www.toujou.de/service/elementbibliothek/widgets/social-media-bar/" description: Das toujou-Element Social Media Bar ermöglicht das Auflisten mehrerer Accounts gebündelt an. ✔ Twittter ✔ Facebook ✔ Instagram ✔ LinkedIn uvm. date: 2020-11-05 modified: 2022-09-27 --- # TYPO3 Social Media Bar: Social Media Account anzeigen in toujou 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Elementbibliothek](https://www.toujou.de/service/elementbibliothek/) 4. [Widgets](https://www.toujou.de/service/elementbibliothek/widgets/) 5. [• Social Media Bar](https://www.toujou.de/service/elementbibliothek/widgets/social-media-bar/) Social Media Bar ================ Mit der Social Media Bar können Sie im Contentbereich oder Footer Ihrer Website zeigen, auf welchen sozialen Medien Sie aktiv sind. Die Icons werden dabei automatisch ausgespielt, wenn ein gültiger Link dahintersteht. [Beispielansicht](#c1008962) [Anleitung](#c1008963) [Verhalten](#c1008964) Beispielansicht ----------------- #### Social Media Bar im Contentbereich ### Social Media Bar [ ](https://www.facebook.com/toujou.typo3 "Besuchen Sie uns auf facebook") [ ](https://www.twitter.com/dfau "Besuchen Sie uns auf twitter") [ ](https://www.instagram.com/toujou.de "Besuchen Sie uns auf instagram") [ ](https://www.xing.com/companies/dfaugmbh "Besuchen Sie uns auf xing") [ ](https://mx.linkedin.com/company/dfau "Besuchen Sie uns auf linkedin") [ ](https://www.pinterest.com "Besuchen Sie uns auf pinterest") [ ](https://www.youtube.com "Besuchen Sie uns auf youtube") #### Social Media Bar im Footer [ ![](https://www.toujou.de/_assets/processed/H2gZEj-BG9f2FYsBn0SBOHsMOF-LnASeBUBR0yczXWk/q:85/w:433/h:130/fn:Y3NtX1NvY2lhbF9NZWRpYV9CYXJfRm9vdGVyX2EzNTY4MGUwMTU:t/cb:a26793fd24c6415b5deb3ee564e8e107c1b383cf/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTBfU29jaWFsX01lZGlhX0Jhci9Tb2NpYWxfTWVkaWFfQmFyX0Zvb3Rlci5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/10_Social_Media_Bar/Social_Media_Bar_Footer.png) --- Anleitung --------- Ganz gleich, ob Sie die Social Media Bar im Contentbereich einer Seite oder im Footer verorten möchten: In beiden Fällen müssen Sie ein neues Inhaltselement erstellen. Bevor die Social Media Bar zur Entfaltung kommt, sollten die Verlinkungen auf Ihre entsprechenden Profile vorhanden sein. Einstellbar sind diese in der Modulleiste unter »toujou Theme« im Reiter [Social Media](https://www.toujou.de/service/toujou-setup/social-media/). [ ![](https://www.toujou.de/_assets/processed/aEehGQuM2ggOU3d9OzlewAIoUwoPGdSbbdpNqW8oQlY/q:85/c:1920:1080:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX1NvY2lhbF9NZWRpYV9CYXJfYW5sZWdlbl9fNTY2YzE3OWRkOA:t/cb:3f4fcdf2c183e8c6aff3cedf7ba99f0a5fee4e72/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTBfU29jaWFsX01lZGlhX0Jhci9Tb2NpYWxfTWVkaWFfQmFyX2FubGVnZW5fLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/10_Social_Media_Bar/Social_Media_Bar_anlegen_.png) Social Media Bar anlegen ------------------------ - Klicken Sie auf den Button **+Inhalt**, um ein neues Element im Contentbereich der Seite anzulegen. - Wählen Sie im Reiter *Widgets* das Element **Social Media Bar** aus. Anschließend öffnet sich ein neues Pop-up Fenster. [ ![](https://www.toujou.de/_assets/processed/gzLr1Gb_eX4G7U_0dPW0uY0tHHsPQkZxikozeETD2I0/q:85/c:1920:1080:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX0VpbnN0ZWxsdW5nZW5fdm9ybmVobWVuXzIwN2QzN2QzMzU:t/cb:3834da3686f58b2cf4c907410412bb268e754f97/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTBfU29jaWFsX01lZGlhX0Jhci9FaW5zdGVsbHVuZ2VuX3Zvcm5laG1lbi5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/10_Social_Media_Bar/Einstellungen_vornehmen.png) Einstellungen vornehmen ----------------------- - Setzen Sie nach Wunsch eine Überschrift im Feld »*Headline*« ein. - Um andere Verlinkungen, als in den Einstellungen des »Themes« anzugeben, wechseln Sie im Dropdown-Menü »*Source*« von »Theme« zu »Custom« und tragen die gewünschten Verknüpfungen ein. - **Speichern** Sie die Einstellungen. --- ### Element Design für mehr Individualität In diesem Element können Sie zudem das Erscheinungsbild ganz leicht mit dem *Element Design* mit einem Klick ändern. Mit der Auswahl von Standard Design, Primary Design, Secondary Design oder Umgekehrtes Design wechseln Sie Hintergrundfarbe des Elements und ggfs. die Hintergrundfarbe der Headline oder Pfeile bzw. des Textbereichs entsprechend der in den [Theme-Settings definierten Farbe](https://www.toujou.de/service/toujou-setup/farben-festlegen/). ![](https://www.toujou.de/_assets/processed/XEc5X-Qx0dzfOl3J4GUEueIei3HUGvlKhRfby_OPkOs/q:85/c:789.15789473684:200:fp:0.46421052631579:0.5/rt:force/w:432/h:109/fn:Y3NtX2VsZW1lbnRfZGVzaWduX2F1c3dhaGxfbWVkYXRzdV82NTk4MTFkYjhi:t/cb:b70ef9624e2ccbfba77c8a4e802f3ee405748758/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzAyX1RlYXNlcl9lbGVtZW50cy9DaW5lbWFfVGVhc2VyXzMzLTY2L2VsZW1lbnRfZGVzaWduX2F1c3dhaGxfbWVkYXRzdS5wbmc) - Mit Klick auf das **Element Design** im Reiter Allgemein / General erhalten Sie im Dropdown-Menü die Wahl für eine individuelle Designfarbe. - Wählen Sie aus den Optionen Standard, Primary, Secondary sowie Umgekehrt die gewünschte Option aus. - Speichern Sie die Änderungen im Element, damit sie sichtbar werden. --- Verhalten --------- Die Social Media Bar lässt sich im redaktionellen Teil einer Seite neben anderen Text- oder Bilderelementen einbinden. Möglich ist aber auch die individuelle Gestaltung des Footers mit einer bestimmten Anzahl von Icons der einzelnen Social Media Kanäle. Beachten Sie bei der Einbindung externer HTML-Inhalte, wie die Verlinkung zu Social Media Kanälen, dass Sie die [Consent-Richtlinien](https://www.toujou.de/blog/consent-management-fuer-externe-inhalte/) befolgen. Um einen Rahmen um diese Element zu erhalten, müssen Sie auch eine Überschrift in das entsprechende Feld einsetzen. In toujou verbindet die Social Media Bar standardmäßig Ihre jeweiligen Profile mit den im [toujou-Setup](https://www.toujou.de/service/toujou-setup/social-media/) eingestellten Links. Falls Sie andere Links zu sozialen Medien wünschen, beispielsweise für eine Kampagnen-Seite, können Sie im Feld »s*ource*« mit der Option »*custom*« die gewünschten Links modifizieren. Die Farbe des Rahmens, der Überschrift und Verlinkungen (ohne Mouseover) ändern Sie im Dropdown-Menü »*Element Design*«. Verknüpfte Themen ----------------- [Tutorials](https://www.toujou.de/tutorials/), die mit diesem Element in Verbindung stehen. [toujou settings](https://www.toujou.de/service/toujou-setup/social-media/) ---