un blog de Radu Dumitru

►► canalele mele de YouTube: youtube.com/RaduDumitru (personal) și youtube.com/NwraduBlog (tech) ◄◄

Butoane de Facebook și Twitter cu încărcare rapidă

23 Mar 2014  ·

TEHNOLOGIE  ·

5 comentarii

Mulți dintre voi mi-ați spus că butoane de like și tweet la fiecare articol duc la încărcarea mai greoaie a paginii principale a blogului cu această temă și, desigur, aveați dreptate.

Știam și eu asta și de altfel se vedea cu ochiul liber, deoarece blogul contacta de fiecare dată Facebook și Twitter pentru a obține numărul de like-uri și retweet-uri pentru fiecare articol în parte. Iar această interogare ia un timp sesizabil.

Recent am corectat acest neajuns. În primul rând am eliminat butonul Google Plus. Sorry Google, dar nu-l apăsa nimeni. Dacă folosiți Google+, puteți recomanda acolo articolele prin metoda normală, adică introducerea lor manuală în rețeaua de socializare.

Pentru Facebook și Twitter cea mai simplă cale a fost să trec la butoane și la cod introdus manual de mine. Blogul contacta serverele lor pentru a trage de acolo ceva fișiere JavaScript și pentru a genera apoi codul butoanelor prin ceva PHP, XFBML și alte metode. Am scăpat de toate, înlocuindu-le cu un simplu a href cu url generat de mine și link pus pe imagini.

Codul este următorul, dacă vă interesează:

Twitter:

Facebook:

În paginile fiecărui articol am lăsat momentan butoanele oficiale cu întreg codul lor greoi.

    5 comentarii

  1. Salut Radu,

    Modificarea pe care ai facut-o tu nu are niciun efect din moment ce in footer ai butoanele de Twitter/Facebook. Ele incarca acelasi cod :)

    Ceea ce trebuie sa faci e mai complex de atat si implica mai multe modificari.

    PS: Daca ai o tema responsive (Kahlam – 40USD) nu inteleg care mai e rostul plugin-ului de mobile :)
    PPS: Prima pagina – 1,5 MB (113,5 KB from cache)

      (Citează)

  2. Nu-i chiar așa. Diferența este sesizabilă (a fost când am testat, oricum), probabil pentru că pentru fiecare articol în parte contacta FB/Tw ca să afle câte share-uri/like-uri/rt-uri avea.

    Tema responsive am modificat-o eu la niște dimensiuni necesare pentru desktop. Acum o modific să meargă și pentru mobile, că din start nu era bună, moment în care poate voi renunța la WPtouch. Mulți cititori au spus că preferă WPtouch până atunci, care arată mai bine.

      (Citează)

  3. De asemenea, testul rulat de tine încarcă pagina complet. La a doua încărcare, dimensiunea transferată sare de la 1,3 MB la 60-100 kB deoarece imaginile sunt deja în cache-ul browserului tău.

    Am activat acum și compresie fișierelor text, mai am de comprimat niște imagini care mi s-au părut cam mari.

    În viitor dacă trec și la CSS sprites și minimizez niște fișiere iese și mai bine.

      (Citează)

  4. Pe langa asta, trebuie sa rezolvi si http://validator.w3.org/check?uri=nwradu.ro&charset=%28detect+automatically%29&doctype=Inline&group=0 – 91 Errors, 9 warning(s)

    Sa vezi ce plugin-uri iti folosesc cu adevarat si care nu. Sa verifici tema cu http://wordpress.org/plugins/theme-check/

    Mergi in wp-config.php si modifica define(‘WP_DEBUG’, false); in define(‘WP_DEBUG’, true); , vezi daca ai acolo eroari

    etc, etc, etc :)

      (Citează)

    • @Valentin: nu știu ce să zic, mi se pare mai important ce găsesc cititorii aici decât ce zice robotul de validare.
      Cu validarea asta n-am crezut niciodată prea mult în ea. Adică multe lucruri nu depind de mine, precum ce introduc plugin-urile în site sau diversele butoane de share. Chiar dacă aș corecta vreo jumătate dintre ele, ceea ce voi face în timp, celelalte erori rămân.

        (Citează)

    Alătură-te discuției, lasă un mesaj

    E-mail-ul nu va fi publicat. Fără înjurături și cuvinte grele, că vorbim prietenește aici. Gândiți-vă de două ori înainte de a publica. Nu o luați pe arătură doar pentru că aveți un monitor în față și nu o persoană reală.

    Apăsați pe Citează pentru a cita întreg comentariul cuiva sau selectați întâi anumite cuvinte și apăsați apoi pe Citează pentru a le prelua doar pe acelea. Link-urile către alte site-uri, dar care au legătură cu subiectul discuției, sunt ok.


    Prin trimiterea comentariului acceptați politica de confidențialitate a site-ului.



    Vreți un avatar în comentarii? Mergeți pe gravatar.com (un serviciu Wordpress) și asociați o imagine cu adresa de email cu care comentați.

    Dacă ați bifat să fiți anunțați prin email de noi comentarii sau posturi, veți primi inițial un email de confirmare. Dacă nu validați acolo alegerea, nu se va activa sistemul și după un timp nu veți mai primi nici alte emailuri

    Comentariile nu se pot edita ulterior, așa că verificați ce ați scris. Dacă vreți să mai adăugați ceva, lăsați un nou comentariu.

sus