Alcuni di voi mi hanno chiesto come impostare l’immagine che appare nelle notifiche estese che si generano a partire dal click sui Like Button presenti su siti e blog.
Io ho riportato la domanda al mio caro amico e programmatore di fiducia Oreste che mi ha scritto una breve guida che riporto qua sotto con tanto di spiegazioni a margine:
1. Entrare nella cartella che contiene il template dal client FTP (es. /htdocs/wp-content/themes/arras/);
2. Copiare e Incollare in testa al file functions.php le seguenti funzioni PHP:function catch_that_image() {
global $post, $posts;
$first_img = ”;
ob_start();
ob_end_clean();
$output = preg_match_all(‘/<img.+src=[\'"]([^\'"]+)[\'"].*>/i’, $post->post_content, $matches);
$first_img = $matches [1] [0];if(empty($first_img)){ //Defines a default image
$first_img = “/images/default.jpg”;
}
return $first_img;}
function the_content_limit($max_char, $more_link_text = ‘(more…)’, $stripteaser = 0, $more_file = ”) {
$content = get_the_content($more_link_text, $stripteaser, $more_file);
$content = apply_filters(‘the_content’, $content);
$content = str_replace(‘]]>’, ‘]]>’, $content);
$content = strip_tags($content);if (strlen($_GET['p']) > 0) {
echo $content;
} else if ((strlen($content)>$max_char) && ($espacio = strpos($content, ” “, $max_char ))) {
$content = substr($content, 0, $espacio);
$content = $content;
echo $content;
echo “…”;
} else {
echo $content;
}
}Fonte: http://www.wprecipes.com/how-to-get-the-first-image-from-the-post-and-display-it
Spiegazione:
La prima funzione legge il codice html del post e cerca il PRIMO tag <img> del post copiandone l’indirizzo.
Nel caso non ci siano immagini nel post nella riga “$first_img = ‘/images/default.jpg’;” si può
specificare l’indirizzo di un immagine di default da visualizzare scrivendolo tra i due apici.
La seconda funzione invece pulisce il contenuto del post da tag html e lo legge e taglia al numero di caratteri
specificato ritornando una piccola sintesi che verrà usata come meta description.3. Salvare e chiudere il file functions.php.
4. Modificare il file header.php inserendo queste righe sotto la chiusura del tag “</title>”:<?php if(is_single()){ ?>
<meta property=”og:title” content=”<?php single_post_title(); ?>”/>
<meta property=”og:type” content=”[tipologia del sito]“/>
<meta property=”og:url” content=”<?php $permalink=get_permalink($_post->ID); echo $permalink; ?> “/>
<meta property=”og:image” content=”<?php $immagine=catch_that_image(); echo $immagine; ?>”/>
<meta property=”fb:admins” content=”[UID FACEBOOK]“/>
<meta property=”og:site_name” content=”<?php bloginfo(‘name’); ?>”/>
<meta property=”og:description” content=”<?php the_content_limit(200, ”); ?>”/><?php } ?>
Spiegazione:
La condizione “if” stampa i meta open graph di facebook solo se l’utente visualizza un articolo singolo,
se visualizzati i meta open graph di facebook tramite le funzioni php specificate nel parametro “content”
si riempiono dinamicamente del:
– Titolo del post (og:title);
– Tipo del sito [Specificato una volta e non variabile] (og:type);
– Url del Post singolo (og:url);
– Prima immagine del post (og:image);
– Admin del sito [Specificato una sola volta e non variabile] (og:admins);
– Titolo del sito (og:site_name);
– Sintesi dell’articolo di 200 caratteri (og:description)5. Salvare e chiudere il file header.php
6. Fine!
Capito? Sei ovviamente invitato a porre domande nei commenti se hai dei dubbi, l’autore della guida Oreste Di Modugno sarà lieto di risponderti (al massimo lo costringerò io con la forza!)!
Potrebbero interessarti:
- Il nuovo Like Button è TROPPO virale?
- Arriva il Facebook Send Button!
- Facebook Social Plugins: il Subscribe Button
Tag:facebook tips, guida facebook, like button facebook
Categories : Facebook, Primo Piano
No Responses to “Come impostare l’immagine predefinita associata al Like Button”