Intergrare Facebook, Twitter si Google+ in WordPress

postat acum 3 ani de Stefanescu Mihai in categorie iNoob

Integrarea mediilor sociale in site-ul tau este un lucru vital daca vrei sa iti ajuti cititorii sa transmita mai departe continutul site-ului tau. In timp ce o parte din utilizatori se multumesc decat cu link-urile de sharing integrate in WordPress, restul instaleaza un plugin pentru a extinde functinoalitatea acestora. Unii dintre voi probabil se multumesc cu ce are de oferit un asemenea plugin, dar exista si persoane ce isi doresc mai mult. Dar daca vorbim despre aceste plugin-uri trebuie sa mentionam ca unele sunt scrise prost si chiar includ functii ce nu iti sunt necesare, iar plugin-urile bune nu se integreaza perfect cu toate design-urile.

Daca nu vrei sa umblii in fisierele design-ului tau, atunci acest articol nu te va ajuta la nimic, dar daca esti dispus sa iti “murdaresti mainile” configurarea manuala este solutia perfecta.

In acest articol va voi arata cum sa integrati manual trei dintre cele mai populare servicii media in site-ul tau: Twitter, Facebook si Google+. In primul rand va voi arata cum sa integrati aplicatia de comentarii facebook in wordpress.Apoi am sa va arat cum puteti afisa cele mai noi tweet-uri in sidebar si in final va voi arata cum sa cum sa adaugati butoanele de sharing in pagini si postari.In primul rand trebuie sa faci un backup fisierelor temei pe care vrei sa o modifici, astfel incat daca faci vre-o greseala sa fii asigurat ca nu faci vre-o prostie. Instalarea acestor modificari pe un site de teste este recomandata (eu fac toate modificarile intai pe un wordpress instalat pe computerul de acasa cu WAMP).

Integrare comentarii FacebookPentru ca majoritatea oamenilor sunt autentificati pe facebook in timp ceviziteaza diverse site-uri web, aceste comentarii facebook sunt grozave pentru a incuraja socializarea, dar nu in ultimul rand nu ve-i mai avea probleme cu spam-ul.

Stiu ca exista atatea solutii de prevenit spam-ul din comentariile wordpress, dar majoritatea sunt inaficiente sau te pun sa faci ceva in plus de fiecare data cand apar aceste comentarii.Sistemele de comentarii precumIntenseDebate si Disqus au anumite beneficii, pentru ca permit adaugarea de comentarii folosind Facebook sau alte servicii similare, dar inainte de a le folosii, vizitatorii trebuie sa permita accesul aplicatiei in contul lor, lucru ce ii descurajeaza pe foarte multi. Deci, integrarea sistemului de comentarii facebook permite discutarea fara pra mari probleme.

1.Aplicatie Facebook

Pentru a folosi sistemul de comentarii de la facebook trebuie sa creezi o aplicatie de pe pagina Facebook Application. Acest pas este necesar, indiferent ca folosesti un plugin sau adaugi sistemul de comentarii manual.Pur si simplu apasa pe butonul ” + Create New App” de pe pagina Facebook Application si scrie un nume unic pentru aplicatia ta in campul “App Display Name”, campul “App Namespace” poate fii lasat gol.

Acum ai primit un cod numit “App ID/API key” si un cod numit “App secret key”, nu trebuie sa le memorezi pentru capluginul oficial de comentarii Facebook le adauga automat in codul pe care trebuie sa il adaugi in fisierele site-ului tau.

2. Adauga codul in siteAcum, mergi pe paginapluginului Facebook pentru Comentarii si obtine codul pentru site-ul tau. Fereastra aceasta iti va permite se setezi URL-ul site-ului pe care v-or aparea comentariile, numarul de comentarii, latimea si schema de culori (alb/negru).

Nu trebuie sa iti faci griji din cauza setarilor pe care le faci aici pentru pot fi modificate ulterior manual, si nu conteaza ce URL pui pentru ca il v-om inlocui cu permalink-ul:Cand apesi pe butonul “Get Code” iti va fi afisata o fereastra cu codul plugin-ului (alege HTML5).  Asigura-te ca selectezi aplicatia pe care ai setat-o mai devreme pentru a seta automat ID-ul corect.

