Wie Ihr social media buttons in Euren blogspot Blog einbaut [Anleitung zum Selbermachen].

EDIT // 31.5.2013: Dieses Posting ist für alle blogspot-user. Ich habe es verfasst, als mein Blog noch bei blogspot und nicht bei wordpress lag!

Guten Morgen, Ihr Lieben! Eigentlich guten Tag, aber ich bin noch immer nicht ganz wach. Da hilft auch die dritte Tasse Kaffee nicht. Mein Wochenende war nicht nur extremst spannend, motivierend und inspirierend, es war auch ganz schön anstrengend. Ich habe soooo viele tolle Bloggerinnen kennen gelernt, wunderbare Gespräche geführt, viel gelernt und erfahren- ich bin voller Eindrücke und gleichzeitig leer gequatscht. Vielleicht melde ich mich später nochmal mit einem Bericht von The Hive… oder morgen, mal sehen! Jetzt aber zu Eurer Frage nach den social media buttons. Wie ich gelesen habe, wird die Antwort auf die Frage „Wir Ihr social media buttons in Euren blogspot blog einbaut?“ schon sehnsüchtig erwartet. ;-)

Achtung, mitschreiben! Öffnet ein neues Posting. Klickt dann auf html-Ansicht. Ladet Eure social media buttons als Bilder hoch. Das sieht dann so aus:

Wie man social media Buttons in einen Blogspot Blog einbaut | Anleitung | was eigenes Blog

 

Die gelbe Zeile ist mein Facebook-Button. Die rote Textzeile löscht Ihr nun rauss und ersetzt diese durch den Link zu Eurer jeweiligen social media Seite, in diesem Falle: zu meiner  Facebook Fanpage.

Das macht Ihr nun bei allen anderen Buttons ebenso.

Wie man social media Buttons in einen Blogspot Blog einbaut | Anleitung | was eigenes Blog

Wenn Ihr alle Links ersetzt habt, speichert Ihr das Posting als Entwurf. Dann kopiert Ihr den kompletten html-Code und schliesst das Posting.

Nun geht Ihr in Euer Blog-Layout, öffnet ein html-gadget und setzt den kopierten Code dort ein, dann speichern und die ansprechende Stelle in Eurem Layout schieben, fertig!

Ich musste ein bisschen mit den Größen der Symbole spielen- erst waren sie zu groß, dann zu klein. Die Bilder und gadgets meiner linken Sidebar sind z.B. 160 pixel breit. Um drei social media button nebeneinander ins gadget einzufügen, habe ich sie auf 50 x 50 pixel verkleinert- dass passt dann so ungefähr.

Social media buttons gibt es zu genüge im Netz, z.B. hier [klick] oder hier [klick] oder Ihr googelt mal nach „free social media buttons“. Hierbei hilft übrigens immer sehr gut die Bildersuche.

Viel Erfolg beim Linken, Basteln, Schieben und Veröffentlichen. :-)

Ein riesen Dankeschön gilt hier übrigens nicht mir, sondern meiner liebsten Buch-Blog-Freundin Frau Kännchen, von der ich wiederum diese Anleitung bekommen habe. Danke, Caro! :-*

Ich wünsche Euch einen schönen Montag!

Liebe Grüße, Bine

