Es gibt eine Unmenge an Plugins, um Social Media Icons in die Sidebar zu integrieren. In diesem Artikel erfährst du, wie du in weniger als fünf Minuten und ohne Programmierkenntnisse Icons zu deinen sozialen Profilen in die WordPress Sidebar integrierst.
Ich hatte eine lange Zeit im Header-Bereich dieses Blogs eine Grafik, die auf meinen Twitter-Account sowie den RSS-Feed von media-affin.de verlinkte. Vor wenigen Wochen hatte ich diese aus meinem Theme entfernt. Nur zwei Tage später wurde ich dann gleich von mehreren Personen gefragt, ob es hier denn keinen RSS-Feed gäbe. Um meine Leser glücklich zu stimmen, habe ich nun sowohl RSS-Feed als auch meine sozialen Profile gut erkennbar in der Sidebar verlinkt.
Warum sollte ich kein Plugin benutzen?
Gleich vorab: Plugins verlangsamen den WordPress Blog nicht pauschal. Die Ladezeit verlangsamt sich aber dann, wenn ein Plugin JavaScript- und CSS-Dateien einbindet. Es sind dann mehr Requests zum Server nötig und die zu übertragende Datenmenge steigt auch. Fügt das Plugin nur Code ein, ist eine Reduktion der Seitenladezeit eher nicht zu messen.
Ein weiterer Faktor ist die Sicherheit. Es gibt Plugins, die nicht mehr gepflegt werden und eventuell Sicherheitslücken aufweisen.
Aus diesen Gründen soll für die Integration der Social Media Buttons in die Sidebar hier keines der 14.500 WordPress-Plugins zum Einsatz kommen.
So geht’s: Social Media Buttons ohne Plugin in die Sidebar einfügen
Social Media Buttons ohne Plugin in die Sidebar einfügen
Als erstes solltet du dir überlegen, welche Social Media Buttons du einsetzen willst. Ich habe mich für Google+, Twitter, Facebook und einen Button für den RSS-Feed entschieden. Erstellst du die Icons nicht selbst, achte darauf, dass alle gewünschten Netzwerke im Icon-Set deiner Wahl vorhanden sind. Ich habe mich für das Free Social Media Icon Set von brankic1979 entschieden und sie mit Photoshop eingefärbt.
Nun geht es an die Integration in die Blog-Sidebar. Ab hier dürft ihr die Zeit stoppen – 5 Minuten sind das Ziel ;)
- Wähle im WordPress-Backend in der linken Seitennavigation Design –> Widgets aus.
- Ziehe aus den Verfügbaren Widgets das Text-Modul per Drag & Drop an die Stelle in der Sidebar, an der du die Social Media Buttons anzeigen möchtest.
- Das Modul öffnet sich automatisch und es kann ein Titel sowie der Text eingegeben werden. Hier im Blog habe ich den Titel „Stay in Touch“ gewählt, der einzufügende Code wird im Folgenden erläutert.
<div id="social-buttons"> <a href="https://plus.google.com/110939034921992786986" rel="me"> <img title="Social Media, SEO und WordPress Tipps via Google+" alt="Google+ Button" src="/wp-content/themes/destyle/img/googleplus-button.png" width="45" height="45" /> </a> <a href="http://twitter.com/media_affin" rel="me"> <img title="Social Media, SEO und WordPress Tipps via Twitter" alt="Twitter Button" src="/wp-content/themes/destyle/img/twitter-button.png" width="45" height="45" /> </a> <a href="https://www.facebook.com/domimedia" rel="me"> <img title="Social Media, SEO und WordPress Tipps via Facebook" alt="Facebook Button" src="/wp-content/themes/destyle/img/facebook-button.png" width="45" height="45" /> </a> <a href="http://feeds.feedburner.com/media-affin"> <img title="Social Media, SEO und WordPress Tipps im RSS-Feed" alt="Feed Button" src="/wp-content/themes/destyle/img/rssfeed-button.png" width="45" height="45" /> </a> </div>
In den Zeilen 2, 5, 8 und 11 wwerden die Links zu deinen Social Profilen hinterlegt. Die URLs musst du natürlich durch deine eigenen ersetzen. Das Attribut „rel“ sagt aus, dass es sich um eine Seite über dich handelt (me) und Suchmaschinen dem Link nicht folgen sollen (nofollow). In den Zeilen 3, 6, 9 und 12 muss der Pfad zur Bild-Datei ausgetauscht werden. Die Werte für width und height müssen ebenfalls angepasst werden. Im Widget-Fenster nun noch rechts unten auf Speichern klicken – fertig.
Abschließend fehlt noch etwas CSS, um die Buttons zu positionieren. Dazu im Backend Design und Editor auswählen. Standardmäßig sollte hier schon die style.css geladen werden. Hier in meinem Blog habe ich lediglich einen Abstand nach oben sowie zwischen den Buttons eingefügt. Dieser Code kann an beliebiger Stelle in der style.css eingetragen werden:
#social-buttons a img {
margin: 10px 12px 0 0;
}
Eventuell werden auf deinem Blog neben den Buttons kleine Unterstriche dargestellt. Diese kommen daher, dass Browser Links standardmäßig unterstrichen darstellen. Wird das bei dir im CSS noch nicht überschrieben, ergänze einfach folgenden Code in der style.css:
#social-buttons a {
text-decoration: none;
}
Fazit
Wie du siehst ist das Integrieren von Social Media Buttons in die Sidebar deines WordPress-Blogs nicht schwierig. Vielleicht konnte dir dieses Tutorial den Einsatz eines Plugins sparen. Lass es mich in den Kommentaren wissen. Hast du es in 5 Minuten umsetzen können?
Hallo Dominik
Hab es damals auch in 5 Minuten geschafft. Habe sogar auf die Ikons verzichtet, um beim Seitenaufbau noch ein paar Zehntelsekunden zu sparen. :-)
Pingback: Die Woche in Links (24/13) |
Hallo Dominik,
ich habe die Social-Media-Buttons nach deiner Anleitung eingefügt. Allerdings habe ich das Problem, das die Buttons nicht nebeneinander, sondern untereinander angezeigt werden. Wie kann ich dieses Problem lösen?
Hi Martin,
in deinem Blog sehe ich die Buttons nebeneinander. Hast du es hinbekommen oder setzt du wieder ein Plugin ein?
Versuche mal, der CSS-Klasse noch ein float: left mitzugeben, also dann so:
#social-buttons a img {
margin: 10px 12px 0 0;
float: left;
}
Hast du auch überprüft, ob du genug Platz hast, alle nebeneinander darzustellen?
Hallo Dominik,
leider funktioniert es bei mir nicht, es erscheint immer nur ein Text, mit Link, aber kein Bild.
Liebe Grüße, Sofie
Habe das gleiche Problem
Hi Sofie, hi Marko,
dann stimmen die Pfade zu euren Bildern nicht. Überprüft diese Angabe und passt den Bilderpfad im Widget entsprechend an, dann klappt das :-)
Hi Sofie,
ich sehe die Logos korrekt dargestellt im Blog.
Der Text mit Link, den du siehst, ist der Text aus dem Alt-Attribut. Wenn das Bild nicht angezeigt wird, ist es entweder nicht vorhanden oder der Pfad ist falsch. Wenn du magst, kann ich dir gerne helfen, einfach über Google+ oder Facebook anschreiben.
Pingback: Gibt es DIE perfekte Sidebar? : : media-affin.de
Hey Dominik, ich habe deine Anleitung befolgt und es hat super funktioniert. Nun würde ich gerne die Social Buttons zentrieren, bekomme es leider nicht hin. Mache ich es mit folgenden Code:
#social-buttons a img {
padding-left: 15px;
}
Es passiert jedoch nichts. Kannst du mir vielleicht weiterhelfen? Ist es wirklich egal wo ich den Code platziere?
Beste Grüße, David
Hi David,
mit deiner CSS-Anweisung sagst du, dass alle Bilder, die verlinkt sind und im Container mit der ID social-buttons liegen, einen Innenabstand von 15px auf der linken Seite haben.
Was du brauchst ist stattdessen:
#social-buttons a img {
text-align: center;
}
Wo du den Code platzierst ist egal, ja. Das ist reines HTML und kann überall ausgegeben werden.
Ich hoffe, dass ich dir helfen konnte.
Lieber Dominik,
super tipp. hat sofort hundertprozentig geklappt. danke.
Viele Grüße
Ich danke dir!! Ich hab es solang probiert und hab’s nicht hinbekommen. Jetzt endlich mit deiner Anelitung geht es! Super!
Hallo Dominik,
eine schöne Anleitung. Nur wird bei mir auf der Startseite alles so angezeigt wie es sein soll. Wenn ich jedoch auf einen Beitrag klicke (weiterlesen), werden nur noch die Alt-Tags angezeigt, also keine Images. Das muss doch irgendwie mit der URL zusammenhängen?!?
Danke an alle für das Feedback :-)
@Sebastian
Hast du einen Link für mich? Ich kann mir das gerne mal anschauen, wahrscheinlich aber nicht vor dem nächsten Sonntag.
Ich teile deine Vermutung, dass es an der URL liegen muss. Woran genau es liegen könnte bzw. an welcher Stelle da ein Fehler auftritt, kann ich dir aber leider nicht sagen, ohne es gesehen zu haben. Was aber auf jeden Fall funktioniert ist, wenn du einen absoluten Pfad angibst.
Danke toller tipp. Habe nur die alt und title ausgetauscht.
herzliche grüße aus den Schwarzwald
Hallo Dominik,
ist es auch möglich die Buttons in den Header zu bekommen? Dafür den ganzen DIV-Container in der header.php einfügen oder ist es prinzipiell auch möglich den Container im Widget zu lassen, und die Buttons dann so zu positionieren, dass sie im HEader angezeigt werden?
Hi Constantine,
das ist reiner HTML-Code und prinzipiell überall eingefügt werden, also auch in der header.php. Das ist auch die sauberere Lösung. Du kannst die Buttons natürlich auch in der Sidebar einfügen und dann mit CSS woanders positionieren. Warum man das aber tun sollte verstehe ich nicht, das ist kein schöner Code.
YEAh DANKE Dominik
ich habe es geschafft !!!! vielen Dank
leider haben all meine Bilder einen kleinen schwarzen rahmen… weißt du wie ich den einfach wegbekomme?
grüßle
Dani
Hi Dani, freut mich, wenn du mit Hilfe des Tutorials die Social Buttons in die Sidebar bekommen hast :-)
Den Rahmen bekommst du weg, in dem du in deiner CSS-Datei folgendes ergänzt:
#social-buttons a img {
border: none;
}
Außerdem hast du noch die title-Attribute von mir bei deinen Buttons hinterlegt, das solltest du auch noch anpassen.
Hat super geklappt, auch ohne CSS. DANKE! Und ja ca 5 Minuten. ;)
Vielen Dank für diese Anleitung. Ich hab fast nicht dran geglaubt, aber es hat funktioniert und sieht genauso aus, wie ich es haben wollte. Spitze!
Viele Grüße,
Astrid
Moin,
vielen Dank für den Artikel.
Vor allen Dingen auch, dass du den Code gepostet und erklärt hast.
Einige vergessen das seltsamerweise.
Du hast mich gerettet! Ich hab tagelang rumgesucht,wie ich die Teile reinkrieg, und hier ist die absolut perfekte und umsetzbare Lösung.
Okay, es hat bei mir etwas länger gedauert, aber einfach weil ich die entsprechenden Links erst suchen und kopieren musste und eben aufpassen musste, dass ich sie richtig einfüge. Suuper! Danke!
Hallo Dominik,
vielen herzlichen Dank! Nach stundenlanger Recherche hast du eine Lösung geboten, die relativ einfach (auch wenn ich länger als fünf Minuten gebraucht habe) umzusetzen ist.
Vielen Dank!
Hm…ich verwende ein Theme, dort können zusätzliche CSS Einträge direkt in den Theme-Options eingetragen werden. Aber egal was ich probiere, die Buttons werden in der Sidebar untereinander statt nebeneinander und mit ca. 100px Abstand angezeigt. Woran könnte es liegen?
@Markus
Bei mir erscheinen die Social Media Buttons in deiner Sidebar wie sie sollen.
Habe es jetzt doch noch geschafft – damit sind aus den 5 Minuten deutlich mehr geworden und ich musste den CSS-Code leicht ändern, falls noch jemand Probleme mit Theme und dem Beispiel-Code hat, hier ist meine Lösung:
#my-buttons img {
float: left ! important;
margin: 3px 3px 0 0 ! important;
Den html-code habe ich noch erweitert. (neues Fenster öffnen, no follow und ein CSS-Effekt):
In Chrome wird bei Maus-hover übrigens der Titel angezeigt, in Firefox leider nicht.
Hallo Dominik,
tausend DANK für die Erläuterung. Ich tapse recht unbedarft durch die WP-Gestaltungsmöglichkeiten. Deine Ausführung hat mir geholfen. Nur würde ich gern den Schatten um die Button wegmachen wollen. Wie schaff ich das noch?
Vielen DANK nochmals!
Hi Manjana,
der Schatten ist bei mir in den Grafiken integriert. Du musst also die Grafiken bearbeiten oder andere Buttons nutzen.
Hallo Dominik,
danke für die Anleitung! Sehr einfach zu verstehen und umzusetzen, selbst für mich ;-)
Ich habe aber auch das Problem mit dem Schatten um die Buttons herum. Und die sind definitiv nicht auf den Grafiken selbst. Habe es einmal mit GIF-Grafiken probiert, dann mit PNGs. Aber es befinden sich immer kleine graue Schatten um die weißen Buttons, die so natürlich vom anderen weißen Hintergrund hervorstechen.
Habe bislang keine Lösung gefunden und die Buttons deshalb bislang nicht eingebaut.
Wenn Du noch einen Tipp hast, wäre ich sehr dankbar dafür.
Viele Grüße und schöne Feiertage,
Heiko
Hi Heiko,
freut mich, dass du mit diesem Tutorial dein Anliegen umsetzen konntest!
Ein Schatten kann nur in der Grafik selbst eingebunden sein oder über CSS generiert werden.
1) in der Grafik
Überprüfe in Photoshop (evtl. durch Hinzufügen einer weißen Hintergrundebene), ob wirklich kein Schaden vorhanden ist.
2) durch CSS
Überprüfe, ob Bilder und/oder Links in der style.css oder durch ein Plugin ein Schatten zugewiesen wird.
Wie gesagt, hier bei mir sind die Schatten in der Grafik selbst vorhanden. Die CSS-Anweisung oben erzeugt keinen Schatten.
Wünsche dir auch noch frohe Ostern!
Hallo Dominik,
danke für Deine schnelle Antwort, zumal Ostern ist.
Dann werde ich mal die CSS-Datei durchsuchen und wahrscheinlich fündig werden.
Viele Grüße, nochmals danke und alles Gute,
Heiko
Hi,
ich bin grade dabei mir einen neuen Blog zu erstellen und in dafür von blogger zu WordPress umgestiegen. Bei Blogger war alles so einfach und WordPress stellt mich an einigen Stellen echt auf die Probe, zumal ich absolut keine Ahnung von irgendwelchem Programmierspaß habe :D
Die Anleitung hier hat es aber sogar mir Dummi möglich gemacht die Buttons (okay, okay, vorerst einen) zu integrieren.
Vielen Dank für die tolle und wirklich simple Anleitung.
Liebe Grüße
Julia
Hi Julia,
danke für dein Feedback. Freut mich, wenn ich helfen konnte!
Hallo ;) Dankend bin ich auf diese Website gestoßen um social Media buttons besser zusammen fügen zu können. Allerdings mache ich schon seit einer Stunde rum- die Bilder werden nicht angezeigt. Was stimmt denn mit meinem Pfad nicht bzw was ist eigentlich der Pfad?Wo nehme ich ihn her? Ich bin wirklich nicht sehr wissend in diesem Bereich und hoffe sehr, dass sie mir weiterhelfen können?
Liebe Grüße
Hi nephtyis,
wir hatten ja schon auf Facebook gequatscht und das Problem gelöst. Für alle anderen hier auch noch die Lösung:
Lade die Buttons über die Mediathek hoch und wähle rechts unten beim Linkziel „Mediendatei“ aus. Dann bekommst du ausgegraut den Pfad angezeigt, den kopierst du dir einfach.
Toll! Danke! Das habe sogar ich geschafft!
Sabienes
Hi,
super Sache vielen Dank.
Ein Problem. Der Abstand zwischen den Buttons ist mir zu klein. Wenn ich aber den Eintrag in
#social-buttons a img {
margin: 10px 12px 0 0;
}
anpasse passiert nichts. Ich habe alle Werte mal angepasst und geändert. Leider nichts.
Wie gehe ich vor?
Vielen Dank.
Marc
Hi Marc,
dazu musst du den zweiten Wert erhöhen, also beispielsweise margin: 10px 20px 0 0;
Derzeit sehe ich diesen Code bei den Social Media Buttons in deiner Sidebar aber auch gar nicht. Bist du sicher, dass du ihn in der richtigen CSS-Datei gespeichert und diese auch zum Server hochgeladen hast?
Hallo Dominik,
sehr gute Anleitung! Thanx!
Aber bei mir werden die Button leider nur auf der Startseite angezeigt. Weisst du woran das liegen könnte?
Greetz
Olli
Hi Olli,
du arbeitest mit relativen Pfaden, auf allen Unterseiten ist also der Link zum Bild falsch. Füge im Code den absoluten Pfad ein, dann funktioniert es.
Hallo! Vielen Dank für die super Anleitung! Es funktioniert alles, bis auf den E-mail Button. Hättest du da vielleicht noch einen Tipp für mich?
Liebe Grüße, Jessica
Hallo Dominik,
danke für deine tolle Anleitung. Hat direkt geklappt. Ich bin ein absoluter Neuling und habe noch eine Frage: Welchen Befehl muss ich denn eingeben, damit meine verlinkten Seiten in einem anderen Fenster geöffnet werden?
Und ich würde auch gern eine E-Mail Option einfügen. Wie muss der Code da aussehen? Bzw. auf was verlinke ich denn dann??
Lieben Dank im Voraus für deine Hilfe, du warst auf jeden Fall schon meine Rettung!
Kathia
Bei mir hat es leider nicht geklappt,
wird in meiner secondary sitebar nicht angezeit (da wo es eigentlich hin soll). Nur im Footer1 und dann wird das logo auf die volle breite des themes gestreckt :-/….
Ohne Link kann ich dazu nichts sagen. Überprüfe nochmal, ob du im Backend wirklich die richtige Sidebar ausgewählt hast.
Wenn sich die Inhalte dann breiter im Frontend dargestellt werden als sie sollten, würde ich anhand deiner Beschreibung auf unsauberen Code des Templates tippen.
@Jessica
Danke für dein positives Feedback! Was funktioniert denn beim E-Mail-Button nicht?
@Kathia
Auch dir danke ich für das Lob!
In einem neuen Fenster öffnet sich der Link zu den Seiten, indem du in den a-Tag noch target=“_blank“ ergänzt.
Bei der Mail-Adresse änderst du den href-Wert zu href=“mailto:kathia@mailadresse.de“
Ich hoffe, dass ich dir helfen konnte!
Hallo Dominik,
auch von mir noch mal ganz lieben Dank für den Tipp und die Anleitung!!!
Ein Lichtblick bei der umständlichen Suche nach der Lösung ;-)
Und schnell ging’s auch noch.
Viele Grüße & schönes Wochenende
Caro
Pingback: So fügst du in deine Sidebar Social Media Icons ein – auch ohne Plugins | Social Me. Social U.
Hallo Dominik,
danke für Deine Anleitung, hat bei mir super geklappt.
Ich fände es schön, wenn jeweils ein anderes Icon (mit anderem Farbschema) angezeigt wird, wenn man mit der Maus über ein Icon fährt.
Dafür habe ich die Links mit einer transparenten Grafik verlinkt und den Links dann jeweils die verschiedenen Icons als background-image zugeordnet.
Funktioniert im Prinzip auch, leider bekomme ich die background-images nicht richtig positioniert. Kannst Du mir sagen, was ich CSS-technisch machen muss, um die background-images genau auf die transparente Grafik plaziert zu bekommen?
Hi Andre,
google einfach mal nach CSS-Sprites. Das ist die beste Lösung. Gibt natürlich auch noch andere Wege – kommt auf deinen Code drauf, wie du den jetzt aufgebaut hast.
Hallo Dominik,
vielen Dank für die Anleitung. Leider erscheinen hinter den buttons die Links noch mal als Schatten. Das scheint auch der Grund zu sein, dass, wenn ich den Abstand zwischen den buttons vergößere, der letzte nach unten rutscht.
Ich wäre für jede Idee sehr dankbar.
herzlicher Gruß
Frauke
Hi Frauke,
mit welchem Browser bist du denn unterwegs? Bei mir sieht nämlich alles prima aus, ich sehe auch keinen „Schatten“. Wenn du die Abstände zwischen den Buttons vergrößern willst, ohne dass der letzte umbricht, gebe dem letzten Button ein margin: 0. Dann bekommst du ein paar Pixel mehr Platz.
Danke für den hilfreichen Bericht und die super Anleitung. Ich blogge mit wordpress.com und da kann man ja nur die vorgegebenen Plugins nutzen. Habe schon eine ganze weile versucht meine Social Media Kanäle so schön einzubinden wie es auf anderen Blogs zu sehen ist. Bei dir bin ich endlich fündig geworden, da die Erstellung von Pinterest badges auf der Pinterest Seite irgendwie bei mir mit dem HTML Code nie funktionieren wollte.
Jetzt hab ich recht einfach und simpel das was ich haben wollte. Auch die Darstellung der Icos Nebeneinander hat direkt funktioniert ohne CSS.
Viele Grüße
Dominik, du bist ein Held.
Es war einfach, es funktioniert und es ist toll erklärt – Danke!
(Falls du mir noch erklären kannst, was diese Ministriche zwischen den icons machen: Super. Falls nicht bin ich trotzdem froh.)
Menschen wie du machen das Netz begreifbar.
:)
Caya
Oh Mist, Nachtrag. Nun ist die Sidebar, die vorher nicht da & nötig war natürlich superbreit. Gibt es eine Chance, die schmälern? Weil: So viel Platz für 3 Buttons brauch ich wirklich nicht, es nimmt der Hauptmessage so viel raum weg. (Oder sollte ich sie ncht in die Sidebar, sondern als Block einbauen? Ich grübele.) Bin übrigens kompletter Laie. Aber ambitioniert. ;) Hilfe wär toll, falls möglich. Danke!
Hi Caya,
danke für dein tolles Feedback! Freut mich zu lesen.
Zu deinen Fragen:
1) Die Ministriche bekommst du weg, indem du im CSS das ergänzt:
#social-buttons a {
text-decoration: none;
}
Das kommt daher, dass der Browser Links unterstreicht.
2) Den Bereich für die Sidebar bekommst du kleiner, indem du die komplette Sidebar verschmälerst. Das sind aber vermutlich größeren Anpassungen am Theme, der Rest drumrum soll ja auch noch schick aussehen und mobil funktionieren.
3) Du kannst die Button mit demselben Code auch beispielsweise in deinen Header einbauen, z. B. rechts unten im Bild. Das musst du aber mit CSS auch entsprechend an diese Position verschieben.
Bei Fragen einfach wieder melden!
Lieber Dominik,
vielen Dank für die Anleitung.
Leider klappt es bei mir gar nicht und zudem würde ich auch gerne nur das facebook-Logo am Seitenende neben das Impressum einsetzen (Wunsch meines Chefs).
Habe also das Text-Widget in die Footer-„Box“ gezogen, deinen Code (hier nur die 1. Zeile, dann die 8.-10. und die 14.Zeile), eingegeben und die jeweiligen Links bzw. Pfade ausgetauscht. Dann habe den „kleinen“ Code, wie von dir beschrieben in die style.css, der Ordnung halber unter den Punkt „Widgets“, kopiert.
Leider ist das Symbol nicht sichtbar, aber auch kein Text oder sonst irgendwas.
Woran kann es liegen bzw. was habe ich falsch gemacht.
Kann dir zum besseren Verständnis auch screenshots mailen.
Ich hoffe, du kannst mir helfen.
Viele Grüße und vielen Dank
Sonja
Hi Sonja,
hast du die Grafiken für das Facebook-Icon auch auf den Server hochgeladen? Schicke mir gerne mal Screenshots durch, dann kann ich schauen!
Hallo Dominik, DANKE für deine Anleitung, ich konnte funktionierende Social Buttons in ein WordPress-Widget einbauen auf meiner Website. Allerdings – egal, was ich mache – der grauen Kasten des Widgets „verschwindet“ hinter den Buttons bzw. verkleinert sich sozusagen auf „0“. Wenn ich das Widget an eine andere Stelle als die letzte in einer von beiden Sidebars setze, überlappen die Buttons mit dem darunter liegenden Widget. Ich finde einfach nicht heraus, wie ich den grauen Widget-Kasten so groß kriege, dass die Buttons „drin“ sind und nicht außerhalb. Ich hoffe, ich habe mich klar genug ausgedrückt.
2.) Hast du zufällig auch eine Anleitung, wie ich die gleichen funktionierenden Social Buttons, nur kleiner, oben in die Navigationsleiste kriege (anstatt der von dem Plugin „Menu Social Icons“ gesetzten Buttons, das Plugin speichert viel zu viel Code auf der Website, ich möchte diese nicht unnötig überladen)?
Über deine Hilfe würde ich mich sehr freuen.
VG Namira
Hi Namira,
sorry für die späte Antwort. Warum die Box für das Widget nicht mitwächst, kann ich dir spontan nicht sagen. Das ist aber ein CSS Problem.
Zu deiner zweiten Frage: Du kannst das Snippet für die Social Media Buttons auch einfach im Template einfügen und so eben auch in der Navigationsleiste unterbringen.
hat geklappt, 4 min 30 :-) DANKE!!
hallo, es ist einfach erklärt beim lesen verstehe ich es, aber wenn ich es probiere bekomme ich es nicht hin und verstehe es nicht. Ich finde auch Widgets und alles andere nicht oder geht das vom Smartphone aus nicht? ?
Das solltest du auch alles über das Smartphone erreichen, hab ich aber zugegebenermaßen auch noch nie am Smartphone bearbeitet. Versuche es am besten am PC nochmal.
Hallo Dominik,
vielen Dank für die gute Erklärung, die sogar ein westfälischer Anfänger wie ich verstanden hat. Jedoch muass ich irgendwo eine Macke eingebaut haben. Das Icon erscheint, wenn es geklickt wird wird man von der site geleitet, erreicht aber facebook nicht.
Habs so aufgebaut:
Wo ist mein Denkfehler, dass es nicht an facebook geleitet wird. Sorry, wenn die Frage blöd klingt, aber das ist mein erster Versuch….
VG
Thorsten
Hi Thozab,
die URL die du hier angegeben hast funktioniert nicht, die URL deiner Mail-Adresse hat keine Social Buttons in der SIdebar und Code kann hier in den Kommentaren nicht angezeigt werden. Schick mir den Code gerne mal über das Kontaktformular, dann werfe ich einen Blick darauf :-)
Hallo Dominik!
Ich kenne mich mit html und allem so überhaupt nicht aus. In weniger als 5 Minuten konnte ich, deiner Anleitung folgend, die Social Buttons einfügen. WOOOOW!
Finde es nur schade, dass es nicht wie beim Widget von WordPress die ersten paar Bilder von Instagram übernimmt. Da gibt es keine Lösung oder? ;)
Tausend DANK – bin voll begeistert, dass ich als Laie sowas lösen konnte!
Danke, die Erklärung ist so gut, dass auch ich es geschafft habe, die absolut keine Ahnung von Programmieren und so habe … Super!
Hallo Dominik!
ich habe mich nun auch für WordPress entschieden, bin noch recht weit am Anfang, aber gar nicht unzufrieden :-) Durch das Suchen von Optionen für das Einbinden der Social Media buttons bin ich auf deine Tipps gestoßen.
Es hat soweit auch geklappt, leider sind bei mir die buttons noch untereinander, obwohl ich im CSS folgendes stehen habe:
#social-buttons a img {
margin: 10px 12px 0 0;
float: left;
}
#social-buttons a {
text-decoration: none;
}
hast du noch einen Rat?
Viele Grüße
Michael
Hi Michael,
du meinst auf deiner hier auch hinterlegten Seite? Ändere den Code mal in Zeile 2 in folgendes ab:
margin: 10px 100% 0 0;
Sollte funktionieren :-)
Hallo Dominik,
vielen Dank für die Anleitung. Hat soweit auch alles funktioniert, bis auf dass die Icons untereinander und nicht nebeneinander stehen.
Style.css:
#social-buttons a img {
margin: 10px 100% 0 0;
float: left;
}
Woran kann das liegen?