[Blogger Hilfe] Social Media Buttons

Hey,

heute gibts den zweiten Teil meiner Blogger-Hilfe. Diesmal geht es um das erstellen und integrieren von Social Media Buttons.

Was ist das?

Auch wenn euch der Begriff nichts sagt, gesehen haben werdet ihr das bestimmt schonmal. Das sind diese Buttons, die es bei vielen Blogs gibt, um mit verschiedenen Diensten folgen zu können, oft persönlich angepasst. Aber weil ein Bild mal wieder mehr sagt als tausend Worte, so sieht das aus:




Die Buttons

Als Erstes solltet ihr euch Gedanken machen, was ihr denn alles verlinken wollt. Danach könnt ihr euch die entsprechenden Buttons zusammenstellen. Im Internet findet alle möglichen Icon-Sets, viele könnt ihr euch auch kostenlos herunterladen (Stichwort für Google-Suche: Social Media Icon Set). Oft führt aber kein Weg drumrum, eigene Buttons zu designen. Ich hatte zum Beispiel das Problem, einen Button für Blog-Connect zu finden... Eurer Kreativität ist keine Grenze gesetzt, ein bisschen auskennen mit Gimp & co. solltet ihr euch aber schon.




Sind eure Buttons fertig, könnt ihr sie bei einem Upload-Dienst eurer Wahl hochladen, z.B. Photobucket.

Der Code


Der Code zum Einbetten der Buttons ist recht einfach und ausführlich erklärt habe ich Teile davon ja bereits im Tutorial zur Lesefortschrittsanzeige. Da könnt ihr im Zweifelsfall auch nochmal nachlesen. Diesmal habe ich meine Links drin gelassen. Ist das verständlicher, als wenn ich das durch Bezeichnungen ersetze wie beim letzten Mal? Irgendwie gebe ich nur nicht gerne alle meine Links an ;) Also, erstellt unter "Layout" ein neues HTML-Feld.


<a href="https://www.facebook.com/wortgewaltblog" title="Wortgewalt auf Facebook" target="_blank"><img src="BildURL z.B. in der Form http:\\bildnamexy.png" width="60" height="60" alt="Wortgewalt auf Facebook" /></a>

Das ist der Link zu eurem jeweiligen Profil.

Hier könnt ihr eingeben, welcher Name angezeigt wird, wenn man mit dem Mauszeiger über den Button fährt. Ist ganz praktisch, da ich z.B. einige personalisierte Buttons nicht gleich auf den ersten Blick erkenne, weil oft die typischen Farben fehlen, z.B. dunkelblau für Facebook.

target="_blank" bedeutet, dass der Link in einem neuen Tab/Fenster geöffnet wird.
Ihr könnt diesen Teil auch weglassen, dann wird der Link im aktuellen Fenster geöffnet.

Nach img src kommt der Link zu eurem Bild. Bei Photobucket kann man den z.B. direkt aus so einer Box kopieren, ansonsten Rechtsklick aufs Bild -> Grafikadresse kopieren.

Mit width und height könnt ihr nachträglich nochmal die Größe der Buttons ändern. Am Besten immer nur kleiner skalieren, gebt ihr hier Werte an, die größer als die Originalauflösung sind, verpixelt der Button.

Hier steht etwas ähnliches bzw. das gleiche wie bei title auch schon, hat allerdings eine andere Funktion. Sollte euer Bild nicht angezeigt werden (z.B. verschoben, gelöscht), dann erscheint stattdessen dieser Text.



Mehrere Buttons nebeneinander bekommt ihr, indem ihr diesen Code einfach untereinanderkopiert und die Links anpasst. Einen Zeilenumbruch könnt ihr erreichen, wenn entweder die Breite eurer Sidebar komplett ausgenutzt ist (automatisch) oder mit dem br-Tag. Dafür schreibt ihr einfach immer hinter das </a> <br/>



Die Links finden

- Google Friend Connect (GFC)

Das einzige was ein wenig knifflig ist, ist der Link für GFC.

Der sieht folgendermaßen aus: "http://www.blogger.com/follow-blog.g?blogID=Eigene ID"



Diese ID findet ihr, wenn ihr euren Blog im Dashboard anklickt und dann z.B. Posts, Übersicht, Kommentare, auswählt. Vollkommen egal, auf jeden Fall erscheint in der Eingabeleiste oben dann eure ID, die ihr rauskopieren könnt.

Alles andere ist hoffentlich selbsterklärend.


Kommentare:

  1. Das ist echt super hilfreich, ich erstelle meine buttons allerdings immer als Bilddatei in einem Textfeld die dann mit einem Link versehen ist, ist das sehr dramatisch?

    Lg LadyWorldwide

    AntwortenLöschen
    Antworten
    1. solangs funktioniert ist doch alles ok ;) da führen sicher viele Wege ans Ziel

      Löschen
  2. Danke für die tolle Beschreibung ♥

    AntwortenLöschen
  3. Danke für die Mühe, die du dir wieder gemacht hast :)
    "Deinen" Lesefortschritt konnte ich ja achon erfolgreich einbauen und vielleicht hab ich ja demnächst noch Muße, auch Buttons zu basteln :)
    Auf jeden Fall toll, dass du solche Tutorials anbietest :)

    Was Link/Umschreibung angeht, finde ich ist beides verständlich, aber für mich persönlich mag ich die Beschreibung sogar lieber, weil es beim drüber schauen einfach 'kompakter' ist.

    LG,
    Steffi

    AntwortenLöschen
  4. Ich habe das auch schon soo lange vor, sowas für meinen Blog zu erstellen. Jedenfalls habe ich mir deinen Beitrag mal in meinen Favoriten gespeichert und vllt mache ichs über die Feiertag endlich mal :)

    AntwortenLöschen
  5. Dank dir habe ich es jetzt endlich geschafft! :) Es ist zwar noch nicht perfekt, aber immerhin schon mal ein Anfang. Vielen Dank ♥

    AntwortenLöschen
  6. Also ich bin ganz neu mit meinem Blog und ein Icon Set habe ich mir bereits runtergelassen. Ich würde die Buttons auch so übernehmen. Wie lade ich die denn jetzt hoch, sodass ich dann den Link einfügen kann? :) Sorry ich bin da echt ziemlich unbegabt :)

    AntwortenLöschen
    Antworten
    1. Ich lade meine Bilder immer bei der Seite Photobucket hoch, es gibt aber auch noch diverse andere Dienste, bei denen man Bilder hochladen und verwalten kann

      Löschen
  7. Mega einfach. Voll super! Danke für den hilfreiche Beitrag <3

    AntwortenLöschen

Kommentare sind erwünscht! :) aber bitte freundlich bleiben