Auf Social Media-Plattformen verlinken
Hier wird gezeigt, wie Sie datenschutzkonform auf Ihre Social-Media-Plattformen verlinken. Die Links werden in einem Teaser mit den entsprechenden Icons angezeigt - siehe das Beispiel rechts.
Im Gegensatz dazu erlauben die grauen «Sharing Buttons» rechts oben, Besucher*innen die Seite auf ihren eigenen Social Media Kanälen zu teilen:
Sharing Buttons
Schritt 1: Teaser mit den Links erstellen
-
- Social-Media-Links
- (Neuen Teaser erstellen) -> (Schaltfläche) Quellcode
- Schalten Sie auf Quellcode um und fügen Sie den nachfolgenden Code ins Textfeld ein.
- Setzen Sie in den Links die Adressen Ihrer Social-Media-Auftritte ein: https://www.facebook.com/.../
- Entfernen Sie den Code, den Sie nicht brauchen, von <a … bis zu </a>
<p>
<a class="facebook" href="https://www.facebook.com/.../"
target="_blank" title="<my site> auf Facebook"> </a>
<a class="linkedin" href="https://www.linkedin.com/.../"
target="_blank" title="<my site> auf LinkedIn"> </a>
<a class="xing" href="https://www.xing.com/.../"
target="_blank" title="<my site> auf XING"> </a>
<a class="twitter" href="https://twitter.com/..."
target="_blank" title="<my site> auf Twitter"> </a>
<a class="instagram" href="https://www.instagram.com/..."
target="_blank" title="<my site> auf Instagram"> </a>
<a class="youtube" href="https://www.youtube.com/..."
target="_blank" title="<my site> auf YouTube"> </a>
</p>
Schritt 2: Das CSS-Styling in die Seite einbauen
-
- Social-Media-CSS
- Seite bearbeiten -> Seiteneigenschaften bearb. -> (Reiter) Scripts
- Öffnen Sie die «Seiteneigenschaften» und wechseln Sie zum Reiter «Scripts»
- Fügen Sie nachfolgenden Code ins Feld Scripts ein:
<!-- Start Style Sheet Social Media Icons -->
<style>
.mod-teaser a.facebook, .mod-teaser a.linkedin, .mod-teaser a.xing, .mod-teaser a.twitter, .mod-teaser a.instagram, .mod-teaser a.youtube, .mod-teaser a.issuu
{
width: 21px;
height: 21px;
display: inline-block;
overflow: hidden;
margin-right:3px;
}
.mod-teaser a.facebook
{
background-image: url(https://www.uzh.ch/dam/jcr:00000000-7c02-9358-ffff-ffffea416301/facebook.png);
background-repeat: no-repeat;
background-size: 100%;
content: "";
display: inline-block;
text-decoration:none;
}
.mod-teaser a.twitter
{
background-image: url("https://www.uzh.ch/dam/jcr:00000000-7c02-9358-ffff-ffff92e7d42e/twitter.png");
background-repeat: no-repeat;
background-size: 100%;
content: "";
display: inline-block;
text-decoration:none;
}
.mod-teaser a.instagram
{
background-image: url(https://www.uzh.ch/dam/jcr:e0c04bf2-6feb-4925-8043-56aa9cf31214/instagram.png);
background-repeat: no-repeat;
background-size: 100%;
content: "";
display: inline-block;
text-decoration:none;
}
.mod-teaser a.youtube
{
background-image: url("https://www.uzh.ch/dam/jcr:00000000-7c02-9358-ffff-fffffb597cde/youtube.png");
background-repeat: no-repeat;
background-size: 100%;
content: "";
display: inline-block;
text-decoration:none;
}
.mod-teaser a.linkedin
{
background-image: url("https://www.uzh.ch/dam/jcr:00000000-7c02-9358-ffff-ffff9fff7d39/linkedin.png");
background-repeat: no-repeat;
background-size: 100%;
content: "";
display: inline-block;
text-decoration:none;
}
.mod-teaser a.xing
{
background-image: url("https://www.uzh.ch/dam/jcr:39299e70-175a-4d90-b67e-9944a01bddb2/xing.png");
background-repeat: no-repeat;
background-size: 100%;
content: "";
display: inline-block;
text-decoration:none;
}
.mod-teaser a.issuu
{
background-image: url("https://www.uzh.ch/dam/jcr:00000000-7c02-9358-0000-00000bd3a7a4/issuu.png");
background-repeat: no-repeat;
background-size: 100%;
content: "";
display: inline-block;
text-decoration:none;
}
</style>
<!-- Style Sheet Social Media Icons -->