BesserBloggen #73
Social Media Buttons einbinden
Ich habe jetzt schon öfter per Mail und so weiter erklärt, wie man diese hübschen Social Media Buttons in den Blog einbinden kann:
Diese Ansicht stammt aus dem Testblog, den ich für Jules angelegt habe und der bald auf ihren "richtigen" Blog umgezogen wird. |
Generell ist die ganze Aktion kein Hexen-Werk. Wenn man weiß, wie es geht, ist die Button-Leiste sehr schnell installiert.
Schritt 1
Zuerst benötigt man die entsprechenden Buttons. Die kann man sich passend zum Blogdesign entweder selbst gestalten oder im Netz suchen. Dabei sollte man aber darauf achten, dass man sie auch verwenden darf und nicht das Urheberrecht verletzt. (Google-Suchbegriff: "Free Social Media Buttons")
Diese ladet ihr dann auf euren Blog bzw. ins Picasa-Webalbum - entweder über die Upload-Funktion in Blogger oder direkt auf picasaweb.google.com. Am Ende öffnet ihr in jedem Fall Picasa (oder euren gewählten Upload-Ort), den braucht ihr gleich noch.
Schritt 2
Dann geht ihr auf Blogger ins Layout und erstellt dort ein neues HTML/CSS Gadget. Dort müsst ihr nun den entsprechenden Code für die Bilder und Links eingeben.
Pro Button braucht ihr eine Zeile Code, die wie folgt aussieht:
<a href="URL zu Profil">
<img src="URL zum Bild" />
</a
Die URL zum Profil sucht ihr euch jeweils im entsprechenden Social Media Netzwerk und die URL zum Bild bekommt ihr, wenn ihr auf Picasa (oder wo euer Bild eben liegt) mit Rechtsklick auf das Bild klickt und dann "Grafikadresse kopieren" oder "Bild-URL kopieren" auswählt.
Am Ende sieht die Zeile mit allen Infos dann zum Beispiel so aus:
<a href="https://www.facebook.com/DassisDreamworld"> <img src="https://lh3.googleusercontent.com/-9NW40zGs8cE/UXjZFiwqnVI/AAAAAAAAI_Q/Ro4Ixv2Jap0/w322-h80-no/5von5.jpg" /> </a>
Je nachdem wo ihr die Button-Leiste nun eingefügt habt, müsst ihr noch die Details anpassen.
Wenn die Buttons alle nebeneinander sein sollen
Wenn die Buttons nebeneinander sein sollen, müsst ihr zuerst gucken, wie breit der verfügbare Platz ist. Das könnt ihr entweder in den Blogger-Einstellungen nachschauen oder mit einem Plugin wie Firebug auslesen.
Angenommen eure Sidebar hat 300px Breite und ihr wollt 5 Buttons einfügen, dann darf jeder Button maximal 60px breit sein. Ihr fügt in den Code also noch die Breite für jedes Bild ein. Die Zeile sieht dann so aus:
<a href="https://www.facebook.com/DassisDreamworld"> <img src="https://lh3.googleusercontent.com/-9NW40zGs8cE/UXjZFiwqnVI/AAAAAAAAI_Q/Ro4Ixv2Jap0/w322-h80-no/5von5.jpg" width="60px" /> </a>
Wenn die Buttons alle nebeneinander sein sollen
Wenn die Buttons nebeneinander sein sollen, müsst ihr zuerst gucken, wie breit der verfügbare Platz ist. Das könnt ihr entweder in den Blogger-Einstellungen nachschauen oder mit einem Plugin wie Firebug auslesen.
Angenommen eure Sidebar hat 300px Breite und ihr wollt 5 Buttons einfügen, dann darf jeder Button maximal 60px breit sein. Ihr fügt in den Code also noch die Breite für jedes Bild ein. Die Zeile sieht dann so aus:
<a href="https://www.facebook.com/DassisDreamworld"> <img src="https://lh3.googleusercontent.com/-9NW40zGs8cE/UXjZFiwqnVI/AAAAAAAAI_Q/Ro4Ixv2Jap0/w322-h80-no/5von5.jpg" width="60px" /> </a>
Wenn ihr nur die Breite definiert, wird das Bild proportional kleiner gerechnet und die Höhe wird entsprechend slebst gewählt.
Wenn die Buttons untereinander angeordnet werden sollen, müsst ihr zwischen die Bilder einen Zeilenumbruch einbauen. Ihr fügt also den Umbruch ein, der Code sieht dann so aus:
<a href="https://www.facebook.com/DassisDreamworld"> <img src="https://lh3.googleusercontent.com/-9NW40zGs8cE/UXjZFiwqnVI/AAAAAAAAI_Q/Ro4Ixv2Jap0/w322-h80-no/5von5.jpg" width="60px" /> </a> <br />
Bei der letzten Code-Zeile könnt ihr das <br /> weglassen, denn danach braucht ihr ja keine Leerzeile mehr.
Und das war's auch schon.
Solltet ihr noch weitere Fragen dazu haben oder irgendwas klappt nicht, dann schreibt hier gerne einen Kommentar!
Liebe Grüße,
Stefanie
<a href="https://www.facebook.com/DassisDreamworld"> <img src="https://lh3.googleusercontent.com/-9NW40zGs8cE/UXjZFiwqnVI/AAAAAAAAI_Q/Ro4Ixv2Jap0/w322-h80-no/5von5.jpg" width="60px" /> </a> <br />
Bei der letzten Code-Zeile könnt ihr das <br /> weglassen, denn danach braucht ihr ja keine Leerzeile mehr.
Und das war's auch schon.
Solltet ihr noch weitere Fragen dazu haben oder irgendwas klappt nicht, dann schreibt hier gerne einen Kommentar!
Liebe Grüße,
Stefanie
Liebe Dassi,
AntwortenLöschendieser Beitrag hat mir wirklich geholfen mein Blog etwas zu verbessern. Danke!