Am avut o mulțime de solicitări în ultima vreme să împărtășesc un tutorial despre modul în care am creat widget-ul lateral al blogului meu personal. Arată frumos și cel mai important, funcționează! Cu unele simple PHP și CSS, sunt sigur că toată lumea poate implementa acest lucru pe blogurile lor cu ușurință. Astăzi vă voi arăta cum să creați a mea ... în speranța că veți putea să vă creați propria versiune personalizată pentru propriile dvs. proiecte!
Pasul 1 Obțineți Social!
În primul rând, acest lucru presupune că aveți o pagină Facebook, nu doar un profil obișnuit ... deci, dacă nu aveți una, va trebui să faceți una mai întâi. Vom continua să presupunem că aveți deja unul!
Bine, să vă pregătim codurile de abonament pentru pagina Facebook și pentru e-mail. Nu copiați codurile în Pasul 1! Citiți mai întâi totul aici. Copiați numai codul completat la Pasul 2 ... vom trece prin principiile de bază:
Ce veți avea nevoie de pe pagina dvs. Facebook
Să ne aruncăm direct într-un cod pe care îl vom folosi pentru widget-ul lateral, astfel încât să pot arăta câteva informații de care aveți nevoie. Acest fragment va fi folosit pentru partea socială Facebook a widget-ului nostru:
Iată partea dificilă: De fiecare dată când editați CSS, asigurați-vă că schimbați numărul '? 1' (pe linia 4 a exemplului de mai sus) la un altul care corespunde versiunii cache a CSS. Dacă nu îl schimbați, este posibil să nu funcționeze. (aceasta este, desigur, o situație ciudată - am avut succese și erori în a face acest lucru să funcționeze).
?1
Pentru tine Codul paginii (este un număr lung care reprezintă ID-ul paginii dvs. Facebook): Conectați-vă la dvs. Pagina Facebook> Editați pagina și veți vedea propriul id de pagină în bara de adrese a browserului. Utilizați această opțiune pentru ID-ul profilului pe linia 4, dacă nu doriți să faceți publicitate paginii mele Facebook pe site-ul dvs.;).
În bara de browser de pe Pagina de editare, veți vedea ceva de genul:
De asemenea, puteți schimba conexiunile, lățimea și înălțimea, astfel încât să se potrivească frumos în bara laterală. Lățimea minimă trebuie să fie 250 (px), mai puțin decât aceasta și nu veți putea potrivi butonul și textul în interiorul cutiilor.
Detalii privind abonamentul prin e-mail
Acum trebuie să luăm detaliile abonamentului de la Feedburner. Din nou, presupun că aveți deja acest set, deci trebuie să vă conectați și să luați următoarele detalii.
Ardeți feedul folosind Feedburner și înlocuiți-l Feedburner id în codul de mai jos cu dvs. Id-ul Feedburner este cel din adresa URL a arzătorului feed-urilor. De exemplu, feeds.feedburner.com/Ariff. Da, am avut o anumită confuzie căutând asta înainte de asta.
Iată codul real pe care îl vom folosi pentru partea de abonament a widgetului:
Pasul 2 Împreună: Codul complet
Poți să transformi acest lucru într-un plug complet (sau scurt cod) dacă vrei, dar astăzi vom lua o scurtătură pentru a ajunge la lucrurile bune și pentru a lucra direct pe un widget text. Nu, acest lucru nu este recomandat pentru producția reală ... dar ne va face să ne mișcăm imediat.
Copiați acest cod într-un text widget pe bara laterală. Amintiți-vă să modificați toate atributele menționate mai sus și să includeți propriile dvs. acreditare Twitter & Google+. Dacă aveți deja un buton Google+ pe site-ul dvs., puteți elimina codul javascript Google+ de mai jos, deoarece o singură instanță a scriptului este deja suficientă pentru mai multe butoane.
Recomanda pe Google
Te urmaresc
Pasul 3 Codul CSS
Copiați codurile CSS în foaia de stiluri tematice. Rețineți că dacă caseta Facebook nu funcționează, codurile pentru casetă trebuie să fie introduse în foaia principală de stil (stil.css) și nu în alt loc pentru codurile personalizate.
Și am terminat! Puteți verifica codul CSS unde am pus câteva marcări ale celor ce pot fi modificate. Toate cele bune cu asta. Acum aveți ceva Mashable-ish pe site-ul dvs., cu unele personalizare, de asemenea.
Codul paginii Facebook sursa: Daddy Design
Rețineți, acesta este doar un punct de plecare! Unele dintre plug-in-urile dvs. avansate devs acolo ar putea avea chiar mai multe moduri de a face unele dintre lucrurile prezentate în acest tutorial, deci nu ezitați să partajați propriile comentarii și idei în secțiunea de comentarii de mai jos! Vom fi sigur că actualizăm tutorialul dacă cineva are mari cunoștințe.
Share
Accentsconagua
