WPLounge
Social Media icons in WordPress sidebar
Home » Tutorials » Social media icons in WordPress sidebar

Social media icons in WordPress sidebar

We weten inmiddels hoe we een afbeelding in een WordPress sidebar moeten plaatsen, maar hoe werkt dat met meerdere social media icons die mooi uitgelijnd moeten zijn en moeten linken naar de social media websites? Daar gaan we nu achter komen!

Affiliate disclaimer:
In onze artikelen en op onze pagina's staan affiliate links. Wanneer je via één van deze links een aankoop doet, ontvangen wij een (meestal kleine) commissie van de verkoper. Wij geven altijd onze eerlijke mening over producten. Klik hier voor meer informatie.

Tip: Bekijk de onderstaande aanbieding van Elegant Themes. Je krijgt ook toegang tot de WordPress plugins die ze hebben ontwikkeld, waaronder Monarch, een all-in-one WordPress social media plugin.

Om te beginnen herhalen we even wat simpele stof om ons geheugen even op te frissen: een afbeelding in een WordPress widget plaatsen, hoe doen we dat?

TIP VAN WPLOUNGE
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium WordPress themes (waaronder Divi!) voor maar 89 dollar!
Bekijk de themes »»
Lees meer over Divi.

Upload eerst een afbeelding via ‘Media –> Nieuw bestand’. Kopieer vervolgens de URL van de afbeelding en plak die tussen de ” ” tekens van de <img /> tag. Zie onderstaand voorbeeld. Wat je tussen de ‘alt’ zet kan bijvoorbeeld de naam van de afbeelding zijn.

Plak deze code in een tekst widget en je afbeelding staat in je WordPress sidebar. Nog niet helemaal duidelijk? Zie ons artikel over het plaatsen van een simpele afbeelding in je sidebar hier.

Social media icons

Het wordt lastiger als je meerdere icons (= kleine afbeeldingen) naast elkaar wilt hebben. Daarnaast willen we natuurlijk dat de afbeeldingen linken naar de bijbehorende social media sites.

1. Social media icons downloaden

Dit is erg gemakkelijk en kan bijvoorbeeld door even te Googlen op ‘Social media icons’. Voor het voorbeeld gebruik ik deze social media icon set, die gratis is te downloaden op de pagina  van de set. Onderstaande afbeelding geeft de pagina weer met de download link, die soms lastig te vinden is.

Social media icon set download

2. Gewenste icons uploaden

Kies een aantal icons die je wilt en upload ze naar je WordPress media bibliotheek. Zorg dat je de URL’s van de icons (die je hebt geupload) op een rijtje hebt in een apart bestand op je computer zodat je gemakkelijk bij de juiste URL’s kunt. Ik zal 4 social media icons plaatsen in een widget: Facebook, LinkedIn, Google+ en Twitter. Natuurlijk kun jij er minder gebruiken, of andere icons.
Upload Social media icons

3. Icons in een widget plaatsen

Ga naar de widget-pagina en maak een tekstwidget aan. De afbeeldingen die je hebt geupload naar je WordPress media bibliotheek zijn 500px x 500px. Dat is erg groot en dat past natuurlijk niet in je sidebar! De oplossing: width=”64″. Nu weet de browser dat de breedte 64px moet zijn, dus zal de hoogte dat ook zijn. Je kunt dit getal groter maken of kleiner maken, probeer het maar eens uit. Plaats in je widget de volgende code:

Na deze stap hoort je widget er zo uit te zien:

Social media icons stap 4

4. Ruimte tussen icons

Ze staan nu erg dicht naast elkaar, wat er niet helemaal goed uitziet. Daar moeten we dus wat op verzinnen.

Nu zit er 11px ruimte tussen icon 1 en 2, 11px ruimte tussen icon 2 en 3 en 11px ruimte tussen icon 3 en 4. Je kunt de 11px veranderen in 15px, dan komen de afbeeldingen verder uit elkaar te staan. Probeer eens andere getallen in te vullen en kijk wat er gebeurt. Update je widget en ga naar je website om het resultaat te bekijken. Niet slecht he? Maar, we zijn nog niet klaar… Na deze stap hoort je widget er zo uit te zien:

Social Media icons in WordPress sidebar

5. Inline elements… bah!

We hebben nu inline-style elements gebruikt om de afbeeldingen ‘opmaak’ mee te geven. Heb je verstand van HTML/CSS dan is het beter als we dit in je stylesheet plaatsen. Weet je niet veel van HTML/CSS, dan is dit prima. Je kunt natuurlijk altijd proberen deze stap te volgen, maar we gaan iets sneller.

Zorg dat de code in je tekst widget verandert naar:

Hierdoor hebben de eerste 3 icons de class ‘smicon’ (social media icon) gekregen en kunnen we in je stylesheet aangeven dat alles met de class ‘smicon’ 11px ruimte aan de rechter kant moet overhouden. Plaats de volgende code in je cascading style sheet (css bestand):

Wanneer je nu de widget update is er – als het goed is – niets veranderd aan de icons. Als er wel wat is veranderd moet je stap 5 nog eens goed proberen.

6. Links toevoegen

Je wilt natuurlijk dat de bezoeker met een klik op een bepaald icon direct naar de pagina gaat waar hij je kan liken, volgen of iets dergelijks. Update je code daarom naar het volgende:

Stap 5 gevolgd? Plak dan de volgende code in je tekst widget. De links naar de profielen (tussen href=” “) moet je uiteraard veranderen.

Stap 5 niet gevolgd? Plak dan de volgende code in je tekst widget.

7. Klaar!

Dat was het. De ‘final versions’ staan in stap 6. Is er iets fout gegaan? Laat een reactie achter en we zullen kijken of we het probleem kunnen oplossen. Onze final-version ziet er zo uit:

Social Media icons in WordPress sidebar

Beoordeel dit artikel

(Nog geen ratings)

Jelle van der Schoot

Jelle van der Schoot is eigenaar van internetbedrijf Bootwebs en heeft WPLounge mede-opgericht. Samen met Wouter Postma schreef hij het boek WordPress - Een inspirerende handleiding.

Gratis op de hoogte blijven?

Meld je gratis aan voor onze nieuwsbrief om op de hoogte
te blijven over ontwikkelingen in WordPress!

5 reacties

Advertenties

Blijf op de hoogte!

Het is Cyber Monday! Elegant Themes & Divi: nu met 25% korting op alle Divi abonnementen! Ga naar Elegant

Scroll Up
Open chat
Skip to content