Tutorial: Neue Share Icons
Vorschau
| Hinweis: Dieses Tutorial ist kein Ersatz für die Jimdo-Share-Funktion, sondern ein Addon dafür. Es erweitert diese um ein moderneres und schickeres Design - ihr fügt die Icons aber immer noch über die neue Jimdo Funktion ein. |
Schwierigkeitsgrad
Einfach - einfache Codes, die nur ein mal angepasst werden müssen
Kompatibilität
Jimdo Share Modul
Das Tutorial läuft über das neue Jimdo Objekt "Share Icons". Ihr müsst die Anleitung also nur ein ein einziges mal nachbauen und könnt dann ganz normal mit der Jimdo Share-Funktion weiterarbeiten - nur dass die jetzt schickere Icons besitzt.
Diese Share-Seiten werden von den neuen Icons unterstützt:
Facebook, Twitter, Google Buzz, Digg, Mail, StumbleUpon, Tumblr, Reddit, Hyves
Bei allen anderen Icons wird das normale Share-Icon von Jimdo angezeigt.
Größen und Style:
Es werden nur Icons mit dem Style "farbig" in den größen 16px und 32px unterstützt, bei allen anderen werden die standard Jimdo Icons angezeigt.
Tutorial
1. Bilder hochladen
Erstellt eine neue versteckte Seite auf eurer Jimdo- Page oder verwendet eine vorhandene. Dort ladet ihr die folgenden zwei Bilder in zwei einzelne Bilder-Module hoch. Wichtig: nach dem Hochladen müssen die Grafiken über das Plus-Icon im Bildermodul auf die maximale Größe vergrößert werden.
2. Grafiklinks kopieren
Geht nun in den Ansichtsmodus eurer Seite und kopiert die Grafikadressen beider Bilder heraus. Speichert diese vorübergehend in einem Textdokument auf eurem PC ab.
Grafikadresse kopieren im Firefox:
Rechtklick auf das Bild, "Grafikardresse kopieren"
Im Internet Explorer:
Rechtsklick auf das Bild, Eigenschaften, unter "Adresse" steht die Grafikadresse. Dreifacklick darauf, Rechtsklick, "kopieren".
3. HTML Codes
Ihr habt jetzt zwei herauskopierte Grafiklinks auf eurem PC abgespeichert, einen für die kleinen 16px Grafiken und einen für die größeren 32px Grafiken.
Es wäre durchaus sinnvoll zu beschriften, welcher Link zur 16px und welcher zur 32px Grafik gehört.
Jetzt müsst ihr nur noch folgenden Code unter "Einstellungen", "Head bearbeiten" in den Header eurer Page einfügen:
<style type="text/css">
div.cc-sharebuttons-size-32 div.cc-sharebuttons-style-1 a {
background-image: url("Grafiklink-32px") !important;
}
div.cc-sharebuttons-size-16 div.cc-sharebuttons-style-1 a {
background-image: url("Grafiklink-16px") !important;
}
</style>
Grafiklink-32px - Hier setzt ihr den Link für die große 32px-Grafik ein
Grafiklink-16px - Hier setzt ihr den Link für die kleine 16px-Grafik ein
4. Fertig
Fertig. Immer, wenn ihr jetzt "Share Buttons" über die ganz normale Jimdo-Share-Funktion auf eure Page einfügt, werden die neuen Icons angezeigt.
Natürlich nur bei den unterstützten Seiten (siehe oben), nur mit dem Style "farbig" und nur mit den Größen "16px" so wie "32px".
Und wie das ganze wieder löschen?
Wenn ihr wieder die alten Jimdo-Icons zurück wollt, müsst ihr lediglich den eingefügten Code wieder aus dem Header löschen. Fertig. Wenn ihr wollt könnt ihr dann natürlich auch die Bilder mit den Icons wieder entfernen
5. Die Tutorialsammlung unterstützen
Unterstützt die Tutorialsammlung, damit es auch weiterhin Jimdo Tutorials gibt!
Z.B. indem ihr auf "gefällt mir" drückt oder meine Hauptseite besucht.
Kommentar schreiben
kwoxer (Sonntag, 13 Februar 2011)
Sehr gute Anleitung.
Für den einen oder anderen sicherlich sehr hilfreich.
Alexander Bratrich (Mittwoch, 16 Februar 2011 18:38)
gut, gut... aber jetz gibts ja auch eine Jimdo-Funktion dafür.
Fabian S. (Mittwoch, 16 Februar 2011 18:42)
Da hast du das Tutorial nicht richtig gelesen. Dieses Tutorial ist ein "Addon" für die Jimdo-Funktion. Sie fügt dieser einen moderneren Icon-Style hinzu, funktioniert aber ausschließlich mit dieser neuen Jimdo Funktion!
Gruß, Supporter Fabian
mjthekingofpop (Sonntag, 27 Februar 2011 19:36)
Juhuuuuu! Sehr einfach und funktioniert! :) Ich hab diese altmodischen Buttons von Jimdo schon immer gehasst, die waren grässlich! ;D
Danke! :)
saphira-123 (Sonntag, 06 März 2011 18:42)
Super Tut, hab ich gleich ausprobiert.
step-on (Donnerstag, 28 April 2011 14:31)
Geniales Tutorial, Danke.
Wie kann ich das XING Icon ergänzen?
fishkeeping (Dienstag, 03 Mai 2011 22:12)
DANKE =)
Sound Inferno (Freitag, 03 Juni 2011 22:57)
Also bei mir funktioniert es nicht :(
Kaffeeprojekt (Dienstag, 30 August 2011 23:37)
bei mir auch nicht - zumindest nicht mit 32px. zwar ist genug platz, aber irgendwie sieht alles gequetscht aus und man sieht icons, die gar nicht angetickt sind.
Jimdo Tutorials (Dienstag, 30 August 2011 23:41)
Du musst die Bilder bei Schritt 1 über das Plus-Symbol auf die maximale Größe vergrößern. Dann funktioniert es (evtl musst du die Folgeschritte nochmal durchführen).
Gruß, JimdoFriend Fabian
Kaffeeprojekt (Mittwoch, 31 August 2011 18:34)
jetzt klappt's. danke.
banboo (Samstag, 03 September 2011 00:37)
Super thx kann man evt auch eine eigene verlinkung auf die jeweiligen pages machen
Jimdo Tutorials (Sonntag, 04 September 2011 12:48)
Die Verlinkung führt immer auf die jeweilige Unterseite, wenn du sie auf dieser einfügst und nicht in der Sidebar.
Gruß, JimdoFriend Fabian
sabsematze (Samstag, 10 September 2011 08:03)
Super Sache!
guitarartstudio1 (Samstag, 01 Oktober 2011 00:25)
Hi fabian also meine share button die ich nachgebaut habe aus deinem tutorial sind auch futsch genau so wie die bilder unterseiten Header
und jimdo bietet kein support an
Jimdo Tutorials (Samstag, 01 Oktober 2011 13:42)
Das Problem wurde bereits auf den anderen von dir genannten Tutorialseiten besprochen. Ich bin schon in Kontakt mit Jimdo um es zu lösen.
Gruß, JimdoFriend Fabian
tsv-gluecksburg-handball (Montag, 12 Dezember 2011 16:08)
Kann Ich das kleine Facebookbild auch inten in die Impressumleiste packen?
Liebe grüße
Jimdo Tutorials (Montag, 12 Dezember 2011 16:14)
Den Inhalt der Impressumsleiste kannst du bei Jimdo nicht bearbeiten. Hier lässt sich also nichts einfügen.
Gruß, JimdoFriend Fabian
tsv-gluecksburg-handball (Montag, 12 Dezember 2011 19:12)
Schade! Wer ja mal ein guter Verbesserungsvorschlag!
Aber Ich habe jetzt gesehen, dass man auf der rechten seite eine Art Infobox erstellen kann.. Somit geht es ja teilweise^^
Danke für deine Hilfe
motorsport-pixel (Donnerstag, 15 Dezember 2011 12:17)
Hey,
hatte ne Frage, welche jetzt aber nicht direkt was mit den Icons zu tun hat, sondern meine Frage ist:
Von welcher Stelle holt der Share Button den Content für die Seite die sich öffnet wenn man den Button klickt
Also bei dir wäre das die Grafik und dieser Text
"Die größte Jimdo-Tutorialsammlung mit ......"
wäre super wenn du mir das sagen könntest
gruß
Jimdo Tutorials (Freitag, 16 Dezember 2011 17:52)
Der Text ist der Seitentitel deiner Webseite (kannst du unter Einstellungen ändern), das Bild ist immer das erste Bild, das auf deiner Webseite geladen wird. Normalerweise kann man dann mit den "weiter" Pfeilen nach dem Klick auf den Share-Button durch alle Bilder der Seite zappen. Man kann das Standardbild auch überschreiben. Einfach einmal nach "facebook share thumbnail" googlen... Der Code kommt dann übrigens unter Eisntellungen>Head.
Gruß, JimdoFriend Fabian
hof-jugendkreis (Donnerstag, 12 April 2012 22:28)
wie kann ich bei der e-mail gleich einen fertig text zum abschiken bereitstellen
Jimdo Tutorials (Freitag, 13 April 2012 09:58)
Das ist leider nicht möglich, da du hier ja das original Jimdo-Modul verwendest, welches sich nicht anpassen lässt...
Gruß, JimdoFriend Fabian
hof-jugendkreis (Freitag, 13 April 2012 19:41)
thx für schnelle antwort
planguh (Sonntag, 04 November 2012 18:32)
Wie ist es denn möglich, überhaupt die Jimdo-Funkton zu bekommen. Ich habe nur ein Tutorial auf English gefunden, wo einfach unter Objekt hinzufügen auf Share-Icnos geklickt wird. Ich finde diese Funktion auf meiner Seite leider nicht :/ Kann mir da jemand helfen?
Jimdo Tutorials (Donnerstag, 08 November 2012 10:30)
Bei den Share Buttons handelt es sich um eine standard Jimdo-Funktion, die auch bei dir vorhanden sein muss - eventuell hast du sie nur übersehen? Falls nicht melde dich einmal beim Jimdo-Support!
Gruß, JimdoFriend Fabian