Auf die Social-Medias verlinken

Hier wird gezeigt, wie Sie (datenschutzkonform) auf Ihre Social-Media-Plattformen verlinken. (Im Gegensatz dazu erlauben die bei den Seiteneigenschaften einschaltbaren 'grauen' Social-Media-Buttons den Besuchern, den Link der besuchten Seite zu verteilen.)

 

Social-Media-Links
(Neuen Teaser erstellen) -> (Schaltfläche) Quellcode

 

(Fügen Sie den nachfolgenden Inhalt ins Textfeld ein. Setzen Sie in den Links die Adressen Ihrer Social-Media-Auftritte ein.)

<p>
  <a class="facebook" href="https://www.facebook.com/.../"
     title="<my site> auf Facebook">&nbsp;</a>
  <a class="linkedin" href="https://www.linkedin.com/.../"
     title="<my site> auf LinkedIn">&nbsp;</a>
  <a class="xing" href="https://www.xing.com/.../"
     title="<my site> auf XING">&nbsp;</a>
  <a class="twitter" href="https://twitter.com/..."
     title="<my site> auf Twitter">&nbsp;</a>
  <a class="instagram" href="https://www.instagram.com/..."
     title="<my site> auf Instagram">&nbsp;</a>
  <a class="youtube" href="https://www.youtube.com/..."
     title="<my site> auf YouTube">&nbsp;</a>
 </p>

Schritt2: Das CSS-Styling in die Seite einbauen

Social-Media-CSS
Seite bearbeiten -> Seiteneigenschaften bearb. -> (Reiter) ALLE ANZEIGEN

 

(Fügen Sie den nachfolgenden Inhalt ins Feld Scripts ein.)

 

<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
{
    width: 21px;
    height: 21px;
    display: inline-block;
    overflow: hidden;
    margin-right: 3px;
    background-repeat: no-repeat;
    background-size: 100%;
    content: "";
    display: inline-block;
    text-decoration: none;
}

.mod-teaser a.facebook
{
    background-image:
    url("https://www.uzh.ch/dam/jcr:00000000-7c02-9358-ffff-ffffea416301/facebook.png");
}
.mod-teaser a.twitter
{
    background-image:
    url("https://www.uzh.ch/dam/jcr:00000000-7c02-9358-ffff-ffff92e7d42e/twitter.png");
}
.mod-teaser a.instagram
{
    background-image:
    url("https://www.uzh.ch/dam/jcr:e0c04bf2-6feb-4925-8043-56aa9cf31214/instagram.png");
}
.mod-teaser a.linkedin
{
    background-image:
    url("https://www.uzh.ch/dam/jcr:00000000-7c02-9358-ffff-ffff9fff7d39/linkedin.png");
}
.mod-teaser a.youtube 
{
    background-image: 
    url("https://www.uzh.ch/dam/jcr:00000000-7c02-9358-ffff-fffffb597cde/youtube.png");
} 
.mod-teaser a.xing
{
    background-image:
    url("https://www.uzh.ch/dam/jcr:39299e70-175a-4d90-b67e-9944a01bddb2/xing.png");
}
</style>