50 Comments

  • 5 Jahren ago

    Liebe Bine,
    ich bin dir so so dankbar.
    wird gleich ausprobiert! :-) :-)
    auf den Bericht aus Berlin bin ich schon gespannt.
    Liebe Grüße und noch mal danke!
    Christine

  • Liebe Bine,
    ich muss grad bisschen schmunzeln:-) Habe ich doch vorige Woche wahnsinnig viel Zeit in der suche nach den richtigen Einstellungen für diese Buttons gesucht im www. LG Nadine

  • 5 Jahren ago

    Huhu liebe Bine, zuerst mal vielen Dank für diesen Post, im www habe ich mittlerweile auch schon gestöbert und bin auf diverse Seiten gestoßen mit den free buttons, aber nun weiß ich wenigstens wie man die dann „installiert“ ! Große klasse, dass Du Dir die Mühe gemacht hast und uns weiter hilfst ;o)
    Vielen lieben Dank nochmal…..ich werde mich in nächster Zukunft damit beschäftigen ;o) Liebe Grüße Christiane

  • Hallo liebe Bine,

    vielen, vielen Dank für diese tolle Anleitung!
    Ich habe es direkt einmal ausprobiert und siehe da… Es hat nach etwas Startschwierigkeiten wunderbar geklappt und sieht super aus!

    Danke nochmal und liebe Grüße,
    Anne

    • 5 Jahren ago

      Liebe Mia,
      gleich mal bei dir geschaut- ist TOLL geworden…
      dann leg ich nachher gleich mal los.

  • 5 Jahren ago

    Das ist aber endlich mal eine tolle Anleitung für jedermann!!! Vielen Dank dafür :)

  • 5 Jahren ago

    cool! Danke für die Anleitung! Wurde schon umgesetzt :)

    LG Vroni

  • 5 Jahren ago

    super! vielen dank für die anleitung!

  • 5 Jahren ago

    Liebe Bine,

    vielen Dank für diese einfache Anleitung! Ich habe sie gleich umgesetzt und es hat funktioniert! Toll.
    Und jetzt finde ich noch heraus, wie ich einen Email-Button verlinke ;)

    Danke!

  • 5 Jahren ago

    ♡ Hallo Liebes ♡

    bin gerade auf deinen Blog gestoßen und er gefällt mir echt gut. Mach weiter so!

    Wenn du Lust und Zeit hast, kannst du auch einen Abstecher auf meinen Blog machen. Würde mich total freuen!

    Küsschen an dich, L. ♡

    von http://miss-poupette.blogspot.de/

  • 5 Jahren ago

    Super Super Super!!!!! DAAAAANKE. Ich stell mich vielleicht was doof an, aber seid Tagen versuche ich das raus zu bekommen, wie man das macht und das ganze Social Media Dings is gar nicht mal soooo einfach. Tausend Dank, damit wirds in der nächsten Woche wohl klappen! Merci! <3 Bist die Beste!

  • 5 Jahren ago

    Hey, super-super-super, lieben Dank dafür!

    LG vom KleinenLieschen

  • 5 Jahren ago

    Tach Bine,

    hach, das ist ja eine tolle Anleitung. Ich hab auch ganz eifrig probiert und nach ein paar Startschwierigkeiten hab ich die Buttons auch drin im Blog, aber sie werden nicht angezeigt (vermutlich auch, weil sie zu groß sind). Hüstel, wo genau verringer ich denn die Größe der Buttons?? Muss ich das vor dem Udpolad machen oder geht das über den HTML-Befehl? Hilfe .. :-(
    Tausend Danke!
    ullatrulla

    • 5 Jahren ago

      @ullatrulla, ich habe meine buttons in photoshop verkleinert. Geht aber bestimmt auch mit picmonkey oder picasa und anderen Foto/jpg.- Bearbeitungsprogrammen.
      LG Bine

  • 5 Jahren ago

    Egal ob von dir oder Caro…. Ihr seit richtig große Klasse… vielen vielen Dank dafür!!!
    GLG Momo

  • 5 Jahren ago

    Vielen, vielen Dank! Das ist ja tatsächlich total einfach … aber alleine wäre ich als Technikbanause darauf nicht gekommen!

  • 5 Jahren ago

    Hallo Bine!
    Juhu, es hat geklappt und war eigentlich ja sooo einfach :) vielen lieben Dank!!
    Wenn du dir das Ergebnis ansehen willst, klick einfach auf meine Seite.

    Liebe Grüße,
    Dani
    mademoisellelavande.blogspot.com

  • 5 Jahren ago

    Vielen, vielen Dank!!! Ich habe mich bislang nicht damit auseinander gesetzt. Es erschien alles zu kompliziert. Nun kann ich endlich auch an mein bloglayout weiter feilen, motiviert durch deine Posts. Dankeeee!

  • 5 Jahren ago

    Daaanke! Hat super geklappt!

  • 5 Jahren ago

    ldipypgkn lenvw xcnrlcg hvpx gewhqhzceguseus

  • 5 Jahren ago

    Aber warum denn die html-Ansicht? Die meisten Bloggerinnen verstehen kaum etwas von html. Da wäre doch die WYSIWYG-Ansicht – also „Verfassen“ wie es im Blogger-Editor heisst, sinnvoller.

    Viele Grüße
    Sara

  • 5 Jahren ago

    Danke für die Anleitung! Damit habe ich gestern auch Social Media Button erstellt und sogar, weil ich schon so in Fahrt war, gleich noch eine facebook-Seite erstellt *räusper*
    Ich hab zusätzlich noch einen feedly-Button erstellt, wenn Interesse besteht, erklär ich, wie ich das gemacht habe 8-)

    Liebe Grüße,
    Wiebke

  • 5 Jahren ago

    Vielen, vielen Dank für die tolle Anleitung! Das war jetzt, glaub ich, die vierte die ich gelesen habe und endlich hat es funktioniert :-)

    Liebe Grüße, Sandra

  • 5 Jahren ago

    OHHH, vielen Dank! Der allerbeste und am leicht zu verstehenste Post darüber :)
    habe es sofort hinbekommen und bin mega glücklich *-*

    • 5 Jahren ago

      Das freut mich! ;-)

  • 5 Jahren ago

    Vielen lieben Dank *-*
    Du hast mir wirklich sehr geholfen damit!

  • 5 Jahren ago

    Das ist wirklich eine tolle Anleitung und soweit hat das auch super geklappt….aber wie bekomme ich denn die Buttons nebeneinander? Meine sind nicht wirklich groß, aber sie sind nur untereinander. Da für mich html wie russisch rückwärts ist würde ich über einen Tipp sehr freuen!
    Danke Astrid

    • 5 Jahren ago

      dann versuch mal den jeweiligen code für jeden button gleich nebeneinander einzufügen. ansonsten habe ich leider auch keinen tipp! sorry. lg bine

  • 5 Jahren ago

    Vielen lieben Dank für den tolle Anleitung. Ich habe das gestern ausprobiert und es hat alles ganz wunderbar geklappt.
    Aber eine Frage habe ich und ich hoffe du kannst mir da eine kleine Antwort geben.
    Ich habe jetzt das Wort facebook (auch instagram & bloglovin) ausgeschrieben als button auf meinen Blog geladen.
    Allerdings ist mir jetzt eine Seite (http://www.rdp-law.de/blog/worauf-sollte-man-bei-der-einbindung-von-social-media-button-auf-seiner-webseite-achten.html) ins Auge gestochen. Die hat mich etwas verunsichert. Darf ich diese Button so wie sie auf meinem Blog sind, verwenden?
    Könntest du mir da weiterhelfen?

    Du würdest mir einen großen Gefallen tun.

    Liebste Grüße und vielen Dank schon einmal.
    Dana

  • 5 Jahren ago

    Liebe Bine…

    Super Post! Ich habe bis jetzt keine gute Beschreibung gefunden, um Icons in meinen Blog einzufügen. Mit deiner Beschreibung war es jedoch ein Kinderspiel. Danke!! Ich wäre sonst noch verzweifelt;)

    Ich finde deinen Blog allgemein super & sehr lesenswert! Wenn ich schon dabei bin, hätte ich noch zwei Fragen an dich.. Ich bin noch neu unter den Bloggern & habe daher manchmal etwas Schwirigkeiten mit dem Einfügen von gewissen Dingen :)

    Hier meine Fragen:

    1. Bei den Social Network Icons… Ich habe diese nun eingefügt, jedoch öffnet es bei mir keine neue Website. Wie kann ich das einstellen?

    2. Ich habe schon bei vielen Blogger, wie auch bei dir, gesehen, dass sie ein Foto von sich oben platziert haben – und alle in einer runden Form. Wie bringt ich das hin? Bei mir will das verflixte Foto einfach nicht dort hin.

    Danke dir 1000 Mal für deine Hilfe.

    Liebe Grüsse
    Sharon

    • 5 Jahren ago

      Hallo Sharon, danke für Deinen netten Kommentar!
      Zu Frage 1: kann ich Dir gerade leider nicht helfen, weil ich ja jetzt einen wordpress Blog habe… ich bin mir nicht mehr sicher, wie ich das damals genau auf
      meinem alten blogspot Blog gemacht habe. Ich glaube, Du musst in den html code irgendwas mit _blank einfügen. Goggle das mal.

      Zu Frage 2: Ich habe das runde Foto mit Photoshop erstellt. Dafür das Bild öffnen und rund ausschneiden. Solltest Du kein Photoshop haben… das geht sicherlich
      auch mit PicMonkey oder anderen Freeware-Programmen. Dann lädst Du das Foto als Bild hoch und verlinkst das Bild zu Deinem Profil.
      Somit hast Du kein klassisches blogspot-Profilbild, sondern Dein eigenes Foto mit Link zum Profil.
      Verständlich?

      LG Bine

  • 5 Jahren ago

    Danke für die Anleitung. Ich hab von HTML null Komma null Ahnung, aber mir deiner tollen Erklärung konnte ich heute immerhin 2 kleine Buttons einbinden

    Liebe Grüße
    Ina

  • 5 Jahren ago

    Vielen lieben Dank für diese erstklassige Anleitung – endlich habe sogar ich das mal kapiert… *g*

    Runde Buttons wollten es allerdings partout nicht werden – meine Programme haben sich alle gewehrt.

    Aber den Trick werde ich auch noch irgendwann rausbekommen. ;-)

    Liebe Grüße
    Sabine

  • 4 Jahren ago

    Danke Bine, dass du auch an Bloganfänger denkst :o)

  • 4 Jahren ago

    Danke für die Anleitung! Leider stehen die Icons bei mir untereinander. Wie bekommt man sie denn nebeneinander? Hast Du einen Tipp?
    Ich hab schon probiert sie anzuordnen.

    lg

  • 4 Jahren ago

    Liebe Bine,

    tausend Dank für diese perfekte und doch so einfache Anleitung! Du hast mir damit gerade vermutlich stundenlanges Suchen im www erspart! Das einfügen der Icons ging mit deiner Anleitung Eins-Fix-Drei und hat sofort geklappt :-)

    Liebe Grüße
    Steffi

    • 4 Jahren ago

      Toll- das freut mich sehr! Lieben DANK für die nette Rückmeldung, Steffi!

  • 4 Jahren ago

    Liebe Bine, Herzlichen Dank für das tolle Tutorial. Ich habe schon ewig gesucht und immer nur etwas mit Bilder bei Flickr hochladen gefunden. Jetzt hat es endlich geklappt. Ich danke Dir wirklich sehr für dieses Tutorial!

    • 4 Jahren ago

      Bitte, gerne! Es freut mich, dass es geklappt hat!
      GLG Bine

  • 4 Jahren ago

    Hallo Bine!
    Sowohl im alten als auch im neuen Layout bin ich an den Buttons verzweifelt. Ich habe mehrere Anleitungen versucht, aber es klappte nie. Per Zufall bin ich jetzt mit anderen Wörtern in der Google-Suche zu dir gekommen und siehe da – es hat geklappt. Sie sind sogar nebeneinander. Ich muss nur noch herausbekommen, wie ich sie zentriert platziere, aber darum kümmere ich mich heute Abend.

    Vielen Dank und liebe Grüße,
    SaKo

  • 4 Jahren ago

    1000 Dank für die Anleitung!
    Ich weiß nicht, wie viele ich schon versucht habe und nie hat’s geklappt.
    Es ist zwar noch nicht perfekt, aber viiiiel besser als vorher – Danke!
    LG
    Kati

  • 4 Jahren ago

    Vielen vielen Dank für diese super tolle und hilfreiche Anleitung! :)
    Ohne wär ich total aufgeschmissen gewesen und du hast das wirklich super verständlich erklärt!

    Liebste Grüße
    Juliana

  • 4 Jahren ago

    Supiiiii!!! Vielen Dank :) endlich weiß ich wie ich die Social Media Buttons einbauen kann und das hat super funktioniert. Jetzt muss ich nur noch die für mich passenden Buttons finden.

    Many Thanks !!

  • 4 Jahren ago

    Oh gott tausenddank! habe lange nach so einem Post gesucht. Hat alles Einwandfrei geklappt :)

  • 4 Jahren ago

    DANKE DANKE DANKE für diese tolle Anleitung! :)

    • 4 Jahren ago

      Gerne. Gerne. Gerne! :-)
      LG Bine

  • Elealinda-Design
    4 Jahren ago

    Liebe Bine, tausend Dank für diese wunderbare und doch recht einfache Anleitung. Das Thema Social Media Icons habe ich schon ewig vor mir hergeschoben. Dank deiner Hilfe habe ich es jetzt endlich in Angriff genommen und umgesetzt. Noch nicht perfekt, aber ich weiß ja jetzt, wie es geht :-). LG und schönes Wochenende, Paula

    • 4 Jahren ago

      Sehr gerne! Das freut mich!
      LG Bine

  • 3 Jahren ago

    Liebe Bine, ich habe so lange nach einer Anleitung dafür gesucht!! Danke dafür! Ich habe es auch schon sofort ausprobiert und es hat geklappt! Schöne Ostern für Dich! Kathrin*

Leave A Comment