Social media
Social media is een verzamelnaam voor alle internet-toepassingen en websites waarmee het mogelijk is om informatie met elkaar te delen op een gebruiksvriendelijke en vaak leuke wijze. Op websites zie je dan ook vaak buttons of gadgets waarmee je anderen snel kunt laten weten dat je wat leuks of interessants hebt gevonden. Door op zo'n button of gadget te klikken kun je bijv. meteen iets op je Hyves, Facebook, Twitter, etc. pagina zetten.
Door op de eigen website ook één of meerdere buttons en/of gadgets te plaatsen bied je bezoekers direct en eenvoudig de mogelijkheid om de informatie van de eigen website te delen en daarmee makkelijker en sneller wereldkundig te maken.
NB: Hoewel het integreren van een button of gadget vaak eenvoudig en snel geregeld is, verdient het de aanbeveling om deze toch door de vormgever op te laten nemen als vast onderdeel van de vormgeving.
Op die manier kan makkelijk worden geregeld dat de button/gadget automatisch op de alle pagina's van de website staat, correct wordt weergegeven en ook feilloos werkt.
In de volgende hoofdstukken beschrijven we eerst welke methoden er voor het invoegen bestaan om vervolgens voorbeelden van verschillende social media websites geven.
Algemeen
De meeste social media websites bieden de mogelijkheid om (stem)buttons, gadgets, widgets, content, etc. op de eigen website te zetten. Daarbij biedt men grofweg de volgende technieken aan om het een of ander te integreren:
Hyperlinks
Men biedt een stukje HTML-code voor een eenvoudige hyperlink aan, meestal met een afbeelding, bijvoorbeeld:
<a href="http://reddit.com/submit" onclick="window.location = 'http://reddit.com/submit?url=' + encodeURIComponent(window.location); return false"><img src="http://reddit.com/static/spreddit1.gif" alt="submit to reddit" border="0" /></a>
Ingevoegd via de HTML invoegen-knop 
levert dat bijvoorbeeld het volgende op
iframe
Via een iframe toont een social media website eigenlijk een hele kleine pagina in de eigen pagina. De social media website kan zo zelf bepalen wat men toont en kan dus ook zonder de opmaak/werking van de eigen website te verstoren ook geavanceerdere functionaliteit aanbieden. Bijvoorbeeld:
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2F&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=30" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:30px;" allowTransparency="true"></iframe>
Levert ingevoegd via de HTML invoegen-knop op
Javascript
Via javascript kan een social media website in principe net als bij een iframe tonen wat men wenst. Echter, in de meeste gevallen wordt er HTML-code gegenereert die direct in de eigen pagina zelf wordt gezet (in plaats van in een iframe). Nadeel: soms kan dit conflicteren met de eigen vormgeving waardoor de 'button' niet goed wordt weergegeven of helemaal niet werkt.
Ander, groter, nadeel: als javascript in het tekstvlak van het cms wordt gezet, dan zal de javascript steeds weer de code invoegen als de pagina in het cms wordt geladen, het cms slaat dat weer op, etc. etc., ... met als resultaat tientallen buttons op de pagina!
NB: Om javascript veilig in te kunnen voegen moet er vóór het invoegen een macro van worden gemaakt. Dit doet het cms automatisch als de HTML wordt ingevoegd via de -knop.
Biedt een social media website bijvoorbeeld onderstaande javascript aan
<script src="http://www.stumbleupon.com/hostedbadge.php?s=2"></script>
dan maakt het cms daar na invoegen het volgende van (alle <-haakjes zijn vervangen met een [ en alle >-haakjes met een ]):
[script src="http://www.stumbleupon.com/hostedbadge.php?s=2"][/script]
Het script is dan als macro zichtbaar in het cms, na publiceren is het resultaat:
[script src="http://www.stumbleupon.com/hostedbadge.php?s=2"][/script]
Voorbeelden van social media buttons, gadgets, etc...
Hieronder vindt u van een aantal bekende social media websites wat voorbeelden van integratie-mogelijkheden. Het zijn voorbeelden: in de meeste gevallen moet u zelf via de social media website de button, gadget of widget configureren (gaat altijd heel makkelijk) en vervolgens die code op uw eigen website gebruiken!
AddThis
http://www.addthis.com/web-button-select
Liever lui dan moe? Gebruik de buttons van AddThis. Deze website biedt in 1 klap alle buttons aan van alle belangrijke social media websites. Selecteer de gewenste weergave en klik aan het eind op 'Get the code'. Bijvoorbeeld:
<!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_default_style "> <a href="http://www.addthis.com/bookmark.php?v=250&username=xa-4ce575730f42a10c" class="addthis_button_compact">Share</a> <span class="addthis_separator">|</span> <a class="addthis_button_preferred_1"></a> <a class="addthis_button_preferred_2"></a> <a class="addthis_button_preferred_3"></a> <a class="addthis_button_preferred_4"></a> </div> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4ce575730f42a10c"></script> <!-- AddThis Button END -->
Let op! De code bevat een stukje javascript dat eerst moet worden voorzien van blokhaken. Het cms doet dit automatisch bij het invoegen:
... </div> [script type="text/javascript" src=http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4ce575730f42a10c][/script] <!-- AddThis Button END --> ...
Ingevoegd via de -knop is het resultaat:
[script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4ce5775a0dc148f6"][/script]NB: Helaas werken niet alle AddThis buttons door ze direct in het tekstvlak van het cms op te nemen. Laat AddThis buttons bij voorkeur door de vormgever als vast onderdeel van de vormgeving opnemen.
Facebook
http://developers.facebook.com/plugins
Facebook kent vele zogenaamde Social plugins. Op een paar na bieden ze allemaal de mogelijheid om als iframe op de eigen pagina gezet te worden. Bijvoorbeeld:
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2F&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=30" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:30px;" allowTransparency="true"></iframe>
Levert ingevoegd via de HTML invoegen-knop op
Twitter
http://twitter.com/about/resources
Follow buttons
Een follow button is niets meer dan een afbeelding (de button) met een linkje naar de eigen Twitter-pagina. Verschillende buttons staan op Twitter incl. de HTML met de hyperlink:
<a href="http://twitter.com/barackobama"><img src="http://twitter-badges.s3.amazonaws.com/follow_me-c.png" alt="Follow barackobama on Twitter"/></a>
wordt:
Een hyperlink naar de eigen Twitter-pagina is natuurlijk ook snel gemaakt door zelf een afbeelding op een pagina in te voegen en van de hyperlink naar http://twitter.com/<eigennaam> te voorzien, bijvoorbeeld
Bronnen voor Twitter-buttons:
http://www.twitbuttons.com/
http://www.twitterbuttons.com/
Tweet op pagina tonen
Twitter biedt ook de mogelijkheid om 1 tweet op een pagina in te voegen. Zie voor meer informatie de volgende pagina met uitleg.
Tweet button
Met een Tweet-button op de eigen website kunnen mensen direct over de pagina twitteren. Een voorbeeld van de code door Twitter gegenereerd:
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
Hier dient de xcms_noclass te worden toegevoegd en van de javascript een macro gemaakt te worden:
<a href="http://twitter.com/share" class="xcms_noclass twitter-share-button" data-count="horizontal">Tweet</a>[script type="text/javascript" src="http://platform.twitter.com/widgets.js"][/script]
Het resultaat
Tweet[script type="text/javascript" src="http://platform.twitter.com/widgets.js"][/script]
Twitter widgets
Eigen tweets kunnen op de website worden getoond met de widgets van Twitter. De code die Twitter aanbiedt is javascript die eerst moet worden voorzien van blokhaken rondom de <script>-tags zodat het een macro wordt. Het cms regelt de blokhaken automatisch bij het invoegen. De originele code
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('barackaobama').start();
</script>
ziet er na invoegen wellicht wat vreemd uit maar werkt wel gewoon:
[script src="http://widgets.twimg.com/j/2/widget.js"][/script] [script] new TWTR.Widget({ version: 2, type:
'profile', rpp: 4, interval: 6000, width: 250, height: 300, theme: { shell: { background: '#333333', color: '#ffffff' },
tweets: { background: '#000000', color: '#ffffff', links: '#4aed05' } }, features: { scrollbar: false, loop: false, live:
false, hashtags: true, timestamp: true, avatars: false, behavior: 'all' } }).render().setUser('barackobama').start();
[/script]
Bovenstaande geeft na publiceren:
[script src="http://widgets.twimg.com/j/2/widget.js"][/script] [script] new TWTR.Widget({ version: 2, type: 'profile', rpp: 4, interval: 6000, width: 250, height: 300, theme: { shell: { background: '#333333', color: '#ffffff' }, tweets: { background: '#000000', color: '#ffffff', links: '#4aed05' } }, features: { scrollbar: false, loop: false, live: false, hashtags: true, timestamp: true, avatars: false, behavior: 'all' } }).render().setUser('barackobama').start(); [/script]
Tip: Twitter-berichten kunnen eenvoudig van de RSS-module op de eigen website gezet.
Op de eigen Twitter-pagina staat rechtsonder een RSS-icoontje. Klik er op en in de adresbalk van de browser staat de hyperlink naar de eigen berichten. Kopieer de hyperlink en vul deze in als URL bij de externe RSS-feed. Indien gewenst kan de vormgever de weergave geheel naar wens vormgeven!
LinkedIn
http://developer.linkedin.com/community/widgets
LinkedIn kent een aantal widgets die op de eigen website gezet kunnen worden. Bijvoorbeeld die voor het eigen profiel (klik op de naam voor de popup met profiel informatie):
Widgets van LinkedIn bestaan uit een stuk javascript dat in de <head>-tag van de HTML moet komen te staan. Dat kan via de pagina-instellingen, tabje Extra worden geregeld. Vervolgens moet een hyperlink als hierboven worden ingevoegd. Bijvoorbeeld:
<a class="xcms_noclass linkedin-profileinsider-popup" href="http://www.linkedin.com/in/reidhoffman">Reid Hoffman</a>
Om te voorkomen dat het cms de hyperlink aanpast (want een externe hyperlink) moet aan class xcms_noclass worden toegevoegd (zie hierboven).
Hyves
http://www.hyves-developers.nl/documentation/hyvesconnect-js/getting-started-buttons
Hyves biedt aan om een button op de eigen website te zetten. Net als bij LinkedIn moet eerst een stukje javascript aan de <head>-tag worden toegevoegd (via pagina-instellingen, tabje Extra). Vervolgens moet een stukje javascript in de tekst zelf worden gezet. Bijvoorbeeld:
<script type='text/javascript'>Hyves.connect.tip({title: 'This is the title.', body:'This is the body.', category:'12'});</script>
Na van de javascript weer een macro ([...]) te hebben gemaakt (doet cms automatisch) verschijnt er:
[script type='text/javascript']Hyves.connect.tip({title: 'This is the title.', body:'This is the body.', category:'12'});[/script]
StumbleUpon
http://www.stumbleupon.com/badges/
StumbleUpon biedt aan aantal badget aan voor op de eigen website. Ze worden allemaal ingevoegd via javascript, bijvoorbeeld:
<script src="http://www.stumbleupon.com/hostedbadge.php?s=2"></script>
Hier moet weer een macro van gemaakt worden (doet het cms automatisch):
[script src="http://www.stumbleupon.com/hostedbadge.php?s=2"][/script]
wat als resultaat heeft:
[script src="http://www.stumbleupon.com/hostedbadge.php?s=2"][/script]
http://www.reddit.com/buttons
reddit biedt een grote keus uit verschillende buttons. Ze worden allemaal ingevoegd als javascript
<script type="text/javascript" src="http://reddit.com/static/button/button1.js"></script>
of als hyperlink
<a href="http://reddit.com/submit" onclick="window.location = 'http://reddit.com/submit?url=' + encodeURIComponent(window.location); return false"><img src="http://reddit.com/static/spreddit10.gif" alt="submit to reddit" border="0" /></a>
De javascript variant dient omgezet te worden in een macro ([...]), de hyperlink variant kan direct worden ingevoegd. Het resultaat:
[script type="text/javascript" src="http://reddit.com/static/button/button1.js"][/script]
Tweetmeme
http://help.tweetmeme.com/2009/04/06/tweetmeme-button/
Via de Tweetmeme retweet button kunnen bezoekers eenvoudig en sneller twitteren over de pagina/website waar de button op staat. De kant-en-klaar code die Tweetmeme aanbiedt:
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
Omgezet in een macro ([...], doet cms automatisch) levert dat de volgende button op:
[script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"][/script]
Op de Tweetmeme website zelf staat meer informatie over hoe de button te 'customizen',
Meer...
Bovenstaande is maar een greep uit alle bestaande social media websites of websites die juist weer het delen van content via social media websites helpen te vereenvoudigen (AddThis). Andere social media websites zullen ook via hyperlinks, iframes en javascript widgets, gadgets, etc. aanbieden om in de eigen website op te nemen. Bovenstaande voorbeelden kunnen dan helpen hoe deze het beste op te nemen zijn.