Buton personalizat de distribuire Facebook cu titlu, URL și imagine personalizate în WordPress

Question

Buton personalizat de distribuire Facebook cu titlu, URL și imagine personalizate în WordPress

27 aug. 2014, 10:12:56

Vizualizări: 40.4K

Voturi: 1

În pagina mea cu toate articolele există un buton de distribuire (prin intermediul plugin-ului AddThis).

Când dau click pentru a distribui pe Facebook, preia URL-ul și titlul, dar imaginile afișate sunt altele. De exemplu.

Am încercat să creez un buton personalizat de distribuire, codul fiind mai jos, dar când dau click pe el nu se întâmplă nimic.

<?php
    $title = the_title();
    $url = the_permalink();
    $summary = urlencode('Mesaj personalizat care rezumă despre ce este vorba în tab-ul tău, sau doar un mesaj simplu pentru a îndemna oamenii să verifice tab-ul.');
    $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );
?>
    <a onClick="window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo $title;?>&amp;p[summary]=<?php echo $summary;?>&amp;p[url]=<?php echo $url; ?>&amp;&p[images][0]=<?php echo $image[0];?>', 'sharer', 'toolbar=0,status=0,width=548,height=325');" target="_parent" href="javascript: void(0)">
        Distribuie personalizat pe Facebook!
    </a>

Am adăugat și tag-urile Open Graph în fișierul meu header.php între tag-urile <head>:

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<meta property="og:title" content="<?php the_title(); ?>" /> 
<meta property="og:description" content="" />  
<meta property="og:image" content="<?php echo $image[0]; ?>" /> 
<meta property="og:video" content="" /> 
<meta property="og:video:width" content="560" />  
<meta property="og:video:height" content="340" />  
<meta property="og:video:type" content="application/x-shockwave-flash" />

Toate articolele de pe site-ul meu ar trebui să poată fi distribuite pe Facebook și Twitter cu URL-ul, titlul, imaginile și descrierea lor. Aici este un link de referință funcțional.

user3209031

121

personalizare facebook

Toate răspunsurile la întrebare

Ce zici de a folosi variabila u pentru a partaja URL-ul tău și a lăsa Facebook să preia conținutul folosind tag-urile Opengraph?

Ceva de genul acesta

<a onClick="window.open('http://www.facebook.com/sharer.php?u=<?php echo $url; ?>', 'sharer', 'toolbar=0,status=0,width=548,height=325');" target="_parent" href="javascript: void(0)">Partajare personalizată pe pagina Facebook!</a>

Carlos Faria

487

27 aug. 2014 10:29:40

Comentarii

hei, mulțumesc! te rog verifică linkul meu de referință actualizat... Mă refer la site-ul care folosește astfel de funcționalități

user3209031

27 aug. 2014 10:32:01

hei, cum ai spus, am făcut asta... dar încă nu funcționează. te rog verifică link-ul demo

user3209031

27 aug. 2014 10:36:09

user3209031 121 · Accepted Answer · 2014-08-27T13:29:59Z

După multă căutare încoace și încolo, am găsit soluția pentru problema de mai sus:

Am înlocuit meta tag-ul de mai sus cu următorul cod:

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );  ?>

<?php if($image[0] != "" ){ ?>

<meta property="og:image" content="<?php echo $image[0]; ?>"  >

<?php } else { ?>

<meta property="og:image" content="logo.png"  >

<?php } ?>


<meta property="og:image:width" content="3523" >

<meta property="og:image:height" content="2372" >

<meta property="og:url" content="<?php echo the_permalink(); ?>"  >

<meta property="og:title" content="<?php echo the_title(); ?>"  > 

<meta property="og:site_name" content="Thefansworld" />

<meta property="og:description" content="" >  

<meta property="fb:app_id" content="3668661019" >

<meta property="fb:admins" content="" >

 <?php endwhile; wp_reset_query(); ?>

Dar totuși, unele POSTĂRI îmi afișează imagini greșite și după ceva cercetare am descoperit următoarele:

Când preia conținutul unei pagini web dintr-un URL, Facebook își stochează în cache conținutul pentru viitor. Asta înseamnă că dacă Facebook a preluat odată date de pe site-ul tău, iar apoi site-ul tău se schimbă (de exemplu, tag-urile og:image se modifică), Facebook nu va actualiza imaginea, deoarece deja are totul stocat în cache pe serverele sale.

Încearcă să vizitezi pagina Facebook Debugger și verifică ce "vede" Facebook. Folosirea acestui instrument forțează Facebook să reîncarce datele de la URL-ul specificat. Aceasta este cea mai bună metodă pentru a depana problema.

Când te asiguri că Facebook "vede" corect tag-urile og:image, atunci verifică dacă imaginile din og:image au lățimea/înălțimea minimă necesară (toate acestea sunt explicate în fb debugger).

Facebook nu va folosi o imagine din og:image dacă aceasta nu îndeplinește criteriile FB. Recomand cu tărie utilizarea acestui instrument ori de câte ori apar probleme cu conținutul de pe site-ul tău pe Facebook.

Sper că acest lucru va ajuta pe cineva. Și dacă am greșit undeva, te rog să-mi spui :)