Socijalne mreže su postale deo naše svakodnevnice ma koliko mi mislili drugačije. Uključivanje njih u naše web sajtove/blogove/forume postalo je veoma bitna stvar pošto na taj način povezujemo ogroman broj potencijalnih posetilaca. To uključivanje može biti u formi dugmadi ili vidžeta. U zadnje vreme vodeće socijalne mreže dele istu politiku u vidu uskraćivanja mogućnosti menjanja izgleda i nastoje da im dugmad/vidžeti imaju uniformisan izgled. Ali, da li je baš tako?

Dobar deo vidžeta/dugmadi se ipak može stilizovati i postaviti mu izgled po želji a da osnovna funkcija zadrži svoju funkcionalnost.

1. Facebook Fan Box

Uključivanje "Fejsa" u naše web stranice može biti u vidu dugmadi koje možete menjati po želji i vezivati linkove ka FB stranicama ali o tome kasnije. Ostaju vidžeti. Klasičan fan box (page) vidžet koji preuzimate na FB_developers stranici je ... klasičan. Isuviše. Možete mu u nekoj meri menjati izgled ali po samo predefinisanoj šemi. Ali šta ako poželite da mu pozadina bude, recimo crvena (#f00)?

Da krenemo od samog vidžeta:

Ovo je kod za klasičan FB vidžet koji možete naći bilo gde. Magija je u css-u:

        .fan_box {
	width: 380px;
	height: 350px;
	border-radius: 3px;
	position: relative;
	background-color:#f4f4f4; /*--- #f00 ---*/
	padding:5px 10px 15px 0;
        box-shadow: 10px 5px 5px #CCCCCC; 
}
.fan_box, .fan_box:before, .fan_box:after {
	background: #f4f4f4;
	border: 1px solid #ccc;
}
.fan_box:before, .fan_box:after {
	content: "";
	position: absolute;
	bottom: -3px;
	left: 2px;
	right: 2px;
	height: 1px;
	border-top: none;
}
.fan_box:after {
	left: 4px;
	right: 4px;
	bottom: -5px;
	box-shadow: 0 0 2px #ccc;
}
.inner_box {
	height:320px;
	overflow:hidden;
}

Menjanjem vrednosti menjamo izgled vidžeta. U ovom slučaju koristimo pseudo klase da pristupimo html elementima. Na sličan način možete pristupiti ako želite da menjate izgled facepile-a ili nekog drugog FB vidžeta.

2. Twitter vidžet

Sa Twitterom je malo drugačije. Do pre izvesnog vremena Tvitterov vidžet je bio takav da se mogao "štelovati" veoma lako. Bio je dostupan na zvaničnoj stranici. U međuvremenu je sklonjen i moguće je preuzeti samo one koji su uniformisani sa par elemenata koje je moguće podesiti. Ali Twitter još uvek nije uklonio mogućnost korišćenja starih. Gde ih naći? Evo ovde:

new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 250,
  height: 500,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    avatars: true,
    behavior: 'all'

  }
}).render().setUser('vaše_korisničko_ime').start();

Kao što vidite ovde ima mnogo toga za podešavanje i više je nego očigledno kako i šta promeniti. A da bi ovaj vidžet radio kako treba potrebna vam je javascript biblioteka koju možete naći ovde: http://widgets.twimg.com/j/2/widget.js
A možete je i preuzeti i koristiti po vašoj potrebi.

Kao i za Facebook tako i za Twitter dugmad biće reči kasnije.

3. Google+

Što se tiče Gugla tu je situacija malo drugačija. Postoje razni vidžeti i neki od njih su prilično izmenjivi tako da o njima neću pisati, ali zato hoću o Gugl plus dugmetu. Zašto je ono toliko zanimljivo? Zato što je interaktivnije za nijansu više od Twitter i FB dugmadi. Gugle ne nudi mogućnost da postavite vaš image umesto njihovog, ali ovo se može zaobići. Kako?

Prvo preuzmemo od Gugla kod:

 window.___gcfg = {lang: 'en-GB'};  
              
              (function() {  
                var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;  
                po.src = 'https://apis.google.com/js/plusone.js';  
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);  
              })(); 

Zatim ga upakujemo u par divova zajedno sa slikom u .png formatu.

Ideja je da Guglov image "poklopimo" sa našim. To radimo css-om. Veoma je bitno da naš image ne bude veći od Guglovog.

.g_plus {  
     position:relative;  
        /* - use this to position your share icon on your page -  */  
    }  
    .g_inner {  
     opacity:0;  
     height:30px;  
     width:30px;  
     position:absolute;  
     top:0;  
     left:0;  
     z-index:3;  
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
     filter:alpha(opacity=0);  
    }  
    .g_image {  
     position:absolute;  
     top:0;  
     left:0;  
     z-index:2;  
     margin-left:6px;  
    }  

Jedino se IE malo buni za providnost (vrednost opacity) pa za njega idu filteri.


Sa ovim pristupom možemo zaobići i Facebook i Twitter dugmad a za vaša rešenja možete okačiti linkove u komentarima.

Napomena

Ove linije koda su prikupljene po raznim ćoškovima interneta i u dobroj meri su izmenjene od originala prema mojim potrebama. Bio bi red da nekog postavim u kreditse ali još samo kada bi ih našao.