Your SlideShare is downloading. ×
Social media mashup website's
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Social media mashup website's

626

Published on

My Barcamp Presentation for #bcvrt 20/01/2012 about "social media mashup websites".

My Barcamp Presentation for #bcvrt 20/01/2012 about "social media mashup websites".

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
626
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Eerst maak ik graag van de gelegenheid gebruik om mezelf kort voor te stellen.Ik ben Mathias Vissers en werk fulltime bij het Kempense Intracto als webdeveloper.Daarnaast heb ik ook een bedrijfje in bijberoep onder de naam Punt Uit!Mijn kennis en interesses gaan niet puur naar het technische. Ik heb naast een IT-opleiding ook een communicatie-opleiding achter de rug en volg alles wat er reilt en zeilt binnen communicatie, marketing en media.Wie wil kan mij volgen op twitter onder de naam mvissers.Om jullie niet dood te slagen met tien URL’s verwijs ik jullie graag naar mijn about.me voor links naar mijn blog, linkedin, vimeo, …
  • Wie is er allemaal webontwikkelaar hier? Herkenbare situatie Je maakt een site, en daarna gebeurt er niets meer mee, zelfs in deze tijden van Drupal en tal van andere CMS’sen Frustrerend en jammer- Voor alle duidelijkheid, ik heb deze site niet gemaakt, maar dat was de eerste site die ik tegen kwam met een oude datum ;-)
  • Nu heb ik geluk dat ik naast alle eshops en andere website’s, een hele hoop DJ-site’s in mijn portefeuille heb zitten En DJ-site’s, die zijn vaak gelijklopend qua inhoud en willen vaak allemaal hetzelfde
  • Dit is Jeffrey, de vaste freelance designer voor de DJ site’s die ik maak.Een leuke Hollander die waarschijnlijk vloekt als hij deze presentatie ziet vanwege het lelijke lettertype dat ik gebruikt heb op zijn slide Maar Jeffrey is een kei in wat ie doet en op een dag kwam hij met het idee af...
  • Flash is dead!iPad en iPhone niet zichtbaar  jongeren vragen site op tijdens festival, fuif, ...Werd niet altijd onderhouden (zoals eerder aangehaald)
  • Dus Jeffrey had het idee: als we nu alle social media eens samen gieten in één website zodat die website altijd de laatste inhoud weergeeft van wat er gebeurt online...
  • Dus ik dacht: we gooien alle social media widgets op één pagina?Easy moneyGelukkig hebben designers altijd een eigen willetje en krijgen mensen met een beperkt grafisch inzicht niet de kans om hun ideeën verder uit te werken ;-)
  • En zo ontstond de website van DJ Catscan
  • Maar omdat catscan een lelijke vent is en ik jullie aandacht wil behouden heb ik een veel beter voorbeeld....
  • De website van DJ Korsakoff dewelke ik vandaag verder als voorbeeld ga gebruiken.Degenen die willen kunnen volgen op laptop of ipad.Ik overloop even de verschillende dingen die we gedaan hebben.
  • Om te beginnenNo rocket science here. De gewone standaard social media widgets.Google+ meer plus eens dat tweets???
  • Default facebook like boxHerkenbaarheidExtra likes proberen te genereren door de herkenbaarheidTot daar het makkelijke werk.
  • Voor de Twitterfeed doen we niets meer dan een gewone Atom/RSS feed inlezen.Je kan echter ook gebruik maken van de meer geavanceerde Twitter API voor meer mogelijkheden.
  • Voor facebook events gebruiken we de Facebook Open Graph API waarmee je eigenlijk alle data kan afhalen die Facebook toont op zijn site.Dus ook de events voor een bepaalde “facebook page”.
  • De data die je terug krijgt ziet er ongeveer zo uit.Zoals je ziet ontbreekt de afbeelding, maar die kan je op zijn beurt ook weer gaan afhalen.Je kan daar ook heel ver in gaan zoals aanwezigen afhalen, de wall, ...Dat zijn dingen die we zelf niet doen.
  • Voor de YouTube video tonen we altijd de laatst geuploade YouTube video op het channel van KorsakoffOok dit via de YouTube API.Niet enkel de video, maar ook alle info zoals aantal keer bekeken bv.
  • Je kan de YouTube API rechtstreeks aanspreken, maar ik maak hier gebruik van Zend en een open source Google Library zodat je zelf nog minder code moet schrijven.
  • Voor de relaeses, oftewel de discografie, hadden we geluk dat de platenfirma, Hardtunes, een eigen API heeft waarbij we gewoon alle data kunnen afhalen.
  • De foto’s halen we op hun beurt ook weer af via de Facebook Open Graph API.Zo kan je met deze url alle albums opvragen die het profiel heeft
  • En dat geeft dit resultaat ongeveerWaarna je dan via een andere request alle foto’s kan opvragen van dat album
  • Maar omdat elke keer alle data gaan afhalen bij de API’s te lang zou duren + als API onbeschikbaar is, heb ik volgend systeem uitgewerktDe site haalt alle data uit de lokale MySQL database die elke 24u wordt geupdate via een cronjob. Uiteraard enkel als de API’s beschikbaar zijn.De Twitter info wordt wel realtime ingeladen.Bovendien heeft de klant via een admin-gedeelte de mogelijkheid de cache te flushen.
  • Zit niet in Korsakoff maar behoort wel tot de mogelijkheden: soundcloudLaatst geuploade muziek bv implementeren
  • Of als je echt eens gek wilt doen: MySpace
  • Of de iTunes API’s
  • Spotify API
  • Omdat het niet altijd over DJ’s moet gaan. Onlangs gelanceerd, de BOL API om je eigen shop te bouwen, waarbij afhandeling van de bestelling volledig via Bol verloopt.Reseller van bol dus.
  • Twitter developers site
  • Facebook developers site
  • Facebook developers blog
  • Transcript

    • 1. Social MediaMashup Website’sHoe een website bouwendie zichzelf onderhoudt...Mathias Vissers | @mvisserswww.vissers.be#bcvrt
    • 2. Mathias Vissers @mvissershttp://about.me/mvissers Webdeveloper @ intracto.be Bijberoep: Punt Uit!
    • 3. Social Media Mashup Website’s @mvissers
    • 4. Social Media Mashup Website’s @mvissers Credits: Tomorrowland.be
    • 5. jeffreydirkse.com @jeffreydirkseSocial Media Mashup Website’s @mvissers
    • 6. Social Media Mashup Website’s @mvissers
    • 7. Social Media Mashup Website’s @mvissers
    • 8. www.djcatscan.nl @djcatscan
    • 9. Social Media Mashup Website’s @mvissers
    • 10. www.djkorsakoff.com@dj_korsakoff
    • 11. Default buttons...Social Media Mashup Website’s @mvissers
    • 12. Default Like-box...Social Media Mashup Website’s @mvissers
    • 13. Custom Twitter-feed ATOM: http://search.twitter.com/search.atom?q=from:dj_korsakoff&rpp=4 Of de Twitter API voor meer mogelijkhedenSocial Media Mashup Website’s @mvissers
    • 14. Events: Facebook Open Graphhttps://graph.facebook.com/djKorsakoff/events? + tokenSocial Media Mashup Website’s @mvissers
    • 15. Events: Facebook Open Graph { "data": [ { "name": "Masters of Hardcore (NL)", "start_time": "2012-03-24T22:00:00", "end_time": "2012-03-25T08:00:00", "location": "Brabanthallen", "id": "213163798770915" }, { "name": "Reverze 2012", "start_time": "2012-03-17T20:00:00", "end_time": "2012-03-17T23:00:00", "location": "Antwerps Sportpaleis", "id": "320710081294538" }, { "name": "AXELERATOR (CH)", "start_time": "2012-03-16T22:00:00", "end_time": "2012-03-17T01:00:00", "location": "Loft", "id": "220977824654747" } ] } https://graph.facebook.com/213163798770915/picture?access_token=xSocial Media Mashup Website’s @mvissers
    • 16. Video: YouTube APISocial Media Mashup Website’s @mvissers
    • 17. Video: YouTube API $clientLibraryPath = lib/ZendGdata/library/; require_once lib/ZendGdata/library/Zend/Loader.php; Zend_Loader::loadClass(Zend_Gdata_YouTube); $yt = new Zend_Gdata_YouTube(); $yt->setMajorProtocolVersion(2); $videoFeeds = $yt->getUserFavorites(officialkorsakoff); if (count($videoFeeds) > 0) { $videoEntry = $videoFeeds[0]; $latestvideoid = $videoEntry->getVideoId(); $videodescription = $videoEntry->getVideoDescription(); $videotitle = $videoEntry->getVideoTitle(); $videocount = $videoEntry->getVideoViewCount(); $videodate = $videoEntry->mediaGroup->uploaded->text; $videoauthor = $videoEntry->author[0]->name->text; }Social Media Mashup Website’s @mvissers
    • 18. Releases: HardTunes APISocial Media Mashup Website’s @mvissers
    • 19. Photos: Facebook Open Graphhttps://graph.facebook.com/djKorsakoff/albumsSocial Media Mashup Website’s @mvissers
    • 20. Photos: Facebook Open Graph { "data": [ { "id": "10150477642464086", "from": { "name": "Korsakoff", "category": "Musician/band", "id": "18254279085" }, "name": "2012", "description": "2012 ", "link": "http://www.facebook.com/album.php?fbid=10150477642464086&id=18254279085 &aid=365350", "cover_photo": "10150477644059086", "count": 7, "type": "normal", "created_time": "2012-01-08T16:41:15+0000", "updated_time": "2012-01-08T16:53:17+0000", "can_upload": false, "likes": {...}, "comments": {...} }, https://graph.facebook.com/10150477642464086/photosSocial Media Mashup Website’s @mvissers
    • 21. Caching MySQL CronjobSocial Media Mashup Website’s @mvissers
    • 22. developers.soundcloud.com
    • 23. developer.myspace.com
    • 24. api.itunesapis.com
    • 25. developer.spotify.com
    • 26. developers.bol.com
    • 27. dev.twitter.com
    • 28. developers.facebook.com
    • 29. developers.facebook.com/blog
    • 30. Hire me: www.vissers.be mathias@vissers.be +32 474 50 98 84 @mvissers www.linkedin.com/in/mvissers http://about.me/mvissers
    • 31. http://in.trac.to/jobsSocial Media Mashup Website’s @mvissers
    • 32. Social Media Mashup Website’s @mvissers

    ×