Twitter integratie via @anywhere op Marketingfacts

19 april 2010, 11:48

Een maand geleden introduceerde Twitter het framework @anywhere. Doel van dit alles was het vergemakkelijken van de integratie van Twitter op sites. Vier dagen geleden kwam ook het bijbehorende @Anywhere developersplatform beschikbaar. Dit weekend hebben we op Marketingfacts een eerste kleine stap gezet om Twitter verder te integreren in de site. Verwacht geen enorme grote veranderingen, het is een subtiele eerste stap maar naar mijn mening wel een mooie integratie van Twitter op Marketingfacts.

Hovercards

Leden van Marketingfact Bloggers kunnen in hun profiel aangeven dat ze een twitteraccount hebben en daarbij hun twitteraccountnaam opgeven. Bij de reacties van deze leden wordt vervolgens de actuele avatar van twitter getoond en daarnaast de twitternaam inclusief hovercard. In de kop van de artikelen wordt op vergelijkbare wijze de gegevens van de blogger getoond.

De hovercard met enkele twittergegevens en een follow/unfollow knop komt in beeld zodra je met de muis op de twitternaam of avatar staat. Indien je ingelogd bent in twitter kun je zo direct de persoon bijvoorbeeld gaan volgen.

Elke @tekst wordt link

Daarnaast hebben we een script opgenomen dat er voor zorgt dat elke tektst startende met een @ gevolg door een tekst (die ook een valide accountnaam kan zijn) automatisch een link wordt naar de twitterpagina van die persoon. Sta je met je muis op deze tekst dan verschijnt ook daar een hovercard. We moeten maar eens kijken hoe dit gaat werken en of overdaad hier niet schaadt of tot spam gaat leiden. Overigens zijn de linkjes naar de twitterpagina geen normale hyperlinks dus qua linkbuilding schiet er weinig mee op volgens mij.

Hoe geregeld?

Wil je dit alles ook op je site doorvoeren en heb je beetje verstand van techniek dan hier wat tips.

Twitter hovercards bij elke @tekst

  1. @Anywhere account aanmaken
    Meldt je allereerst aan op http://dev.twitter.com/anywhere en geef daarbij de gegevens van je site op. Vervolgens krijg je een API-key.
  2. Voeg het volgende stuk script toe aan de header van je pagina’s

    <script src=“http://platform.twitter.com/anywhere.js?id=jouwapikeyhier=1”></script>

    <script type=“text/javascript”>

    twttr.anywhere(function(twitter) {

    twitter.hovercards();

    });

    </script>

Hierna zal elke @ gevolgd door 1 tot 20 alphanumerieke karakters inclusief _ worden opgevat als een twitteraccountnaam en een hovercard verkrijgen. Gebruikers zullen wel eenmalig je moeten autoriseren om eea te tonen maar dat kan bij twitter vrij makkelijk.

Hieronder nog een video die voor wordpress eea uitlegt.

Twitter avatar images ophalen

Als je een beetje Googled kom je er al gauw achter dat het ophalen van de avatar van twitteraccounts niet zo makkelijk gaat omdat de bestandsnaam kan wijzigen. Gelukkig biedt http://img.tweetimag.es/ hiervoor een eenvoudige oplossing. Voor alle duidelijkheid die heeft niets met @anywhere te maken. Die zal het ook kunnen maar nu even gekozen voor een simpeler methode.

Om vervolgens ook achter een avatar-plaatje er voor te zorgen dat de twitter hovercard verschijnt heb ik tot slot nog een scriptje toegevoegd van @nonimage.

Next step

Dit zijn slechts kleine voorbeelden hoe je Twitter meer kunt integreren op je site. Een volgende stap die ik nog niet helemaal werkend heb gekregen is de mogelijkheid om een tweet direct te versturen vanaf Marketingfacts (dus zonder daarbij de Marketingfactsite te verlaten). Daarnaast kan de layout en kleurverandering iets netter verlopen. Maar dat alles moet met beetje hulp van @onnogroen ook wel gaan lukken. Benieuwd wat jullie van deze Twitter-integratie vinden! Mocht je nog kleine bugs op dit vlak tegenkomen een comment is welkom.

Erik van Roekel
Product Owner Chatbot bij ING

Marketingprofessional met ruime ervaring in diverse internetprojecten in de financiële dienstverlening. Passie voor social media en internet in het algemeen. Stond aan de wieg van het ING Webcare Team in 2009 en gaf er 1,5 jaar leiding aan. Was daarna één van de drivers van de social media strategie voor ING Nederland in 2012 resulterend in een nummer 1 notering in de Social Media Monitor van Social Embassy. Werkzaam geweest bij Corporate Communications van ING Groep en van daaruit betrokken bij social media op internationaal niveau. Momenteel product owner chatbot bij ING. Blogt op persoonlijke titel bij Marketingfacts en van 2004-2014 ook op de achtergrond actief geweest voor Marketingfacts o.a. bij de techniek en de redactie.

Categorie
Tags

12 Reacties

    Annelies Verhelst

    Hm grappig 🙂 Ga ik misschien ook maar eens doen, doe zo vaak artikelen met verwijzingen naar Twitter-accounts, dan is dit wel erg makkelijk!


    19 april 2010 om 12:48
    Mike van Hoenselaar

    Ik vind het een mooie ontwikkeling die website-eigenaren in staat stelt om relatief makkelijk (veelgebruikte) diensten te koppelen aan hun website. Ik vind het een waardevolle toevoeging. Je hoeft een site niet te verlaten om gebruik te maken van deze functionaliteiten. Altijd een pre.


    20 april 2010 om 04:44
    Jurgen van der Vlist

    Leuk idee. Ik krijg nu helaas wel bij het openen van elke pagina van Marketingfacts twee keer een alert

    “To set up @anywhere, please provide a client ID”


    17 mei 2010 om 15:59
    evroekel

    @ jurgen vervelend. Heb inmiddels gevonden dat het een bug is aan de zijde van twitter tgv recente wijzigingen. Het heeft namelijk al enige tijd probleemloos gewerkt. We houden het even in de gaten en als we veel meldingen krijgen dan disablen we @anywhere tijdelijk tot de bug is opgelost.


    17 mei 2010 om 16:24
    evroekel

    Volgens twitter zou probleem inmiddels verholpen zijn? Klopt dat Jurgen? In mijn omgeving kreeg niemand de melding dus is lastig controleren. Hoor het graag.


    20 mei 2010 om 18:38
    Jan Willem Alphenaar

    Dit is wel een leuke uitbreiding op de M! site.

    Zo kan ik meteen de interessante bloggers en reageerders volgen.


    21 mei 2010 om 04:15
    Marco Raaphorst

    Werkt handig alleen hebben blogreplies meestal hetzelfde format en levert dat een conclict op, dus een @user hoeft niet dezelfde user als op Twitter te zijn. Da’s het nadeel van een autoreplacement.

    Ik heb een verzoek ingediend hoe dit te bypassen valt, bv voor blogcomments.


    27 juli 2010 om 09:03

Marketingfacts. Elke dag vers. Mis niks!

Welke nieuwsbrief