Social links generator

Genereer de code automatisch https://www.schoolvoorbeeld.be/nodig/sharebtns/

Social links toevoegen aan uw site

Hoe voeg je SOCIAL LINKS toe aan je webpagina's? 

1. Eerst en vooral moet je ervoor zorgen dat je pagina beschikt over OG-tags.

2. Om eenvoudig icoontjes toe te voegen aan je site, gebruiken we het lettertype font-awesome.

3. Voeg de volgende regels toe aan de head van elke webpagina.

<link href="//netdna.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.css" rel="stylesheet">       
<script src="https://use.fontawesome.com/74f014b508.js"></script> 

Een link naar Facebook

1. Start met deze code. Eens klaar, plak je de code op de gewenste plaats in de body van je webpagina.

<a class="sharebtn" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=">Facebook</a>

2. Zoek het adres (de URL) van je webpagina. Dat is bijvoorbeeld: https://www.mijnsite.be/index.html (uiteraard te vervangen door het echte adres). Als je als student je link nodig hebt, zal het eerder iets zijn als https://www.schoolvoorbeeld.be/websites/studenten/gebruikersnaam/index.html

3. Dat adres plak je achter de "u=". Je code wordt dus iets als:

<a class="sharebtn" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://www.schoolvoorbeeld.be/websites/studenten/username/index.html"> 
  Facebook 
</a>

<a class="sharebtn" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://www.schoolvoorbeeld.be/websites/studenten/username/index.html">
      <i class="fab fa-facebook"></i> 
</a>

Een link naar Linkedin

1. Start met deze code. Eens klaar, plak je de code op de gewenste plaats in de body van je webpagina.

<a class="sharebtn" target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=">Linkedin</a>

2. Zoek het adres (de URL) van je webpagina. Dat is bijvoorbeeld: https://www.mijnsite.be/index.html (uiteraard te vervangen door het echte adres). Als je als student je link nodig hebt, zal het eerder iets zijn als https://www.schoolvoorbeeld.be/websites/studenten/gebruikersnaam/index.html

3. Dat adres plak je achter de "u=". Je code wordt dus iets als:

<a class="sharebtn" target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.schoolvoorbeeld.be/websites/studenten/username/index.html">
  Linkedin
</a>

4. Nu vervang je de tekst "Linkedin" door het icoontje:

<a class="sharebtn" target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.schoolvoorbeeld.be/websites/studenten/username/index.html">
     <i class="fab fa-linkedin"></i>
</a>

Een link naar Twitter

1. Start met deze code. Eens klaar, plak je de code op de gewenste plaats in de body van je webpagina.

<a class="sharebtn" target="_blank" href="https://twitter.com/home?status=">Twitter</a>

2. Zoek het adres (de URL) van je webpagina. Dat is bijvoorbeeld: https://www.mijnsite.be/index.html (uiteraard te vervangen door het echte adres). Als je als student je link nodig hebt, zal het eerder iets zijn als https://www.schoolvoorbeeld.be/websites/studenten/gebruikersnaam/index.html

3. Dat adres plak je achter de "u=". Je code wordt dus iets als:

<a class="sharebtn" target="_blank" href="https://twitter.com/home?status=https://www.schoolvoorbeeld.be/websites/studenten/username/index.html">
     Twitter
</a>

4. Nu vervang je de tekst "Twitter" door het icoontje.

<a class="sharebtn" target="_blank" href="https://twitter.com/home?status=https://www.schoolvoorbeeld.be/websites/studenten/username/index.html">
    <i class="fab fa-twitter-square"></i>
</a>

Opmaken met CSS

Ik heb aan elk icoontje de class "sharebtn" gegeven. Je kan die nu van grootte en kleur wijzigen (of wat dan ook mee doen).

.sharebtn{
        color:orange;
       font-size:3rem;
}

.sharebtn:hover{
       transform:scale(2);
      transition:all 0.5s;
}