Skapa en vägg för sociala uppdateringar i din WordPress-blogg med socialistiskt jQuery-plugin

Annons

Socialist är ett otroligt nytt jQiuery-plugin som samlar dina uppdateringar på olika sociala nätverk och visar dem vackert i ett rutnät som liknar Pinterest. Kolla in skärmdumpen nedan för en idé om hur underbart detta är, och läs om hur du implementerar detta i WordPress.

Obs: Socialist är ett jQuery-plugin. Jag kommer att ge fullständiga instruktioner om hur du implementerar detta i WordPress, men en fungerande kunskap om jQuery skulle vara till hjälp för att identifiera typfel eller fel i din kod. Dessutom bör detta förmodligen betraktas som en beta-version; vissa saker är trasiga, formateringen är inte perfekt, men den är fortfarande ganska användbar och imponerande

Introduktion

Det finns olika plugins för att hämta uppdateringar från specifika nätverk eller de senaste inläggen från ett RSS-flöde, men ingen gör dem alla och ingen är lika attraktiva som detta. Här är vad du kan förvänta dig från cirka tio kodrader:

Plugin-enheten har tillgång till en mängd soiska nätverk samt bara vanlig RSS, tag i bilder såväl som innehåll - inklusive:

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

Tumblr-stöd listas också, men det finns ett fel i koden för närvarande som förhindrar att det fungerar. förhoppningsvis kommer det att fixas när denna handledning publiceras.

Integrering med WordPress

1. Ladda alla sidor på din webbplats och visa källan. Sök efter strängen jQuery; om du redan har det, fortsätt till steg 2. Om inte, lägg till jQuery genom att inkludera följande rad i dina funktioner.php: wp_enqueue_script ('jquery');
2. Ladda ner zip-filen för socialist från github [No Longer Available]. Packa upp och ladda upp mappen till din fungerande temakatalog via FTP.
3. Byt namn på mappen till "socialist"
4. Lägg till följande två rader någonstans under wp_head-funktionen i header.php, men före sluttaggen:

1. Skapa en ny sida där du vill att det socialistiska blocket ska visas; Jag antar att du vill ha det här på en separat sida, men du kan lika lägga till koden till din indexmall någonstans. Om du söker efter en separat sida kopierar du din befintliga sidmall och kallar den "page-slug.php" där slug är den permalänk som WordPress gav din nya sida (det vill säga titeln, med streck för mellanslag och vanliga ord bort).
2. Redigera sidan för att ta bort WordPress-loopen innehåll; vi vill ha en grundläggande layout med metainfo och sådan.

Lägga till socialistisk kod

Öppna den speciella sidmallen som du skapade tidigare och klistra in följande kod i huvudinnehållet område. Ändra den socialistiska DIV-stilen efter ditt tema; Jag tyckte att inte specificera bredd bröt layouten, men det kan ha varit särskilt för mitt tema. Koden nedan är förprogrammerad till några av mina egna sociala uppdateringskällor; naturligtvis vill du ändra de olika ID: erna till dina egna. För exakt format eller ytterligare parametrar, se readme-filen. I allmänhet är allt du behöver ID-parametern. Börja med en och arbeta upp, eftersom ett felaktigt ID kommer att göra att plugin går sönder.

Sammanfattning

Det kan göra med lite mer anpassning när det gäller rutans storlek eller layout, och att vara mer robust; men det är fortfarande tidiga dagar och vad vi redan har är verkligen imponerande tror jag. I själva verket skulle detta vara perfekt att sätta på första sidan på din personliga domän Med tanke på en personlig domän? Här är några coola användningar för det Även om du inte är fan av att blogga och inte har en fantastisk ny webbplats att lansera, kan en personlig domän vara en fantastiskt verktyg att äga för skojs skull eller egen marknadsföring: från en anpassad... Läs mer som vi diskuterade förra veckan.

Om du " åter har problem eller behöver en hand lägga till detta i WordPress, fråga gärna i kommentarerna nedan, men inkludera en test-URL som jag kan titta på och undersöka vilken kod som helst fel. För buggar i själva insticksprogrammet, vänligen publicera ett nytt nummer på GitHub. Tror att någon annan kan MakeUseOf detta fantastiska jQuery socialize plugin? Dela sedan med hjälp av knapparna nedan för att berätta för världen.