Inhaltselement: Social Share

Teilen ist heute völlig normal. Also teile die Inhalte deiner Webseite mit dem sozialen Netzwerk. Mit page4 geht das ganz einfach. Mit dem Inhaltselement Social Share hast du die Möglichkeit, deine Webseite mit 12 verschiedenen Netzwerken zu verbinden. Die Buttons dafür haben wir bereits für dich zusammengestellt.

 

Facebook, Twitter, Evernote, Xing, Linkedin, Reddit, Yoolink, Tumblr, Tuenti, Digg, und E-Mail.

 

Das sind die Einstellungen im Content für die oben angezeigten Icons: Alle Icons wurden angeklickt und damit nach rechts verschoben und dann noch ein wenig per drag&drop sortiert. Die Größe der Icons ist 48x48 px und die Darstellung, wie man sieht, ist farbig. Außerdem wurde eingestellt, dass der Abstand zwischen den Icons bei 5 px liegen soll. Die Ausrichtung in der Spalte ist auf "links" gesetzt. Klickst du auf ein Icon, dann wird diese Seite der Hilfe "übernommen" und du könntest deinen Freunden im entsprechenden Netz mitteilen, dass du diese Seite gefunden hast, dass sie dir gefällt und du diese Webseite daher mit anderen teilen möchtest. Was du natürlich gerne tun kannst. Aber ich denke, das Prinzip ist deutlich geworden.

 

Das Konzept ist ganz einfach. Du baust das Inhaltselemente auf eine deiner Seiten ein, die du gerne teilen möchtest und wählst aus, welche Netzwerk angezeigt werden sollen. Kommt ein Besucher auf diese Seite und findet diese so gut, dass er sie teilen möchte, dann klickt er auf einen der Buttons und je nachdem welches Netzwerk er ausgewählt hat, öffnet sich ein neues Fenster. Das ist je nach Netzwerk unterschiedlich. Wichtig ist, dass du nur einen Link auf einem Netzwerk teilen kannst, wenn du zum einem Mitglied in diesem Netzwerk bist und zum anderem zum Zeitpunkt des „Teilen wollen“ auch eingeloggt bist.

 

Klickt ein Besucher zum Beispiel auf „Digg“ dann geht ein Fenster auf mit dem Hinweis „Submit a link to Digg“. Darunter ist ein Feld, wo der Link zu deiner Seite angegeben ist und wenn der Besucher nicht bei Digg eingeloggt ist, hat er die Möglichkeit, sich über seinen Facebook oder Twitteraccount anzumelden.

Bei Reddit kommt zuerst das Anmeldefenster und der Link wird erst angezeigt, wenn du eingeloggt bist. Bei Facebook hat der Besucher zusätzlich die Möglichkeit, einen Kommentar zu dem geteilten Link zu schreiben. Hinter jedem Icon ist hinterlegt, welche Möglichkeiten das jeweilige Netzwerk bietet und welche Seite deinem Besucher angezeigt werden sollte. Du musst dich um nichts kümmern.

 

Neben den Netzwerken ist auch die Möglichkeit vorhanden, dass dein Besucher den Link per Email verschickt. Klickt er auf das entsprechende Icon, dann öffnet sich ein Emailprogramm und der Link z deiner Seite wird in die Email eingefügt. Jetzt muss der Besucher noch angeben, an wen er den Link schicken will und wird sicher dazu ein paar Zeilen schreiben.

Hinweis: Du kannst auf beliebig vielen Seiten eine Social Share Leiste einbauen. Es wird immer der Link der einzelnen Seite geteilt. Für Artikel im Blog gibt es eine eigene Social Share Leiste.

 

Auswahl (1)(2)

Im oberen Bereich sind alle Netzwerke als Icons dargestellt. Auf der linken Seite sind alle unbenutzten Netzwerke. Auf der rechten Seite werden die von dir gewählten Netzwerke angezeigt.

 

Möchtest du ein Netzwerk auswählen, klickst du einfach auf ein Icon und schon wird es auf der rechten Seite angezeigt und auf der linken Seite soweit aufgehellt, dass man erkennt, dass an der Stelle des Icons nur noch ein Platzhalter steht. Du kannst das Icon auch anfassen und rüberziehen. Das hat den gleichen Effekt.

Möchtest du ein Netzwerk wieder aus der Auswahl nehmen, klickst du einfach das entsprechende Icon auf der rechten Seite an und es verschwindet dort und nimmt den alten Platz auf der linken Seite wieder ein.

 

Hiermit legst du fest, wie die Icons dargestellt werden sollen.

Icon Größe (3) = 16x16 px bis 64x64 px in 5 verschiedenen Größen. Einfach die entsprechende Größe wählen. Die jeweils ausgewählte Größe ist blau hinterlegt und gilt für alle Icons.

Optik (4) = Du kannst zwischen „Schwarz-Weiß“ und „Farbig“ wählen.

Ausrichtung (5) = Hiermit legst du fest, ob die Icon-Leiste links, mittig oder rechts in der Spalte angezeigt werden soll. Wenn du so viele Netzwerke anzeigst, dass diese nicht in einer Reihe angezeigt werden können, dann werden die restlichen Icons in einer zweiten Reihe dargestellt und diese Reihen werden zueinander ebenfalls mit der von dir ausgewählten Ausrichtung platziert. Hast du zwei Reihen und in der ersten Reihe stehen 7 Icon und in der zweiten Reihe 3 Icon, dann werden diese 3 Icon mittig unter die 7 Icon ausgerichtet, wenn du als Ausrichtung mittig angegeben hast usw.

Zwischenabstand (6) = Du kannst einen Wert zwischen 1px und 50 px eingeben. Dieser Abstand wird auch verwendet, wenn die icons in mehr als einer Reihe dargestellt werden.

 

Video-Tutorial

Schau dir unser Video-Tutorial zum Thema "Inhaltselement: Social Share" an.