Primul cod adaugal in fisierul header.php exact dupa codul <body>:

[cc name=”fbfcdht5″]

Al doilea cod il pui unde vrei sa apara sistemul de comentarii. Asigura-te ca URL-ul este inlocui cu permalink-ul WordPress ( <?php the_permalink(); ?> ) astfel incat comentariile v-or fi afisate corect pe fiecare pagina.

[cc name=”fbscdht5″]

Pentru a pune comentariile facebook deasupra comentariilor WordPress adauga codul de mai sus dupa codul</form>.

Daca vrei sa inlocuiesti complet sistemul de comentarii wordpress cu sistemul de la facebook nu trebuie decat sa inlocuiesti functia care apeleaza fisierul comments.php, de exemplu daca vrei sa inlocuiesti sistemul de comentarii din paginile cu postari inlocuieste codul <?php comments_template(); ?> cu codul de comentarii facebook in fisierul single.php, pentru pagini acelasi lucru in fisierul page.php

poza comentarii facebook din sectiunea freebies

Pentru a fii anuntat de fiecare data cand cineva lasa un comentariu trebuie sa te faci moderator al aplicatiei din pagina Comment Moderation tool .

Ultimele Tweeturi in sidebar

Afisarea ultimelor tweet-uri este o metoda foarte buna de a incuraja vizitatorii sa te urmareasca pe Twitter. C-ea mai des intalnita zona de afisat aceste tweet-uri este sidebar-ul, chiar daca pot fi adaugate in orice parte a site-ului.Afisarea Tweet-urilor manualAm incercat mai multe solutii de implementat tweet-uri manual pe site, dar preferata me-a este versiunea lui Chris Coyier (autor CSS-Tricks). Codul lui de RSS fetching reprezinta o metoda simpla si eficienta pentru a afisa cele mai noi tweet-uri din contul tau. Adresa contului tau de twitter este de forma http://api.twitter.com/1/statuses/user_timeline.rss?screen_name=xxxxx (unde xxxxx este numele de pe twitter), pentru rweet-urile tale favorite foloseste http://twitter.com/favorites/xxxxx.rss.[cc name=”tweet1″]Afisare tweet-uri cu widget-ul officialWidgetul Twitter official arata foarte bine si este usor de modificat. Poti selecta numarul de tweeturi, sau daca widget-ul sa se mareasca sau sa afiseze un scrollbar pentru a vedea toate tweet-urile.Dimensiunea poate fi ajustata manual sau din optiunea auto-width. Culoarea  poate fi schimbata din zona setarilor. O data ce a-ti setat dimensiunea si culoarea copiati codul in fisierul in care doriti sa apara din template.Afisare Tweeturi cu plugin-uri wordpressDaca nu vrei sa umblii in cod sub nici o forma sau nu vrei sa folosesti widget-ul official poti incerca unul din aceste plugin-uri wordpress:

Adauga butoane de social sharing

Butoanele de social sharing reprezinta una dintre cele mai bune metode de a indemna vizitatorii sa de-a mai departe articolul tau pe una dintre retelele de socializare. Nu trebuie decat sa copiati codul de pe paginile urmatoare:

Butoanele pe care le-ati gasit la adresele de mai sus sunt perfecte pentur paginile cu detaliile/comentariile articolelor (single.php). Dar nu v-or functina pe prima pagina a site-ului (index.php), sau un arhiva (archive.php).Pentru a functina corect asigurati-va ca fiecare buton foloseste permalink-ul articolului, nu URLul siteului.

Pentru a pune aceste butoane pe site nu trebuie decat sa alegeti tipul de buton si sa copiati codul in single.php sau pe page.php pentru pagini.

Pentru a functina pe prima pagina si pe pagina de arhiva urmeaza instructiunile de mai jos.FacebookButon Facebook Like vine cu o multime de optiuni.Un buton numit “Send” poate fi adaugat, poti seta latimea, poti alege sa fie afisate si imaginile de profil sub butoane, poti alege intre textul “Like” si “Recommand”, poti alege intre schema de culoare alba sau neagra, poti seta fontul.

