Het integreren van een lijst met je socialemediakanalen in de footer van je website is een slimme zet. Hiermee geef je je bezoekers de mogelijkheid om rechtstreeks door te klikken naar jouw verschillende sociale mediaprofielen. Maar hoe voer je dit nu precies uit? Hier laten we je zien hoe je een widget kunt maken en een ongeordende lijst met de benodigde kanalen kunt toevoegen aan je website, inclusief stijlvolle pictogrammen.
Stap 1: De HTML-structuur
Om te beginnen, creëer een widget in je websitecode. Hier is een voorbeeld van de HTML-structuur die je kunt gebruiken:
<ul class="social> <li class="facebook" title="Like onze facebook pagina"><a href="https://www.facebook.com/jouwkanaal/" target="_blank" rel="noopener">Like ons op facebook</a></li> <li class="instagram" title="Like onze Instagram pagina"> <a href="https://www.instagram.com/jouwbedrijf/" target="_blank" rel="noopener">Volg ons op instagram</a></li> <li class="linkedin" title="Volg ons via LinkedIn"> <a href="https://nl.linkedin.com/company/jouwbedrijf/" target="_blank" rel="noopener">Volg ons via LinkedIn</a></li> </ul>
In dit voorbeeld hebben we drie sociale media kanalen toegevoegd: Facebook, Instagram en LinkedIn. Elk kanaal heeft zijn eigen class en een bijbehorende link.
Stap 2: De CSS-styling
Nu moeten we deze lijst stylen en de pictogrammen voor de sociale media kanalen toevoegen. Hier is de CSS-code die je kunt gebruiken:
ul.social li + li + li::before {
content: '\f167'; /*LinkedIn*/
}
ul.social li + li::before {
content: '\f16d'; /*Instagram*/
}
ul.social li::before {
display: inline-block;
margin: 0 5px 0 0;
font-family: 'Font Awesome 5 Brands';
font-size: 22px;
color: #FFFFFF;
content: '\f09a'; /*Facebook*/
text-align: center;
width: 25px;
float: left;
}
De bovenstaande CSS-code voegt Font Awesome-pictogrammen toe aan elk lijstitem op basis van hun class. Hierdoor krijg je stijlvolle pictogrammen die de sociale media kanalen vertegenwoordigen.
Stap 3: Aanvullende aanpassingen
Je kunt de CSS-code aanpassen om de pictogrammen verder te personaliseren. Als je andere sociale media-icoontjes wilt gebruiken, kun je de Font Awesome-codes voor die specifieke iconen gebruiken. Font Awesome biedt een uitgebreide bibliotheek met pictogrammen die je kunt vinden op hun website.
Met deze eenvoudige stappen kun je een aantrekkelijke lijst met je socialemediakanalen toevoegen aan de footer van je website. Het geeft je bezoekers een gemakkelijke manier om verbonden te blijven met jouw merk op verschillende sociale platforms.