[RISOLTO] Creare pulsanti social senza plugin

[crios816]

Buongiorno.
Ho provato diversi plugin per l'inserimento dei pulsanti social, ma oltre ad essere pesanti non mi piacevano come grafica.
Perciò armato di pazienza mi sono costruito i miei pulsanti.


Quando condivido un articolo in facebook e google+ non mi inserisce l'immagine di anteprima.
L'immagine di anteprima è definita con il tag:

Codice: [Seleziona]

<meta name="og:image" content="immagine" />all'interno della pagina



Al suo posto inserisce un'altra immagine, sempre contenuta nella pagina.
mi chiedo se devo definire l'immagine di anteprima nell'indirizzo di condivisione 

Codice: [Seleziona]

http://www.facebook.com/sharer....

Di seguito scrivo le righe che mi permettono di ottenere l'indirizzo di condivisione.
Tralascio tutto il resto del codice perché è html e serve per la grafica del pulsante. 


ricavo l'indirizzo della pagina da condividere.

Codice: [Seleziona]

//$url="https://www.".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];

//$fb_url = 'http://www.facebook.com/sharer/sharer.php?u='.$url;


//<a href="<?php echo $fb_url;?>" target="_blank"> immagine [/url]Il codice che ho scritto è corretto? o è manchevole, ma soprattutto c'e un modo per impostare l'immagine di anteprima dell'articolo?
Grazie

[$Red]

Ciao, se ti servono per la condivisione hai provato anche social 2s ? è leggero non usa immagini ma fontawesome, ha diversi tipi di visualizzazione, carica gli script solo al click dei pulsanti, ed ha anche WhatsApp, in questo articolo Social 2s Plugin Per condividere Sui Social Network e WhatsApp ho cercato di spiegare tutto il suo funzionamento

[crios816]

Buongiorno.
Il plugin che mi hai indicato è molto bello, e pesa pochissimo, ma purtroppo anche con questo plugin non riesco a vedere l’immagine di anteprima.
All’interno della pagina ci sono tutti gli open graph, compreso quello dell’immagine di anteprima.

Codice: [Seleziona]

<meta property="og:title" content="TITOLO"/>
<meta property="og:type" content="article"/>
<meta property="og:email" content="E-MAIL"/>
<meta property="og:url" content="LINK DELLA PAGINA" />
<meta property="og:image" content="IMMAGINE DI ANTEPRIMA"/>
<meta property="og:site_name" content="LINK DELLA HOME PAGE"/>
 
<meta property="og:description" content="DESCRIZIONE DELLA PAGINA"/>


Ho usato il tool che mette a disposizione facebook per verificare il gli opengraph e mi dice:
“La proprietà "og:image" dovrebbe essere fornita in modo esplicito, anche se è possibile dedurre un valore da altri tag.”
 
Inoltre mi dice che i tag devono  essere specificati come property invece che name.
Ma nella pagina sono già identificati con property e non capisco perché non li riconosca.
 
Perché non riesce a identificare gli open graph che ci sono dentro la pagina?
 
Sapere aiutarmi?
Grazie

[$Red]

Le cause possono essere molte, quando fai il test se hai già provato precedentemente quella pagina, quindi FB l'ha in cache, clicchi su scrape again, se non sbaglio usa questo termine, per fargliela riscaricare? Le immagini le inserisci nel tab immagini e link degli articoli o nel contenuto con il pulsante image dell'editor? hanno le dimensioni adatte secondo le direttive di FB? le hai ottimizzate per il "peso" in kb?

[danielecr]

Domanda banale, ma magari è quello...nel content di og:image metti il link all'immagine vero? Del tipo:

Codice: [Seleziona]

<meta property="og:image" content="http://ilmiosito.com/images/immagine.png"/>

Tieni conto anche che l'immagine deve avere una dimensione di almeno 200px x 200px, facebook raccomanda 1200px x 628px, ma potrebbe risultare pesante, un compromesso potrebbe essere 560px x 292px.
Se una delle dimensioni è minore di 200px facebook non la prende.

Fai una prova di condivisione con un link nuovo, onde evitare casini con la cache di facebook, che non sempre riesci a cancellare, nemmeno con il rescraping (soprattutto l'immagine di anteprima).

[crios816]

Ciao.
Ho risolto, era l'immagine troppo piccola era inferiore a 200px X 200px (facebook non accetta immagini sotto i 200X200).
veniva pubblicata la prima immagine maggiore di 200x200 che trovava all'interno della pagina.


Adesso ho inserito un immagine di 600px315 che mi garantisce la pubblicazione con il formato più grande.
ciao.