So fügst du in deine Sidebar Social Media Icons ein – auch ohne Plugin

Sie gehören inzwischen bei beinahe jedem Blog zum guten Ton: die Social Media Icons. Und es gibt sie in so unendlich vielen Varianten, dass der Fantasie eigentlich keine Grenzen gesetzt sind. Aber wie genau kriegt man denn nun diese individuellen Buttons auf seinen Blog? Ich verrate es dir…

Vielleicht hast du es ja schon gesehen: ich habe mir und meinem Blog neue Social Media Icons gegönnt. –>

Zu Beginn meines Blogs habe ich noch die „gewöhnlichen“ Widgets von WordPress in meine Sidebar eingebaut, allerdings finde ich sie inzwischen optisch in der Summe zu mächtig und außerdem beeinträchtigen sie das Laden der Seite ein wenig.

Angefangen hatte dieser Gedankengang eigentlich auf unserem Unternehmensblog. Auch dort hatte ich die Widgets eingepflegt und fand sie auf Dauer dann doch zu groß.

Ich hegte einfach so langsam den Gedanken, dass die Social Media Widgets an der Seite zu sehr vom eigentlichen Inhalt ablenken. Und ich möchte ja nicht, dass du abgelenkt wirst! :)

Nun ist es aber so, dass unser Unternehmensblog gestalterisch natürlich deutlich mehr Optionen zur Verfügung hat als mein kleiner Blog hier. Das heißt, ich habe auf dem Corporate Blog die Möglichkeit, aus verschiedensten Plugins genau das Richtige – in diesem Fall das hier – auszuwählen, es dann noch individuell anzupassen und so die perfekte Social Media Icon Bar einzufügen.

Momentan stehe ich total auf diese so genannten „Floating Social Media Bars“, die dann beim Scrollen der Seite immer mitlaufen. So eins habe ich dann auch gefunden, installiert und fertig.

Leider habe ich auf diesem Blog hier aber nicht die Möglichkeit, Plugins zu nutzen, da ich WordPress kostenlos nutze und mich dementsprechend mit den Widgets zufrieden geben muss.

Inzwischen kennst du mich ja aber ganz gut und zufrieden gebe ich mich eigentlich eher selten mit irgendetwas, das mir vorgesetzt wird.

Also suchte ich im Internet nach einer Möglichkeit, auch ohne Plugin eine schöne Social Media Bar zu kreieren.

Und landete auf dieser Seite. Juhu! Ich hab mich da natürlich direkt ein wenig durchgeklickt und siehe da – ich fand tatsächlich recht schnell ein passendes Layout, das mir gefiel!

Und so installierst du neue Social Media Icons ohne Plugin

So weit so gut. Ich hatte also endlich schöne Icons, aber leider keine Ahnung, wie ich diese nun auf meinen Blog bekomme.

Mir fiel dann aber relativ schnell ein: so schwierig ist das eigentlich gar nicht, denn im Grunde muss ich doch nur mit dem passenden HTML-Code eine Verlinkung zwischen dem Icon und der jeweiligen Seite erstellen. Und das kann ich doch!

Also öffnete ich in meinem WordPress-Dashboard den Reiter „Design“, ging dort auf „Widgets“, fügte in meine Sidebar ein reines Textfeld ein und schrieb dort folgenden Code von media-affin hinein:

<div id=“social-buttons“>
<a target=“_blank“ href=“ https://plus.google.com/u/0/115379919825308895066/posts “ rel=“me nofollow“>
<img title=“Social Media, SEO und WordPress Tipps via Google+“ alt=“Google+ Button“ src=“ https://socialmesocialu.files.wordpress.com/2015/01/google.png “ width=“45″ height=“45″ />
</a>
</div>

[Zur Info: Ich habe bei den Links immer ein Leerzeichen zwischen den Anführungszeichen und dem Link selbst gesetzt, weil das sonst nicht richtig angezeigt wird. Die Leerzeichen musst du dann in deinem Code weglassen.]

Was in diesem Code steht

