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!

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?

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.

<img alt="Naam Afbeelding" src="https://www.wplounge.nl/wp-content/uploads/2013/05/Afbeelding.png" />

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.

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.

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:

<img src="https://www.wplounge.nl/wp-content/uploads/2013/05/facebook500.png" alt="Facebook" width="64" />
<img src="https://www.wplounge.nl/wp-content/uploads/2013/05/twitter1.png" alt="Twitter" width="64" />
<img src="https://www.wplounge.nl/wp-content/uploads/2013/05/googleplus-revised.png" alt="Google+" width="64" />
<img src="https://www.wplounge.nl/wp-content/uploads/2013/05/linkedin.png" alt="LinkedIn" width="64" />

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

4. Ruimte tussen icons

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

<img src="https://www.wplounge.nl/wp-content/uploads/2013/05/facebook500.png" alt="Facebook" width="64" style="margin-right:11px;" />
<img src="https://www.wplounge.nl/wp-content/uploads/2013/05/twitter1.png" alt="Twitter" width="64" style="margin-right:11px;" />
<img src="https://www.wplounge.nl/wp-content/uploads/2013/05/googleplus-revised.png" alt="Google+" width="64" style="margin-right:11px;" /> 
<img src="https://www.wplounge.nl/wp-content/uploads/2013/05/linkedin.png" alt="LinkedIn" width="64" />

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:

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:

<img src="https://www.wplounge.nl/wp-content/uploads/2013/05/facebook500.png" alt="Facebook" width="64" class="smicon" />
<img src="https://www.wplounge.nl/wp-content/uploads/2013/05/twitter1.png" alt="Twitter" width="64" class="smicon" />
<img src="https://www.wplounge.nl/wp-content/uploads/2013/05/googleplus-revised.png" alt="Google+" class="smicon" /> 
<img src="https://www.wplounge.nl/wp-content/uploads/2013/05/linkedin.png" alt="LinkedIn" width="64" />

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):

.smicon { margin-right:11px; }

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.

<a href="Link naar Facebook" title="Facebook"><img src="https://www.wplounge.nl/wp-content/uploads/2013/05/facebook500.png" alt="Facebook" width="64" class="smicon" /></a>
<a href="Link naar Twitter" title="Twitter"><img src="https://www.wplounge.nl/wp-content/uploads/2013/05/twitter1.png" alt="Twitter" width="64" class="smicon" /></a>
<a href="Link naar Google+" title="Google+"><img src="https://www.wplounge.nl/wp-content/uploads/2013/05/googleplus-revised.png" alt="Google+" class="smicon" /></a> 
<a href="Link naar LinkedIn" title="LinkedIn"><img src="https://www.wplounge.nl/wp-content/uploads/2013/05/linkedin.png" alt="LinkedIn" width="64" /></a>

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

<a href="Link naar Facebook" title="Facebook"><img src="https://www.wplounge.nl/wp-content/uploads/2013/05/facebook500.png" alt="Facebook" width="64" style="margin-right:11px;" /></a>
<a href="Link naar Twitter" title="Twitter"><img src="https://www.wplounge.nl/wp-content/uploads/2013/05/twitter1.png" alt="Twitter" width="64" style="margin-right:11px;" /></a>
<a href="Link naar Google+" title="Google+"><img src="https://www.wplounge.nl/wp-content/uploads/2013/05/googleplus-revised.png" alt="Google+" width="64" style="margin-right:11px;" /></a>
<a href="Link naar Linkedin" title="LinkedIn"><img src="https://www.wplounge.nl/wp-content/uploads/2013/05/linkedin.png" alt="LinkedIn" width="64" /></a>

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:

Beoordeel dit artikel