Lag en vegg for sosiale oppdateringer i WordPress-bloggen din med sosialistisk jQuery-plugin

Annonse

Socialist er en utrolig ny jQiuery-plugin som samler oppdateringene dine på forskjellige sosiale nettverk og viser dem vakkert i et rutenett som ligner på Pinterest. Sjekk skjermdumpen nedenfor for en ide om hvor fantastisk dette er, og les videre for hvordan du implementerer dette i WordPress.

Merk: Socialist er en jQuery-plugin. Jeg vil gi fullstendige instruksjoner om hvordan du implementerer dette i WordPress, men kunnskap om jQuery vil være nyttig å identifisere skrivefeil eller feil i koden din. Dessuten bør dette sannsynligvis betraktes som en beta-versjon; noen ting er ødelagte, formateringen er ikke perfekt, men det er fremdeles ganske anvendelig og imponerende

Introduksjon

Det finnes forskjellige plugins for å hente oppdateringer fra spesifikke nettverk eller de siste innleggene fra en RSS-feed, men ingen gjør dem alle og ingen er så attraktive som dette. Dette er hva du kan forvente av rundt ti kodelinjer:

Plugin-en har tilgang til en rekke soiske nettverk så vel som bare vanlig RSS, griper bilder så vel som innhold - inkludert:

• Facebook
• Twitter
• Linkedin
• Flickr
• YouTube
• Pinterest
• RSS
• Craigslist
• Google+

Tumblr-støtte er også oppført, men det er en feil i koden som for øyeblikket hindrer den i å fungere; forhåpentligvis blir det løst når denne opplæringen blir publisert.

Integrering med WordPress

1. Last inn hvilken som helst side på nettstedet ditt, og se kilden. Søk etter strengen jQuery; Hvis du allerede har det, fortsett til trinn 2. Hvis ikke, kan du legge til jQuery ved å inkludere følgende linje i funksjonene dine.php: wp_enqueue_script (‘jquery’);
2. Last ned zip-filen til sosialisten fra github [No Longer Available]. Pakk ut, og last opp mappen til din fungerende temakatalog via FTP.
3. Gi navn til mappen til "sosialist"
4. I header.php legger du til følgende to linjer et sted under wp_head-funksjonen, men før sluttmerket:

1. Lag en ny side der du vil at sosialistblokken skal vises; Jeg antar at du vil ha dette på en egen side, men du kan like gjerne legge koden til indeksmalen et eller annet sted. Hvis du går etter en egen side, kan du duplisere den eksisterende sidemalen og kalle den “page-slug.php” der slug er permalink som WordPress ga den nye siden din (det vil si tittelen, med bindestreker for mellomrom og vanlige ord fjernet).
2. Rediger siden for å fjerne WordPress-loopen innhold; vi vil ha en grunnleggende layout med metainfo og slikt.

Legge til sosialistisk kode

Åpne den spesielle sidemalen du opprettet tidligere, og lim inn følgende kode i hovedinnholdet område. Endre stilen til den sosialistiske DIV etter ditt tema; Jeg fant ut at ikke spesifisering av bredde brøt oppsettet, men det kan ha vært spesielt temaet mitt. Koden nedenfor er forhåndsprogrammert til noen av mine egne sosiale oppdateringskilder; selvfølgelig vil du endre de forskjellige ID-ene til dine egne. For read-filen for det nøyaktige formatet eller eventuelle tilleggsparametere. Generelt sett er alt du trenger ID-parameteren. Begynn med en og jobb opp, da en feil ID vil føre til at plugin går i stykker.

Sammendrag

Det kan gjøre med litt mer tilpasning når det gjelder boksstørrelse eller layout, og å være mer robust; men det er fremdeles tidlige dager, og det vi allerede har, er virkelig imponerende tror jeg. Faktisk ville dette være et perfekt valg å sette på forsiden av ditt personlige domene Ser du på et personlig domene? Her er noen kule bruksområder til det Selv om du ikke er fan av å blogge og ikke har et fantastisk nytt nettsted å lansere, kan et personlig domene være et kjempeflott verktøy å eie for moro skyld eller egen promotering: fra et tilpasset... Les mer som vi diskuterte forrige uke.

Hvis du ' har igjen problemer eller trenger en hånd å sette dette inn i WordPress, spør gjerne i kommentarfeltet nedenfor, men inkluderer en test-URL jeg kan se på og undersøke hvilken som helst kode feil. Hvis du vil ha feil i selve pluginen, kan du legge ut en ny utgave på GitHub. Tror noen andre kan gjøre bruk av denne fantastiske jQuery sosialisere plugin? Del deretter ved å bruke knappene nedenfor for å fortelle verden.