Les 8: Social Media
Social media Koppelen
Deze les gaat over Social Media + de laatste vragen.
De nieuwe blokken-editor van Wordpres 5.0 (Gutenberg) geeft ons speciale Instagram, Twitter + Facebook blocks waar we het www-adres (URL) van een enkel bericht van deze Social Media in kunnen plaatsen, en deze worden dan ge-embed. Daarmee zijn ze te zien op een webpagina.
Icons
voor in bijv. de footer ->
Facebook
Plug-in Facebook Feed -> The Custom Facebook Feed allows you to display completely
customizable Facebook feeds
of any public Facebook page or group on your website.
By: Smash Balloon
Website:
https://wordpress.org/plugins/custom-facebook-feed/screenshots/
Instagram
foto Feed -> Instagram Feed Gallery
https://nl.wordpress.org/plugins/insta-gallery/
Door Quadlayers.com
Demo: https://quadlayers.com/instagram-feed/?utm_source=qligg_admin
Facebook Voorbeeld gebruikt op:
3 soorten x berichten: http://www.decultuurschool.nl/berichten/
+ http://topceremonie.nl/ -> nieuws
maar variant op ook: http://www.tomdavid.nl/ -> nieuws
Inloggen Facebook TopCeremonie: ID = 1563350490618050
Let op! dit is wel een page bij instellingen -> vraag: page, group or profile?
—-
Goeie share (+follow) knop op elke webpagina/bericht = Simple Share Buttons Plus
https://docs.simplesharebuttons.com/plus/ (niet gratis)
Alternatief = Social Media Feather – lightweight social media sharing and follow buttons
https://nl.wordpress.org/plugins/social-media-feather/
—
Koekela gebruikt deze plugin (daar was een vraag over):
Facbook like Box plug-in -> Easy Facebook Like Box
Easy facebook like box WordPress plugin allows you to display
fan page posts, like button, and connections on
your website using widget, shortcode or
By: Sajid Javed
https://wordpress.org/plugins/easy-facebook-likebox/
Code in widget op Koekela website =
[efb_likebox fanpage_url=”https://nl-nl.facebook.com/Koekela” fb_appid=”” box_width=”280″ box_height=”” colorscheme=”light” show_faces=”1″ show_header=”1″ show_stream=”0″ show_border=”1″ ]
Uitleg van deze Easy Facebook Like Box plug-in: https://wordpress.org/plugins/easy-facebook-likebox/screenshots/
(Update: Gebruik de Twitter plug-in van Smash Balloon)
Tweet op website via de HTML code (er bestaan hier ook plugins voor zoals hierboven voor Facebook.) Maar ik wil laten zien dat het ook zo kan.
Voorbeeld HTML code Twitter
Widget aanmaken om zo HTML code van Twitter te krijgen:
<a class=”twitter-timeline” href=”https://twitter.com/Lichting98/likes” data-widget-id=”694216786481434624″>De vind-ik-leuks van @Lichting98 op Twitter</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+”://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script>
https://twitter.com/
Login: Lichting98@gmail.com
WW: ****
Nog een Instagram plug-in
(naast die van Quadlaters; Instagram Feed Gallery)
Je foto’s van Instagram op je eigen WP Website zetten kan met deze handige plugin:
https://nl.wordpress.org/plugins/instagram-feed/
Je Instagram ID- nummer kun je hier achterhalen: http://www.otzberg.net/iguserid/
EXTRA – Handleiding lezen want elk thema is anders:
Website http://www.piensveldkeuken.nl
Inloggen = http://www.piensveldkeuken.nl/wp/wp-login.php
Login: Lichting98
WW: ******
Deze opmerking komt vanwege thema: Elegant
http://www.wpexplorer.com/free-theme-documentation/
Handleiding: http://www.wpexplorer.com/free-theme-documentation/
Extra over Portfolio thema’s, deze hebben vaak een opgemaakt bericht zodat er op een bepaalde manier iets getoond kan worden, een portfolio dus. (dus naast een webpagine en een bericht komt er een derde soort pagina bij.)
Voorbeeld Portfolio op http://www.ronaldjanssen.eu :
Info webpagina over thema LOTUS
http://themeforest.net/item/lotus-flexible-multipurpose-responsive-wp-theme/3909293
Demo
http://demo.averta.net/themes/lotus/agency/portfolio-4-columns-grid/
Inloggen: http://www.ronaldjanssen.eu/site/wp-admin
Login: Ronald Janssen
WW: ******
————————————————————————————————
De 3 vragen:
Vraag 1.
Nadat ik Yoast SEO heb geinstalleerd komt hij zelf met gegevens wanneer je een bericht schrijft.
Yoast is niet te vreden naar het lijkt ….
Maar onderstaande tekst zegt me nog niet zo veel van Yoast SEO
De tekst bevat 105 woorden, dit is minder dan het aangeraden minimum van 300. Voeg meer nuttige tekst toe aan dit onderwerp.
Je komt 195 woorden tekort
Slechte SEO-score. De trefwoorden-dichtheid is 2.9%, wat meer is dan het geadviseerde maximum van 2.5%, het trefwoord is 3 keer gevonden.
Jouw trefwoord komt te weinig voor in de tekst
Slechte SEO-score. Er is geen meta-omschrijving opgegeven, zoekmachines zullen tekst van de pagina tonen.
De tekst onder de titel invullen, (met potloodje erachter.) Doe je dat niet dan pakt Google ‘slechts’ de tekst van de website zelf.
Redelijke SEO-score de afbeeldingen op deze pagina bevatten geen alt-tags met het trefwoord.
Titels + Alt-tags van afbeeldingen invullen, zie vraag 3.
Redelijke SEO-score Het trefwoord komt niet voor in de URL van deze pagina. Wanneer je de URL zou aanpassen, vergeet dan geen 301-redirect van de oude URL naar de nieuwe!
Wat is het www-adres bvan deze webpagina/bericht? Ook daar zou je trefwoord in kunnen staan.
Redelijke SEO-score Er staan geen sub-titel-tags (zoals een H2) in de tekst.
Je gebruikt geen HEADERS (H1 – H2 opmaak voor een kop.)
Uitelg van Yoast zelf: https://yoast.nl/artikelen/wordpress-seo/#measure
Duidelijke uitleg van de bovenstaande Trefwoord-berekening (van Webtalis):
https://webtalis.nl/focus-trefwoord-wordpress-seo-yoast/
Installatie uitleg (Webtalis): https://webtalis.nl/handleidingen/wordpress-seo-by-yoast-instellen/
Daarnaast krijg ik het niet voor elkaar om een plugin zoals in Koekela om je te like’n er in te krijgen.
Lijkt toch wel alsof mijn Theme dit tegen houd.
Zie hierboven?
Antwoord: Oei, lastig. Social Media hebben een broertje dood aan automatisch vullen.
Want ze zijn dol op aandacht van mensen (ook bij het posten.) Wel kun je Social media onderling koppelen (ziet er meestal niet zo mooi uit.)
Voorbeeld facebook op twitter:
Ook aan de overkant is het bos bekend! http://fb.me/7HAEHa8sc
Voorbeeld van Tweet op facebook:
H2 Eindhoven heeft zich ingeschreven (Zie: http://t.co/La4SJXyIgP ) Mooi! Wie durft? #Hockeytoernooi @rhvleonidas -> http://t.co/GiPhOR3sKS
(Wel een afbeelding)
Gevonden Plugins:
WP Post -> Twitter = https://wordpress.org/plugins/wp-to-twitter/
WP Post -> Veel social media = https://nl.wordpress.org/plugins/social-networks-auto-poster-facebook-twitter-g/
WP Post -> Veel social media = Jetpack heeft veel functies o.a. Publicize
Publicize makes it easy to share your site’s posts on several social media networks automatically when you publish a new post.
Zie: https://jetpack.me/support/publicize/
HOOTSUITE
Social Media organizeren: https://hootsuite.com/plans/free
————————————–
vraag 3.
Okee, ben benieuwd. Maar nu heb ik toch nog een vraag. Ik zit net een afbeelding te importeren en ik heb bij het importeren netjes de alt tekst ingevuld. Maar nou zegt mijn SEO dat ik dat niet heb gedaan en het stoplicht is ook gelijk op oranje gesprongen. Terwijl t zo mooi groen was en mijn SEO om plaatjes vroeg. Dus grrrr……… Nou vroeg ik me af bedoeld hij dan dat ik bij geavanceerde instellingen Attribuut afbeeldingstitel in moet vullen? (ik heb een plaatje bijgevoegd) Want dat heb ik niet gedaan. En zo ja wat moet ik daar dan invullen? Wat is het eigenlijk? Geen idee.
Hoop dat je dit nog ziet voor vanavond.
Groetjes, tot straks!
Antwoord: Ja, vul vooral ook de TITEL van een afbeelding in.
Voorbeeld html na netjes invullen van Titel + ALt-tag:
<img src=”/website/afbeeldingen/italiaan-amsterdam-bistro-buon-keuken.jpg” title=”Italiaanse keuken Bistro Buon Amsterdam” alt=”Keuken Bistro Buon Italiaans restaurant Amsterdam”>
Rood = titel
Groen = Alt (alt = website nog niet klaar met laden van plaatjes)
Zie uitleg: http://shoutdesign.nl/blog/seo-tips/seo-tip-2-afbeelding-titel-en-beschrijving/
+
http://websiteclub.nl/wat-bij-een-afbeelding-het-verschil-tussen-de-titel-en-de-alt-tekst/
————————————–
vraag 4. Contact form 7 styling via CSS
Uiterlijk van de “verstuur” knop in het formulier van kleur veranderen, van de Contact 7 Plugin?
Hij is nu groen.
Ja dat kan door eigen CSS toe te voegen aan je WP thema.
En wel deze wel de #kleurcode vervangen door de kleur die jij wilt hebben.
#000000 = Zwart
#FFFF00 = Geel
#FFFFFF = Wit
De code zou zijn
.wpcf7-form .wpcf7-submit {
background: #000000;
color: #FFFF00;
}
(Zwarte knop met gele tekst)
En dit is de Mouse-over opmaak
.wpcf7-form input:hover[type=”submit”] {
background:#4f2a0f;
color: #FFFFFF;
}
Gaat dat lukken?
CSS opmaak aanpassen is niet altijd even makkelijk.
Do opmaak helemaal aanpassen
Deze CSS geeft het onderstaande bruine uiterlijk:
.wpcf7-form {
background:#dcc8a5;
padding:20px;
border:2px solid #f6efdf;
margin-bottom:30px;
border-radius:7px;
}.wpcf7-form input {
background:#f6efdf;
padding:5px 7px;
border:3px solid #ccb58c;
margin-bottom:8px;
border-radius:7px;
}.wpcf7-form textarea {
background:#f6efdf;
padding:5px 0px 5px 7px;
border:3px solid #ccb58c;
border-radius:7px;
}.wpcf7-form p {
color:#4f2a0f;
margin-top:10px;
}.wpcf7-form .wpcf7-submit {
background:#4f2a0f;
cursor:pointer;
padding-left:15px;
padding-right:15px;
color:#fff;
border-radius:7px;
}