Tutorial – Cum schimbi culoarea butoanelor Facebook la tine in site

21 septembrie 2017

Facebook este o unealta importanta de promovare, pentru orice si oricine. Orice website modern trebuie sa se integreze cu Facebook pentru a beneficia de toate avantajele din punct de vedere promovare. Asta inseamna ca ai o pagina Facebook creata si ai adaugate in site butoanele Like, Share, Follow. Daca nu le ai, le poti integra foarte usor, Mergi la linkul acesta si iti poti configura usor butonul si cateva alte aspecte de ordin grafic (destul de putine). Vei observa totusi ca aceste butoane au mereu culoarea albasta, specifica Facebook  si nu vei putea sa-i schimbi culoarea prin metodele clasice (html sau css).

Exista totusi o metoda (CSS) prin care „pacalesti” incercarea Facebook de a bloca schimbarea culorii.

Facebook iti va genera doua coduri de introdus in site, imediat ce ai configurat si ai dat click pe butonul genereaza. Acestea sunt de forma de mai jos:

1.Cod de intordus in header, imediat dupa <body>

<div id=”fb-root”></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = „//connect.facebook.net/ro_RO/sdk.js#xfbml=1&version=v2.10”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

2. Cod de intordus oriunde vrei sa apara butonul in site (de preferat in pagina articolelor daca ai un blog), inainte sau dupa content

<div class=”fb-like” data-href=”https://developers.facebook.com/zuck” data-layout=”standard” data-action=”like” data-size=”large” data-show-faces=”true” data-share=”false”></div>

Ce trebuie sa faci pentu a modifica culoarea butonului:
incadreaza al 2-lea cod intr-un alt DIV, ca mai jos (eu i-am dat numele buttonfb):

<div id=”buttonfb” class=”fb-like” data-href=”https://developers.facebook.com/zuck” data-layout=”standard” data-action=”like” data-size=”large” data-show-faces=”true” data-share=”false”></div>

Dupa asta, adauga in fisierul CSS urmatoarele linii:

#buttonfb {
-webkit-filter: brightness(76%) contrast(200%) grayscale(13%) hue-rotate(176deg) saturate(162%);
-moz-filter: brightness(76%) contrast(200%) grayscale(13%) hue-rotate(176deg) saturate(162%) ;
-o-filter: brightness(76%) contrast(200%) grayscale(13%) hue-rotate(176deg) saturate(162%) ;
-ms-filter:brightness(76%) contrast(200%) grayscale(13%) hue-rotate(176deg) saturate(162%) ;
filter:brightness(76%) contrast(200%) grayscale(13%) hue-rotate(176deg) saturate(162%);
margin:5px 0 10px 0;
}

Desigur, valorile din paranteza sunt cele responsabile de culoarea finala si poti experimenta pe marginea lor pana ajungi la ce ai tu nevoie. Examplul de mai sus are ca efect culoarea butonului like din pagina mea (cel de mai sus din articol).

PS: da-mi un like daca ti-a fost de ajutor acest articol!

Succes!


Pe aceasi tema

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *