CLIENT: Second Nature
CLIENT: Ungureanu Imobiliare
CLIENT: Agriferma
CLIENT: Bere Bauturi Bucuresti
CLIENT: Fatal Beauty Studio
Uneori avem nevoie pentru a schimba aspectul de elemente standard pentru a le face sa se potrivesca bine în designul site-ului. În acest post va vom arata cum sa faceti un buton de imprimare personalizat cu contor pentru Facebook si a il integra cu “shortcode” pentru WordPress.
Notiuni de baza statistica pentru URL prin intermediul Graph API
Datorita Facebook Graph API putem obtine statistica pentru URL-ul. Anume: prin adaugarea urmatorul URL în browser-ul dvs.:
Înainte avem nevoie pentru a procesa rezultatele interogarii folosind functia PHP.
Functia de Contor pentru WordPress
Adauga la functions.php-ul tau, care se afla în folderul radacina din tema dumneavoastra (sau creati-l, în cazul în care nu exist?), ca urmare a functiei:
function customFShare() {
$like_results = file_get_contents(‘http://graph.facebook.com/’. get_permalink());
$like_array = json_decode($like_results, true);
$like_count = $like_array[‘shares’];
return ($like_count ) ? $like_count : "0";
}
?>
WordPress shortcode Adauga urmatoarele linii la functions.php pentru shortcode:
function customFShareShortcode( $atts, $content = null ) {
extract(shortcode_atts(array(
‘type’ => ”
), $atts));
return "<a href=’http://www.facebook.com/sharer/sharer.php?u=". get_permalink() ."’ rel=’nofollow’ class=’".$type."’><strong>Share</strong> <span>". customFShare() ."</span></a>";
}
add_shortcode(‘customshare’, ‘customFShareShortcode’);
?>
Aveti nevoie doar sa adaugati shortcode [customshare type=shareTxt] sau [customshare type=shareCircle].
Personalizare pentru butonul Facebook Creati customshare.css si adaugati urmatoarele stiluri pentru butoane dvs.:
text-decoration:none;
display:block;
}
a.shareCircle {
width:146px;
height:146px;
background:url(shareCircle.png) no-repeat 0 0;
}
a.shareTxt {
width:125px;
height:75px;
background:url(shareTxt.png) no-repeat 0 0;
}
a.shareCircle strong, a.shareTxt strong {
display:none
}
a.shareCircle span, a.shareTxt span {
font:12px/12px Arial, Helvetica, sans-serif;
padding:6px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
min-width:14px;
display:inline-block;
text-align:center;
position:absolute;
}
a.shareCircle span {
margin:12px 0 0 107px;
background:#000;
color:#fff
}
a.shareTxt span {
margin:1px 0 0 98px;
background:#fe33a5;
color:#fff
}
a.shareCircle:hover, a.shareTxt:hover {
background-position:0 100%
}
a.shareCircle:hover span {
background:#fff;
color:#2b2b2b;
}
a.shareTxt:hover span {
background:#000;
color:#fff;
}
(/wp-content/themes/temacurenta/customshare/).
Acum, adaugati stilurile în tema noastre pentru aceasta, adaugati urmatorul cod în functions.php:
function customFShareCSS() {
if(!is_admin()){
wp_enqueue_style( ‘customshare’, get_template_directory_uri() . ‘/customshare/customshare.css’,”,’1′, ‘all’);
}
}
add_action(‘wp_print_styles’, ‘customFShareCSS’);
?>
Acesta va fi adaugate pentru toate paginile de front-end. Puteti adauga Tag-uri, pentru a determina pe ce pagini sa ve afisa.
Descarca sursa gata realizata.
3 Comentarii
Scrie un comentariu
Exact ceea ce cautam.
Multumesc
Pentru a avea un alt buton trebuie sa modific doar css.ul ?
Da, pentru a modifica grafica butoanelor trebuie editat customshare.css cu ceva cunostinte in CSS bineinteles. Daca intampini probleme, te putem ajuta.