Opret en social opdateringsvæg i din WordPress-blog med socialistisk jQuery-plugin

Reklame

Socialist er en utrolig ny jQiuery-plugin, der aggregerer dine opdateringer på forskellige sociale netværk og viser dem smukt i et gitter, der ligner Pinterest. Se skærmbilledet nedenfor for en idé om, hvor smuk det er, og læs videre, hvordan du implementerer dette i WordPress.

Bemærk: Socialist er et jQuery-plugin. Jeg giver fulde instruktioner om, hvordan du implementerer dette i WordPress, men en arbejdsviden om jQuery ville være nyttigt at identificere skrivefejl eller fejl i din kode. Dette skal sandsynligvis også betragtes som en beta-version; nogle ting er ødelagte, formatering er ikke perfekt, men det er stadig ret anvendeligt og imponerende

Introduktion

Der findes forskellige plugins til at hente opdateringer fra specifikke netværk eller de seneste indlæg fra en RSS-feed, men ingen gør dem alle, og ingen er så attraktive som dette. Her er hvad du kan forvente af omkring 10 kodelinjer:

Plugin er i stand til at få adgang til en række soiske netværk samt bare almindelig RSS, gribe billeder såvel som indhold - inklusive:

• Facebook
• Twitter
• LinkedIn
• Flickr
• Youtube
• pinterest
• RSS
• Craigslist
• Google+

Tumblr-support er også angivet, men der er i øjeblikket en fejl i koden, der forhindrer den i at fungere; forhåbentlig løses det, når denne tutorial offentliggøres.

Integrering med WordPress

1. Indlæs en hvilken som helst side på dit websted, og se kilden. Søg efter strengen jQuery; Hvis du allerede har det, skal du fortsætte til trin 2. Hvis ikke, tilføj jQuery ved at inkludere følgende linje i dine funktioner.php: wp_enqueue_script ('jquery');
2. Download zip-fil fra socialist fra github [Ikke længere tilgængelig]. Pak ud, og upload mappen til dit arbejdende temakatalog via FTP.
3. Omdøb mappen til "socialist"
4. I header.php skal du tilføje de følgende to linjer et eller andet sted under wp_head-funktionen, men inden slutmærket:

1. Opret en ny side, hvor du vil have, at den socialistiske blok skal vises; Jeg antager, at du vil have dette på en separat side, men du kan ligeledes føje koden til din indeksskabelon et eller andet sted. Hvis du søger efter en separat side, skal du kopiere din eksisterende sideskabelon og kalde den "page-slug.php", hvor slug er den permalink, WordPress gav din nye side (det vil sige titlen, med bindestreger for mellemrum og almindelige ord fjernet).
2. Rediger siden for at fjerne WordPress-loop indhold; vi ønsker et grundlæggende layout med meta-info og sådan.

Tilføjelse af socialistisk kode

Åbn den specielle sideskabelon, du oprettede tidligere, og indsæt følgende kode i hovedindholdet areal. Skift stil på den socialistiske DIV, så den passer til dit tema; Jeg fandt ikke at specificere bredden brød layoutet, men det kan have været specielt til mit tema. Koden nedenfor er forprogrammeret til nogle af mine egne sociale opdateringskilder; selvfølgelig vil du ændre de forskellige id'er til dine egne. Se readme-filen for det nøjagtige format eller eventuelle yderligere parametre. Generelt er alt hvad du behøver, id-parameteren. Start med en, og arbejd op, da et forkert ID vil få pluginet til at gå i stykker.

Oversigt

Det kunne gøre med noget mere tilpasning med hensyn til kassestørrelse eller layout, og at være mere robust; men det er stadig tidlige dage, og hvad vi allerede har, er virkelig imponerende synes jeg. Faktisk ville dette være en perfekt placering på forsiden af ​​dit personlige domæne I betragtning af et personligt domæne? Her er nogle seje anvendelser til det Selvom du ikke er fan af blogging og ikke har et fantastisk nyt websted at lancere, kan et personligt domæne være et fantastisk værktøj til at eje til sjov eller forfremmelse: fra et tilpasset... Læs mere som vi diskuterede i sidste uge.

Hvis du ' re have problemer eller har brug for en hånd, der sætter dette i WordPress, spørg dem gerne i kommentarerne herunder, men inkluder en test-URL, jeg kan se på og undersøge enhver kode fejl. For bugs i selve pluginet, bedes du skrive et nyt problem på GitHub. Tror nogen anden kunne MakeUseOf denne fantastiske jQuery socialisere plugin? Del derefter ved hjælp af knapperne nedenfor for at fortælle verden.