Se connecter

Whymsun · 27/02/2012, 12:34:59

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: -1.9.4.3
#~ Url du site :
#~ Hébergeur / Soft :
#~ Informations Système :
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour à tous,

je développe un site dont les pages doivent être accompagnées d'un bouton facebook (version XFBML retenue).

L'idée étant que la fonction du bouton soit automatique, le code est inséré dans un gabarit :

dans le html tag :

Code :
<html xmlns:fb="http://ogp.me/ns/fb#">

juste après la balise body :

Code :
<div id="fb-root"></div>

{literal}<script>(function(d, s, id) {

  var js, fjs = d.getElementsByTagName(s)[0];

  if (d.getElementById(id)) return;

  js = d.createElement(s); js.id = id;

  js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>{/literal}

dans le body :

Code :
<fb:like href="{$canonical}" send="true" width="450" show_faces="true" action="recommend"></fb:like>

Le résultat est que l'extraction du titre et de la description est impeccable, le problème c'est avec les images, le script s'acharne à chercher les images dans un répertoire images à partir de l'adresse de la page :

http://monsite/mapages/images/uneimages.jpg

au lieu de

http://monsite/uploads/images/uneimages.jpg

Un vrai casse-tête, l'un d'entre vous à-il déjà été confronté à ce problème ? Sad

***airelibre*** · 27/02/2012, 12:59:24

Bonjour,

J'avais eu un problème proche avec Facebook. As-tu essayé d'utiliser la balise link avec image_src ? Facebook utilise ce tag pour identifier l'image à utiliser.

Exemple :

Code :
<link rel="image_src" href="http://monsite/uploads/images/uneimages.jpg" />

Whymsun · 27/02/2012, 15:34:15

Bonjour airelibre,

merci pour ta réponse,

en effet, la balise <link> permet d'indiquer une image spécifique, même chose pour :

Code :
<meta property="og:image" content="http://monsite/uploads/images/uneimages.jpg"/>

L'ennui c'est que sous cette forme, il faut renseigner l'emplacement de chaque visuel à la main.

Je suis allé jeter un œil sur les sites des magazines “ultra socialisés” pour voir comment c'était fait, ils ont tous en commun l'ensemble des métas :

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

<meta property="og:title" content=""/>

<meta property="og:type" content="article"/>

<meta property="fb:page_id" content=""/>

<meta property="article:section" content=""/>

<meta property="og:url" content=""/>

<meta property="og:image" content=""/>

et ces méta sont précisément renseignées sur le contenu à afficher, ce qui semble contredire l'idée que facebook scanne le contenu de la page pour afficher une image.

Me paraissant improbable que les éditeurs de ces sites renseignent ces métas à la main, je pense qu'il doit y avoir un minimum de programmation derrière tous ça.

Pourtant je n'ai rien trouvé sur la question dans les pages du site facebook developper.

Qu'en pense tu, mon raisonnement tient la route et il faut voir du côté de smarty ce qu'il est possible de faire ou un truc m'échappe ? Big Grin

***airelibre*** · 27/02/2012, 20:34:12

Etant donné que CMSMS génère la partie "head" après la partie "body", ca peut être assez simple. Mais il idéalement que ton image soit située dans une variable précise.

Ceci te permettrait de faire quelque chose comme ca dans ton gabarit de contenu :

Code :
{capture assign='HeadLink'}<link rel="image_src" href="{$entry->TonFichier}" />{/capture}

Puis dans le head, on récupère le contenu de "HeadLink" pour l'afficher sous forme de meta :

Code :
{if isset($HeadLink)}{$HeadLink}{/if}

</head>

En tous cas c'est ce que j'utilise sur 2 sites et ca marche bien

Whymsun · 28/02/2012, 15:01:40

J'ai trouvé une solution intéressante pour permettre à un utilisateur lambda de renseigner la meta link :

Code :
<link rel="image_src" href="http://www.monsite.com/{content_image block='image1' dir='images' urlonly='true' label='image à afficher pour facebook'}" />

L'utilisateur sélectionne le nom de l'image dans un menu déroulant dans l'admin de la page.

Cela vaut ce que ça vaut, mais ça dépanne en attendant mieux.

Le seul problème est lorsque send est sur true dans le fb:like, pour activer les deux boutons : recommander et envoyer.

Le bouton “envoyer” fonctionne très bien, prise en compte de la meta avec l'url complète, le bouton “recommander” s'arrête à la partie de l'url en clair et ne lis visiblement pas le bloc de contenu.

Je ne vois pas pourquoi, d'autant que si je passe en send sur false, donc avec le bouton “recommander” seul, cela fonctionne très bien. Peut-être un problème de timing !

Cela-dit, la solution que tu propose laisse entendre qu'il serait possible de récupérer une image active dans le content, tu confirme ?

Avec une boucle foreach par exemple ?

J'avoue que je ne suis pas un génie en smarty, mais ça m'intéresse d'aller plus loin. :p

***airelibre*** · 28/02/2012, 16:10:56

Bizarre ce problème - Peux-tu mettre le code ?

Concernant ma proposition, elle partait du principe que tu étais dans un gabarit de module, par exemple le module de produits "Products". Ceci te permet de définir un champ d'image dans ta fiche produit, image qui sera reprise dans Facebook. Il est plus compliqué de reprendre une image à l'intérieur d'un bloc de contenu. Tu peux néanmoins essayer avec le modificateur smarty "regex_replace", mais je n'ai jamais tenté.

Sinon, ta solution d'utiliser {content_image} est très bien également. Saches néanmoins que si tu la met dans "head", tu ne pourras pas - je pense - avoir l'info dans le body de ton code. Mais tu n'en a peut être pas besoin

Whymsun · 28/02/2012, 17:50:15

Le code retenu est la version XFBML (javascript) du fb:like de facebook, elle permet d'afficher à la fois le bouton “j'aime” (recommander) et le bouton “envoyer” (valeur ajoutée puisque permet à l'utilisateur de signaler l'info directement à ses amis ou un groupe).

Ce code semble récent, c'est pourquoi je n'utilise pas le module CGFBApp, qui n'offre pas cette option.

Le titre et le contenu du “content” sont bien récupérés, seules les images posent problème. Le script génère une url aberrante du type “http://monsite.com/repertoire/uploads/images/uneimages.jpg”. (erreur404)

Au départ je pensais que le code facebook scannait le contenu de la page et captait la première image qui lui tombait sous la main, comme ce n'est pas le cas et que le but est que l'activation de cette fonction soit transparente pour l'utilisateur du site, j'ai du trouver une solution pour automatiser l'ensemble.

Le code est installé de la façon suivante :

Dans le head

Code :
<link rel="image_src" href="http://monsite.com/{content_image block='image1' dir='images' urlonly='true' label='image à afficher pour facebook'}" />

Dans le body

Code :
<div id="fb-root"></div>

{literal}<script>(function(d, s, id) {

  var js, fjs = d.getElementsByTagName(s)[0];

  if (d.getElementById(id)) return;

  js = d.createElement(s); js.id = id;

  js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>{/literal}

Après le {content}

Code :
<fb:like href="{$canonical}" send="true" width="450" show_faces="true" action="recommend" font="tahoma"></fb:like>

En effet, je n'ai pas besoin de l'info dans le body.

Ce problème est vraiment curieux !

Whymsun · 28/02/2012, 20:38:09

En ce qui concerne le problème cité + haut :

Citation :Le bouton “envoyer” fonctionne très bien, prise en compte de la meta avec l'url complète, le bouton “recommander” s'arrête à la partie de l'url en clair et ne lis visiblement pas le bloc de contenu.

Il est résolu de la façon suivante :

désormais dans le head on trouve

Code :
<link rel="image_src" href="http://www.monsite.com/{content_image block='image1' dir='images' urlonly='true' label='image à afficher pour facebook'}" />

<meta property="og:title" content="{title}" />

<meta property="og:type" content="website" />

<meta property="og:url" content="{$content_obj->GetURL()}" />

<meta property="og:image" content="http://www.monsite.com/{content_image block='image1' dir='images' urlonly='true' label='image à afficher pour facebook'}" />

<meta property="og:site_name" content="{sitename}" />

Cette fois, les deux boutons fonctionnent.

Seule la meta :

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

n'a pas été implémenté, cause que si je renseigne le content par : content="{meta_description}" facebook déclare une erreur “You have tags ouside of your” et cela fonctionne sans.

En bref, cela permet de contourner le problème de récupération d'image en sélectionnant celle-ci dans un menu déroulant de l'admin.

Intéressant dans le cas d'un nouveau site, mais quelle galère dans le cas d'un site préexistant avec des centaines de pages, ou si l'utilisateur oubli de sélectionner l'image dans le menu déroulant !

À moins de faire en sorte d'insérer une image par défaut, ça doit être faisable avec les conditions if else. À voir.

Se connecter
Utilisateur :
Mot de passe :	Mot de passe oublié ?
	Se rappeler