Diesen Code kannst du so, wie er ist, gerne kopieren. Damit du weißt, was du da genau kopierst, erkläre ich dir mal kurz die Zusammensetzung:

  • Wichtig bei jedem HTML-Code: du musst ihn öffnen und auch wieder schließen. In diesem Fall öffnet das <div> deine HMTL-Codierung und bildet quasi den Container dafür, sodass du hiermit definierst: das ist jetzt ein eigenständiges HTML-Konstrukt zum Thema social-buttons. Mit dem </div> schließt du dieses dann wieder. Das <a> steht hier übrigens für die einzelne Verlinkung. Pro Verlinkung und Icon machst du je einen Code auf und diesen öffnest und schließt du dann über das <a> und </a>.
  • Ich mag es immer nicht, wenn man auf einer Internetseite ist, einen Link anklickt und dieser sich dann im selben Fenster öffnet. Ich möchte einfach gern selbst entscheiden, ob ich die Ausgangsseite noch brauche oder nicht. Also setze ich alle meine Verlinkungen immer auf „in neuem Fenster öffnen“. Bei diesem HTML-Code geht das auch: das target=“_blank“ beschreibt nämlich, dass der Link in einem neuen Fenster öffnen soll.
  • Dann folgt schon die Verlinkung: hinter href=“…“ kommt dein Link zum Einsatz. Wo soll ein Klick auf das Icon hinführen? Einfach die Internetadresse hier reinkopieren und schon hast du den Zielort bestimmt.
  • Nun geht es um das Icon selbst. Weil die Icons ja grundlegend einfach nur Bilder sind, musst du diese zuvor in deine WordPress-Mediathek hochladen. Dort eingepflegt, erhalten sie von WordPress einen Link (den findest du rechts neben dem Bild in der Mediathek angezeigt). Du kopierst den Link nun und fügst ihn bei <img… src= „…“> zwischen die Anführungszeichen ein. So legst du also das Bild fest. Hierbei nicht vergessen: dein Bild braucht einen Titel und auch einen Platzhalter, falls es mal nicht dargestellt werden kann.  Den Titel legst du direkt bei <img title=“…“ fest und er wird dann angezeigt, wenn dein Leser mit der Mouse über das Icon geht. So gibst du ihm quasi die Erklärung, wo ein Klick auf das Bild eigentlich hinführt. Den Platzhalter definierst du in alt=“…“. Der ist wichtig, falls deine Seite mal nicht richtig lädt und das Icon nicht angezeigt werden kann. In meinem Fall stünde dann wenigstens noch Google+ dort.
  • Jetzt fehlt nur noch ein kleiner Schritt für deinen perfekten HTML-Code: du musst die Maße deiner Icons bestimmen. Und das machst du bei width=“…“ und height=“…“, also Breite und Höhe. Meine Icons hier sind rund, also quasi quadratisch, die Breite und Höhe haben also denselben Wert. Du musst an dieser Stelle selbst ein bisschen herumexperimentieren und schauen, wie es dir am besten gefällt.

Fertig! Gar nicht so schwierig, oder?

Diesen HTML-Code kannst du übrigens immer nutzen, wenn du ein Bild mit einer Internetseite verknüpfen möchtest. Die Struktur der Verlinkungscodierung ist immer gleich.

Und wie handhabst du das mit der Sidebar? Hast du deine Social Media Kanäle alle verlinkt oder magst du so etwas gar nicht?

Achso und: Wie findest du denn meine Icons?

[Header: Viktor Hanacek | The Apple logo and iPhone are trademarks of Apple Inc., registered in the U.S. and other countries.]

Advertisements

11 Gedanken zu “So fügst du in deine Sidebar Social Media Icons ein – auch ohne Plugin

  1. Mahlzeit Bine,
    ich trau mich da nie rüber, bin eine totale Niete was das angeht und habe Angst mehr kaputt zu machen damit ;-)
    Dein Icons sind ja auf gebraucht gepimpt und sehen wie Verschlüsse aus – cool
    Liebe Grüße Tanja

    Gefällt mir

    • Mahlzeit liebe Tanja,

      das ist wirklich nicht schwierig, aber ich muss gestehen: Verlinkungen sind auch das Einzige, was ich mir tatsächlich zutraue. :D

      Ja, cool, ne? Ich fand aber auch die Handgezeichneten ganz am Ende des Beitrags super…

      Liebe Grüße Bine

      Gefällt 1 Person

  2. Schön, dass jemand das mal so einfach erklärt mit einer Anleitung, die jeder verstehen kann. Oft ist „Handarbeit“ wirklich besser als sich sein Blog mit etlichen Plugins zu überladen.

    Gefällt mir

  3. Hi!

    Also ich habe meine SocialIcons alle per Plugins integriert. Bei Problemen, also wenn es vorkommt dass die Dinger dann nicht richtig funktionieren sollten oder den Blog in irgendeine weise beeinträchtigt dann nehme ich den Code aber auch gerne mal so auseinander um Abhilfe zu schaffen. Ansonsten aber sehr gut beschrieben, weiter so!

    http://www.saphirschwarz.yt

    Gefällt mir

    • Liebe Selli,

      das würde ich auch gern tun – aber für Plugins müsste ich eine andere WordPress-Version nutzen. ;) Deine Sidebar sieht aber auch schön aufgeräumt aus – gefällt mir gut!

      Liebe Grüße, Bine

      Gefällt mir

    • Hi! :)

      Es ist zum Glück wirklich ziemlich einfach – gerade, wenn man einen Code zum Kopieren hat und diesen dann einfach nur mit den eigenen Inhalten füllen muss.

      Viel Spaß beim Ausprobieren und bei Fragen darfst du dich gern an mich wenden. ;)

      Liebe Grüße, Bine

      Gefällt mir

  4. Pingback: Social Media – So bringst du deine Beiträge unter die Leute {Blogparade RICHTIG BLOGGEN} | Couple of Love

Hinterlasse mir doch hier gern einen Kommentar...

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s