Twitter @anywhere toevoegen in WordPress

Twitter heeft het @anywhere-platform nog niet zo lang geleden gelanceerd. Dit nieuwe platform integreert twitter in uw site met een paar regels JavaScript. Het zorgt voor meer tweets, meer verkeer, meer volgt, meer betrokkenheid, meer gebruikers en meer inzicht. U kunt nu een tweet-vak insluiten op uw site waar mensen rechtstreeks van uw site kunnen tweeten. Het converteert ook alle twitter-gebruikersnamen naar een link (@wpbeginner). Als u de hovercard-optie inschakelt, zien gebruikers een zweeftekst met een vervolgknop en gebruikersinformatie. Je kunt ook verbinding maken met twitter-knoppen, volg @wpbeginner op twitter-knoppen en nog veel meer. We denken dat dit nieuwe platform een ​​grote rol zal spelen in de toekomst van het web als Twitter groeit. In dit artikel zullen we vertellen hoe je enkele elementen van Twitter's overal-platform op je WordPress-blog kunt toevoegen.

Update: Twitter schakelt @anywhere API op 6 december 2012 uit. Hier zijn meer details.

Stap 1: Een API registreren

Voordat u het anywhere-platform op uw site kunt toevoegen, moet u een API registreren. U wordt gevraagd naar een pagina die er als volgt uitziet:

Nadat u zich hebt geregistreerd, ontvangt u een API-sleutel. Het volgende dat u zeker wilt weten, is dat het machtigingsniveau is ingesteld op Lezen en schrijven, anders kunnen gebruikers niet op de knop Volgen klikken. Dit is een glitch met twitter, maar ze werken eraan om dit te verhelpen. Maar om aan de veilige kant te blijven, zullen we de aanwijzingen geven over hoe dit te doen.

Klik eerst op de link http://twitter.com/oauth. Op deze pagina ziet u de applicatie die u hebt geregistreerd. Klik op de naam van uw toepassing en u zou naar de pagina met toepassingsdetails moeten gaan. Er is een knop genaamd "Applicatie-instellingen bewerken". Klik op deze knop om naar de bewerkpagina te gaan, waar u naar beneden moet scrollen naar het item met het label "Standaard toegangstype". Wijzig dit in "Lezen en schrijven".

Stap 2: Implementeer het op uw site

Omdat er op het platform overal tal van functies zijn, zullen we ze elk één voor één uitleggen. Het eerste dat je hoeft te doen is het hoofd-JavaScript te bellen. Twitter beveelt aan dat je dit script in je plaatst header.php bestand (tussen deze twee codes).

Vergeet niet om uw API-sleutel toe te voegen waar deze YourAPIKey in de koppeling vermeldt.

Laten we nu de afzonderlijke functies bekijken die dit platform voor u kan doen.

Auto-link alle Twitter-gebruikersnamen

Deze functie koppelt automatisch alle twitter-gebruikersnamen op uw berichten en opmerkingen. Als je een twitter-gebruikersnaam vermeldt in dit formaat: @wpbeginner << It will automatically be linked to the appropriate twitter account. This can save you a lot of time if you write posts with mentions to twitter users. To add this feature, you simply paste the following code in your site's header, after the main script. [php] twttr.anywhere(onAnywhereLoad); function onAnywhereLoad(twitter) twitter.linkifyUsers(); ; [/php] This will link all twitter usernames mentioned in your body tag excluding the links, scripts, iframes, text area, title tags, and other buttons.

Auto-Link alle Twitter-gebruikersnamen met een Hovercard

Deze functie zorgt voor een automatische koppeling van alle twittergebruikersnamen op de pagina en biedt ook een hovercard voor een mouseover-effect. Dus wanneer de gebruiker van uw site de muis overbrengt naar een gebruikersnaam zoals @wpbeginner, zullen ze een hoverbox zien zoals in het bovenstaande voorbeeld. Als ze op de knop Volgen klikken, kunnen ze de gebruiker rechtstreeks vanaf uw website volgen. Als u deze functie wilt inschakelen, plakt u eenvoudig de volgende code in de kop van uw site onder het hoofdscript.

  twttr.anywhere (onAnywhereLoad); function onAnywhereLoad (twitter) twitter.hovercards (); ;  

Smart Follow-knoppen voor Twitter

Met de slimme volgknop kan uw gebruiker uw account rechtstreeks volgen vanaf uw site. U kunt knoppen voor uw site maken en deze gebruiken in uw post of elders. Zie het live-voorbeeld hieronder:

Als u dit type knop op uw site wilt toevoegen, plakt u eerst de volgende code in de kop van uw site onder het hoofdscript:

  twttr.anywhere (onAnywhereLoad); functie opAnywhereLoad (twitter) twitter ('# follow-wpbeginner'). followButton ("wpbeginner"); ;  

Ten tweede moet u de volgende div-tag toevoegen waar deze knop moet worden weergegeven:

Vergeet niet om wpbeginner in je gebruikersnaam te veranderen anders zal het een volglink naar onze twitter-account tonen.

Live Tweet Box op je site

U kunt een tweet-vak op uw site maken waarmee gebruikers rechtstreeks van uw site kunnen tweeten zonder ooit op Twitter te hoeven gaan. Een voorbeeld van deze box is hieronder te zien: (Onthoud dat als u op tweet klikt, deze tweet).

Probeer te tweeten vanuit de live box hierboven om te zien hoe cool het is. We zouden het erg op prijs stellen als u de standaard inhoud tweet, dus het helpt ons

Nou zoals je kunt zien dat deze live tweet box echt krachtig is. Je kunt zelfs Retweet-tekst toevoegen als je wilt met een kleine aanpassing. Als u een live tweet-vak op uw site wilt toevoegen, plakt u eerst de volgende code in de koptekst van uw site achter het hoofdscript:

  twttr.anywhere (onAnywhereLoad); function onAnywhereLoad (twitter) twitter ("# custom-tweetbox"). tweetBox (label: "Live Tweet Box:", defaultContent: "Iedereen zou @ wpbeginner moeten volgen voor geweldige #WordPress tips", hoogte: 50, breedte: 480 ,); ;  

Voeg vervolgens de volgende code toe waar u het live tweet-vak wilt weergeven:

We zien dat er al enkele plug-ins in de WordPress plugin-directory staan ​​waarmee je de basisfuncties kunt gebruiken, zoals een zweefkaart of automatisch koppelen. U kunt deze plug-ins gebruiken als u dat wilt, maar dit is zo eenvoudig dat u de codes beter handmatig kunt plaatsen.

Als je dit artikel leuk vond, probeer het dan alsjeblieft. Als we iets gemist hebben, laat het ons dan weten in de comments.

Aanvullende bron:

Twitter Anywhere-documentatie
Eenvoudige Twitter Connect-plug-in (geweldige plug-in door een ondersteunende auteur - bedankt Otto)