Trebuie sa adaugi 2 coduri in site-ul tau. In primul rand SDKul JavaScript exact dupa tag-ul <body> (in header.php). Acest cod trebuie sa fie adaugat doar odata.Al doilea cod il pui unde vrei sa apara butonul de Like. Pentru a te asigura ca este selectata pagina corecta seteaza href=”<?php echo get_the_permalink($post->ID); ?>”, de genul:[cc name=”fblbop”]Google + Google+ vine cu butoane de 4 dimensiuni: mic, mediu, standard si inalt. Numarul de voturi pe care pagina le-a primit pot fi afisate inline, intr-un balon sau sa nu fie afisate.

Sa faci legatura in permalink-ul articolului si buton este la fel de simplu ca in cazul facebook-ului, seteaza href=”<?php the_permalink(); ?>”, pentru un buton inalt codul va arata in felul urmator:[cc name=”gptb”]TwitterTwitter ofera 4 tipuri de butoane: unul pentru sharing de link-uri, unul pentru a invita oamenii sa te urmareasca, un buton pentru hash tag,  si altul pentru mentiuni. Butonul de care ai nevoie pentru a afisa numarul de tweet-uri ale unui articol se numeste “Share a link”.Pe pagina de edita butoanele poti alege daca doresti sa fie afisat numarul de retweet-uri si poti alege intre “Via”, “Recommend” si “Hastag”.

Pentru a te asigura ca Twitter-ul va folosi titlul articolului tau si URL-ul articolului in mod corect adauga data-text="<?php the_title(); ?>" si data-url="<?php the_permalink(); ?>" in link. De exemplu, daca folosesti butonul mic vei avea urmatorul cod:[cc name=”twsvrhbtn”]

Pentru a afisa butonul mare schimba data-size la large: data-size=”large”. pentru a afisa butonul de popular vartical schimba data-count=”vertical”.

Concluzia

O multime de utilizatori de WordPress folosesc in continuare plugin-uri de social media sharing, dar am spus si mai sus, integrarea manuala a acestor medii de socializare poate fi o solutie mai buna.Integrarea sistemului de comentarii facebook dureaza decat cateva minute si procesul de instalare este mult mai simplu decat al pluginurilor.Nu stiu ce sa mai zic, deja m-am lungit prea mult, am acest articol in drafturi de aproape 2 saptamani…sper ca ai inteles ceva si sper ca ti-a fost de ajutor, oricum pentru orice nelamurire lasa un comentariu.

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!
Comentariu postate de Robert Ilie
Foarte bun articolul. Il recomand cu incredere. Insa sunt de parare ca este mai bine sa folosesti WP SocialMash pentru a avea totul intr-un singur loc.
Comentariu postate de Mihai
Am scris si in articol, totul tine de preferintele utilizatorilor… Eu prefer sa integrez direct in sursa decat sa folosesc plugin-uri.
Comentariu postate de D-Petre
Interesant si util articolul in special pentru cei care vor sa mai scape de un plugin.
Comentariu postate de Budau Daniel
Salut, Ai un articol foarte fain si bun, Acum cateva zile am avut probleme la site din cauza plugin-ului Share This si am decis sa le bag manual. Am dat de postarea ta care e foarte buna dar am o problema. In pagina de blog totul merge bine, dar unde am portofoliu la butonul de facebook share nu merge bine ca imi haruieste pagina principala. Ma poti ajuta sa fac cand dau share sa mearga si sa ia datele de pe acea pagina. Ma refer la http://www.bdanielphotography.ro/portfolio-view/sedinta-foto-in-miscari-de-dans/ sau orice pagina care e de portofoliu. Ms mult
Comentariu postate de Mihai
Uite un link care s-ar putea sa te ajute: https://developers.facebook.com/docs/plugins/share-button/ Cred ca este destul de intuitiva interfata, La URL to share se pune URL-ul ce trebuie share-uit (in wordpress poti prelua dinamic ULR-ul folosind fie codul urmator: fie codul PHP ), la width se seteaza latimea casutei cu butonul (in pixeli), se alege layout-ul dorit si apesi pe butonul Get Code. Codul generat il si il pui in page.php sau post.php. De retinut este ca trebuie sa pui echo get_permalink( $post->ID ); sau codul PHP in loc de URL ca sa sheruiasca pagina respectiva si nu site-ul