Jump to content

[Module gratuit] Boutons social pour les Produits


cmak

Recommended Posts

Voici un module gratuit module pour ajouter les boutons de réseaux sociaux sur les pages produit.

cmakSocialProduct v1.0 cmaksocialproduct_v1.0.zip

cmakSocialProduct v1.1 cmaksocialproduct_v1.1.zip

cmakSocialProduct v1.2 cmaksocialproduct_v1.2.zip

cmakSocialProduct v1.3 cmaksocialproduct_v1.3.zip

cmakSocialProduct v1.4 cmaksocialproduct_v1.4.zip

 

 

Fonctionnalités

  • Bouton Twitter (tweeter ce produit)
  • Google plus (+1 pour ce produit dans la langue du visiteur)
  • Pinterest Pin It. Accroche l'image principale du produit. Si le produit n'a pas d'image, le bouton PinIT n'est pas affiché
  • Facebook LIKE ce produit
  • Point d'accroche par défaut : extraRight. Peut être accroché dans extraLeft
  • Traduction FR et EN

Page du projet

http://cmaksocialpro...googlecode.com/

http://www.cmak.fr/

 

 

ScreenShots

 

Les boutons

S%25C3%25A9lection_048.png

 

La page produit avec le hook extraRight

S%25C3%25A9lection_045.png

 

 

 

La page produit avec le hook extraLeft

S%25C3%25A9lection_068.png

 

 

Back Office

S%25C3%25A9lection_046.png

 

 

Configuration du module : sélection des réseaux sociaux activés

S%25C3%25A9lection_047.png

Edited by cmak (see edit history)
  • Like 3
Link to comment
Share on other sites

@mohamed23

J'ai prévu de greffer le module dans la partie droite seulement : hook extraRight.

Mais avec une simple modification, vous pouvez accrocher les boutons dans la partie gauche : hook extraLeft

 

Pour cela :

- Éditer le fichier cmaksocialproduct.php (voir plus bas)

- Avec le Back Office, dans Modules, points d'accroche, décrocher le extraRight et accrochez le extraLeft

 

 

Modification du fichier cmaksocialproduct.php

Ajouter ces lignes :

public function hookExtraLeft($params)
{
 return $this->hookExtraRight($params);
}

Link to comment
Share on other sites

Nouvelle version v1.1

- Corrige une erreur : Google+ affichait du français seulement.

Maintenant, le bouton Google+ utilise la langue du visiteur.

- Permet d'accrocher les boutons dans le hook extraRight et/ou extraLeft

 

Merci à mohamed23 pour ses suggestions

 

Pour suivre les mises à jour :

http://www.cmak.fr/

http://cmaksocialpro...googlecode.com/

 

@Graphileom : Je ferais une version compatible PS1.5 prochainement, et ce, pour tous mes modules.

Edited by cmak (see edit history)
Link to comment
Share on other sites

Bonjour,

 

Merci pour ce module très pratique, utile et surtout facilement positionnable.

 

Mais j'aurais souhaité mettre d'autres icônes Facebook, Twitter, etc.

 

Pouvez-vous m'indiquer ce qu'il faut modifier svp ?? Je n'ai pas trouvé toute seule <_<

 

Merci par avance

Link to comment
Share on other sites

@crea67 :

Quel genre d'icône souhaitez vous ajouter?

Je ne comprends pas très bien, parlez-vous de liens vers vos pages facebook, twitter?

Peut être est-ce autre chose?

Il faudrait mettre ces icônes à quel endroit?

Link to comment
Share on other sites

Bonjour,

 

Tout d'abord, merci pour ce module !

J'ai toutefois un problème avec avec le bouton facebook... Erreur quand je clique dessus...

Auriez vous une idée du problème.

Je précise que j'avais installé le module de Ccrom auparavant et que c'était le même souci pour moi... Bouton twitter, google fonctionnaient et pas le facebook... ? (Module de CCrom d'ailleurs qui fonctionnait en local et qui n'apparait pas en ligne...)

bref, J'avoue n'avoir aucune idée d'où peut venir le problème...

y'a t-il un conflit avoir un autre module ?

 

Merci à vous !!!

Link to comment
Share on other sites

Bonsoir,

 

Alors, en ligne, le module fonctionne... après réinitialisation...

Par contre j'aurais plusieurs questions et remarques.

- Le bouton facebook est décalé et un tout petit bout de la box dépasse. Dans le dossier php j'ai donc changé

style="border: medium none; width: 43px; height: 20px;">
pour ceux que ça intéresse...

- Comment peut on réaliser un alignement parfait entre les boutons ? Je ne comprends pas le "style" du module...

- Enfin, lorsqu'on clique j'aime, sur facebook on trouve un encart untel aime un lien sur un fond sans image ni rien... Avez vous une idée du pourquoi du comment ?

 

Encore merci !

Link to comment
Share on other sites

Bonjour

 

- Le bouton facebook est décalé et un tout petit bout de la box dépasse.

Avez vous une image de ça?

 

En effet le bouton facebook est décalé vers le haut

S_lection_083.png

 

 

 

style="border: medium none; width: 43px; height: 20px;">

Votre modification donne ceci :

S_lection_082.png

Link to comment
Share on other sites

Bonsoir,

 

non, je n'ai pas d'image car j'ai modifié ce bout du fichier :

<!-- Facebook Like this Product -->

<iframe

src="//www.facebook.com/plugins/like.php?locale=en_US&href='.urlencode($product_link).'&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&font&height=21"

scrolling="no"

frameborder="0"

style="border:none; overflow:hidden; width:45px; height:19px;"

allowTransparency="true">

</iframe>';

 

J'avais effectivement un petit bout de la box qui dépassait mais c'est peut être du à ma version prestashop 1.4.7.3

Je ne sais pas si c'est une conséquence de mes modifications, mais après que le bouton facebook apparaisse normalement pendant un certain temps (Like) j'ai maintenant une photo de mon compte

facebook. Je vous montre en image :

 

Edit :

J'ai trouvé l'origine du problème (cf image) J'ai un compte facebook perso auquel est affilié une page (mon futur magasin) quand je me connecte en tant que "futur magasin" l'image de mon compte perso apparait dans le bouton like facebook de mon site (Cf image) C'est étrange :blink:

Rappelez moi le width et le height d'origine que je teste et vous montre l'image de la box qui dépasse...

post-291511-0-80422100-1345062427_thumb.jpg

Edited by steinbeck (see edit history)
Link to comment
Share on other sites

Après d'autres essais je rencontre plusieurs problèmes

- bouton facebook me demande de confirmer et le like ne fonctionne pas (Cf photo)

- G+ ne fonctionne pas (Cf photo)

Je me demande si le module n'est pas en conflit avec un autre module réseaux sociaux que j'utilise pour "nous suivre"... Car c'est étrange une fois ça fonctionne une fois ça fonctionne pas... Que faire dans ce cas là ?

Aussi, les liens facebook sont vraiment vierge d'open tags ce qui rend finalement le liens peu propice à être partager sur facebook...

post-291511-0-72587100-1345098994_thumb.jpg

Link to comment
Share on other sites

  • 2 weeks later...

Nouvelle version 1.2

 

Le bouton PinIT a été amélioré.

 

Le bouton PinIT accepte trois paramètres :

- url : URL de la page

- media : URL de l'image

- description : Description de l'image

 

S%25C3%25A9lection_048.png

 

Dans la version 1.1 du module cmakSocialProduct, les paramètres étaient mal utilisés : url était associé à l'adresse de l'image, description était correct et la paramètre media n'était pas renseigné.

 

Dans la nouvelle version 1.2, les trois paramètres sont correctement renseignés :

- url correspond à l'adresse de la page produit

- media correspond à l'adresse de l'image

- description correspond au nom du produit.

 

Le zip de la version 1.2 a été ajouté au premier post de ce sijet.

Il est aussi disponible sur GoogleCode : http://cmaksocialproduct.googlecode.com

Link to comment
Share on other sites

@charles34130 : j'ai volontairement laissé le like de facebook en anglais. les autres s'adaptent au langage de l'utilisateur. pour le bouton facebook, j'ai choisi de le laisser en anglais afin que sa largeur soit fixe ce qui me permet de cacher la bulle du compteur en raccourcissant le iframe.

j'ai pris le parti de ne pas afficher les compteurs car lorsqu'ils affichent zéro ils peuvent donner une mauvaise image du produit.

Link to comment
Share on other sites

@bllcll : Vous ne pouvez utiliser ce module qu'à partir d'un site accessible pour les réseaux sociaux. tweeter , facebook et les autres ne pourrons pas faire de liens vers un http://localhost/ ils détectent d'ailleurs sans doutes les sites non routables.

 

Merci pour cette réponse rapide !

j'ai hâte de pouvoir tester en live !

Link to comment
Share on other sites

@mick71

merci d'utiliser mon module : très bon choix !

 

je viens d'essayer, ça fonctionne très bien : le bouton s'affiche et quand on clique dessus, le pop-up de facebook s'ouvre.

le problème que vous rencontrez est sans doute dû à la configuration de votre connexion ou de votre poste de travail.

 

179146Slection094.png

Link to comment
Share on other sites

Bonjour et merci pour ce super module.

J'ai seulement un probleme avec le bouton facebook, je suis connecté sur mon compte facebook et quand je clique sur le bouton façebook dans la page produit, celui-ci montre bien que l'action a bien ete prise en compte mais, le lien du produit n'apparait pas sur mon mur facebook. J'ai loupé quelque chose ?

Merci beaucoup pour votre retour

Link to comment
Share on other sites

@stephforum : lorsqu'on like une page, facebook 'lit' la page et choisit lui même une image. je n'ai pas trouvé le moyen de lui indiquer une image en particulier. peut être qu'on ne peut pas. je n'ai pas essayé mais peut être que les textes enrichis de type microdata avec des balises http://www.schema.org seraient une solution.

Link to comment
Share on other sites

Merci cmak pour ton module ! Je l'ai installé sans problème sur la version 1.4.9.0.

 

J'ai juste un petit soucis... Pour que les 4 boutons sociaux soient alignés sur le theme prestashop 1.5 (positionnement: extraleft), j'ai dû faire une toute petite retouche comme ceci:

 

style="border:none; overflow:hidden; width:105px; height:20px;"

 

En faisant cela, le compteur de "like" est affiché. Est-ce qu'une option existe pour l'empêcher d'apparaitre ???

J'ai essayé de trouver la solution moi même sur http://developers.facebook.com/docs/reference/plugins/like/ mais sans succès...

 

Merci

Link to comment
Share on other sites

  • 2 weeks later...

@Rudy_D : Je n'ai même pas essayé le module avec ps 1.5

 

Une version 1.3 est en préparation pour aligner le bouton facebook et pour améliorer la validité w3c du html.

J'ai moi aussi mis le height à 20...

 

Le bouton Facebook est toujours accompagné de son compteur.

Je cache la bulle compteur de la manière suivante :

- J'utilise le code facebook en mode iframe plutot que xfbml, html5 ou html

- Je fixe le texte du bouton à 'like' afin que la largeur du bouton soit fixe

- Je réduit la largeur du iframe, la bulle est toujours là mais elle dépasse du iframe, elle n'est pas affichée.

 

http://developers.facebook.com/docs/reference/plugins/like/

Link to comment
Share on other sites

  • 2 weeks later...

D'abord, merci pour ce module.

J'ai juste un petit problème sur 1.4.9: quand je clique sur le bouton like, il se transforme en link "confirmer" sur lequel je dois cliquer une deuxième fois. Une idée du pourquoi?

(Une fois confirmé, le like apparaît deux fois sur ma page FB.)

 

edit: en fait c'est aléatoire, j'arrive parfois à "liker" directement sans avoir à confirmer

Edited by modmob (see edit history)
Link to comment
Share on other sites

  • 2 weeks later...

J'ai pris le parti de ne pas afficher les bulles compteur car elles peuvent donner mauvaise impression lorsqu'elles affichent zéro,

 

Merci pour ton partage

 

Ce module est il compatible 1.5?

 

Pourquoi ne pas afficher les bulles compteur qu'à partir d'un certain nombre...

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...
  • 2 weeks later...
  • 2 weeks later...

Bonjour,

 

Merci pour ce module.

J'ai juste deux petits problèmes :

Le bouton facebook ne fonctionne pas. La fenêtre de connexion s'ouvre bien, mais ensuite, rien ne s'affiche sur le mur, il ne propose même pas d'ajouter un commentaire... Doit-on ajouter dans la page les tags facebook ?

 

Autre problème, le bouton google + n'est pas du tout aligné... j'ai essayé de modifier le code, mais je ne comprends pas votre système d'alignement.

 

Merci pour votre aide.

 

Exemple d'un de mes produits : http://www.styledrum.fr/21-test.html

Link to comment
Share on other sites

merci pour votre module, j'ai essayé de changer la langue de google plus dans le fichier cmaksocialproduct.php mais pas changement. Remplacé en ligne 152:

 

if (strtolower($lang_iso_code) != 'en')

pour:

if (strtolower($lang_iso_code) != 'es')

 

 

aussi j'ai remplacé ligne 159:

 

'.$lang_str.'

pour:

window.___gcfg = {lang: 'es'};

 

mais alors votre fichier affiche erreur de syntaxe

 

Vous savez que je devrais changer?

 

Cordialment

Link to comment
Share on other sites

Salut,

ce modules a l'air super mais chez moi il ne marche pas, dès que je l'installe la page du produit est invisible et donc on ne vois ni les boutons facebook, tweeter etc mais ont ne vois plus du tout le produit non plus .

 

Une solution ?

 

Merci

Link to comment
Share on other sites

Salut,

ce modules a l'air super mais chez moi il ne marche pas, dès que je l'installe la page du produit est invisible et donc on ne vois ni les boutons facebook, tweeter etc mais ont ne vois plus du tout le produit non plus .

 

Une solution ?

 

Merci

Sans doute un téléscopage avec un autre module
Link to comment
Share on other sites

merci pour votre module, j'ai essayé de changer la langue de google plus dans le fichier cmaksocialproduct.php mais pas changement. Remplacé en ligne 152:

 

if (strtolower($lang_iso_code) != 'en')

pour:

if (strtolower($lang_iso_code) != 'es')

 

 

aussi j'ai remplacé ligne 159:

 

'.$lang_str.'

pour:

window.___gcfg = {lang: 'es'};

 

mais alors votre fichier affiche erreur de syntaxe

 

Vous savez que je devrais changer?

 

Cordialment

Vous voulez que tous vos visiteurs voient un bouton G+ en espagnol?

Le module affiche le bouton G+ dans la langue que le visiteur a choisi.

 

Votre modification de la ligne 152 est une erreur.

Comprenez les lignes 152 à 155 comme ceci : si la langue du visiteur est 'english' alors la langue du bouton G+ sera english, c'est à dire pas de réglage de langue car le bouton G+ est english par défaut.

 

Votre modification de la ligne 159 contient une erreur

ecrivez : window.___gcfg = {lang: \'es\'}

sans ; à la fin et avec un \ devant les '

Link to comment
Share on other sites

La version actuelle doit ête misà jour

- Aligement du boutton PinIt (pour chrome safari et opera)

- Compatibilité ps 1.5.x

 

Je n'ai pas beaucoup de temps libre pour travailler sur le module.

Et je suis assez peu motivé.

Je vous demande de patienter un peu avant une nouvelle version

  • Like 1
Link to comment
Share on other sites

Sans doute un téléscopage avec un autre module

 

 

Alors ? personne ne sait comment je pourrais régler ça ?

 

Je suis toujours bloqué au même niveau, les pages produits sont toutes noires dès que j'installe ce module :/

 

Merci.

Link to comment
Share on other sites

  • 3 weeks later...

Bonjour,

 

Tout dabord un grand merci pour ce super module...

 

Je suis en PS 1.4, je souhaite greffer ce module sur la product-list prestashop,

ainsi l'internaute pourrait recommander un produit sur les réseaux sociaux directement via la liste de produits, dans les catégories etc. sans avoir à ouvrir la page produit.

 

Sauriez vous comment réaliser celà ?

 

Je vous remercie vivement.

Link to comment
Share on other sites

  • 2 weeks later...
  • 4 weeks later...
  • 3 weeks later...
  • 2 weeks later...

Et non! J'ai apercu votre question moi ^^

De mémoire sur mon site j'ai juste elargie lespacement, et le compteur est déjà activé, il est juste masqué par défaut en fait. :)

 

Enfin un gentleman, mais malheureusement c'est pas la bonne réponse...

Link to comment
Share on other sites

C'est du CSS ou du HTML à modifier?

Moi j'ai ceci

<div><button type="submit"><i class="pluginButtonIcon pluginButtonXOff img sp_like sx_like_ch"></i><i class="pluginButtonIcon pluginButtonXOn img sp_like sx_like_x" title=""></i></button>J’aime</div>

Link to comment
Share on other sites

Bonjour à tous, merci à cmak de proposer un module gratuit quand d'autres le mette en vente à plus de 30€.

J'aurais une question, j'utilise maintenant la version 1.5.3, et les boutons s'étaient littéralement collés sous le bouton "ajouter au panier", j'ai donc greffé le module sur "left column", c'est nickel, mis à part qu'il se met entre "envoyer à un ami" et "imprimer" : avez vous une méthode pour le mettre en dessous de "imprimer"? Merci!

Link to comment
Share on other sites

bonjour,

 

super module qui fonctionne parfaitement sur ma version prestashop 1.4.8.2.

Toutefois j'aurais aimé changer l'image des icones facebook, twitter, pinterest et google+ pour des raisons graphiques. Mais je ne trouve pas où remplacer les images sinon où insérer images de mes picto dans le code.

 

Merci de votre aide.

 

anne

Link to comment
Share on other sites

Bonjour à tous, merci à cmak de proposer un module gratuit quand d'autres le mette en vente à plus de 30€.

J'aurais une question, j'utilise maintenant la version 1.5.3, et les boutons s'étaient littéralement collés sous le bouton "ajouter au panier", j'ai donc greffé le module sur "left column", c'est nickel, mis à part qu'il se met entre "envoyer à un ami" et "imprimer" : avez vous une méthode pour le mettre en dessous de "imprimer"? Merci!

Bonjour à tous, merci à cmak de proposer un module gratuit quand d'autres le mette en vente à plus de 30€.

J'aurais une question, j'utilise maintenant la version 1.5.3, et les boutons s'étaient littéralement collés sous le bouton "ajouter au panier", j'ai donc greffé le module sur "left column", c'est nickel, mis à part qu'il se met entre "envoyer à un ami" et "imprimer" : avez vous une méthode pour le mettre en dessous de "imprimer"? Merci!

 

Salut, pour positionner tes différents boutons, il suffit d'aller dans position dans l'onglet modules, puis cocher "

Afficher les points d'accroche invisibles"

ensuite il te suffit de chercher

Extra actions on the product page (right column) et changer la position de ton bouton

Link to comment
Share on other sites

Salut, pour positionner tes différents boutons, il suffit d'aller dans position dans l'onglet modules, puis cocher "

Afficher les points d'accroche invisibles"

 

ensuite il te suffit de chercher

Extra actions on the product page (right column) et changer la position de ton bouton

 

Merci beaucoup!

Link to comment
Share on other sites

bonjour,

personne? concernant ma demande :

 

"... j'aurais aimé changer l'image des icones facebook, twitter, pinterest et google+ pour des raisons graphiques. Mais je ne trouve pas où remplacer les images sinon où insérer images de mes picto dans le code.

ma version prestashop 1.4.8.2. ..."

 

 

Merci de votre aide.

 

anne

Link to comment
Share on other sites

J'utilise la version 1.4.8.2. et oui, j'ai essayé de le réinstaller mais ça ne marche pas :(

Regarde voir dans ton fichier dans le ftp : modules/cmaksocialproduct/cmaksocialproduct.php vers la ligne 177 si tu as bien ceci :

"if (Configuration::get('CMAKSOCIALPRODUCT_FACEBOOK') == 1)

$data['facebook'] = '<!-- Facebook Like this Product -->

<iframe

src="//www.facebook.com/plugins/like.php?locale=en_US&href='.urlencode($product_link).'&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&font&height=20"

scrolling="no"

frameborder="0"

style="border:none; overflow:hidden; width:48px; height:20px;"

allowTransparency="true">

</iframe>';"

Link to comment
Share on other sites

bonjour,

personne? concernant ma demande :

 

"... j'aurais aimé changer l'image des icones facebook, twitter, pinterest et google+ pour des raisons graphiques. Mais je ne trouve pas où remplacer les images sinon où insérer images de mes picto dans le code.

ma version prestashop 1.4.8.2. ..."

 

 

Merci de votre aide.

 

anne

Après avoir regarder les fichiers, j'ai trouvé! Tu voudrais changer quel bouton?

Edit, je n'ai trouvé que pour le bouton pin it :x

Edited by dar1987 (see edit history)
Link to comment
Share on other sites

non... enfin je crois que non... j'ai un abonnement pour ma boutique, je l'ai eu "clé en main" lol

Mais peut-être que je ne sais pas où chercher? :unsure:

Ah ok, je comprend mieux.

Sinon, faudrait dézipper le module, et regarder dans le fichier en question, ton bouton doit surement pointer vers paypal!

Link to comment
Share on other sites

Après avoir regarder les fichiers, j'ai trouvé! Tu voudrais changer quel bouton?

Edit, je n'ai trouvé que pour le bouton pin it :x

 

Merci beaucoup alors j'ai trouvé pour twitter mais je suis preneuse pour pinterest, le jaime de facebook et google+ ! ;-)

 

Alors pour twitter dans le fichier cmaksocialproduct.php, je sais c'est pas très joli ligne 142 :

if (Configuration::get('CMAKSOCIALPRODUCT_TWITTER') == 1)
  $data['twitter'] = '<!-- Twitter Share this Product -->
		<a href="https://twitter.com/share" class="" data-count="none"><img src="http://www.monsite.com/img/moniconetwitter.png"/></a>
		<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);[spam-filter](document,"script","twitter-wjs");</script>';

Edited by anne_r (see edit history)
Link to comment
Share on other sites

Merci beaucoup alors j'ai trouvé pour twitter mais je suis preneuse pour pinterest, le jaime de facebook et google+ ! ;-)

 

Alors pour twitter dans le fichier cmaksocialproduct.php, je sais c'est pas très joli ligne 142 :

if (Configuration::get('CMAKSOCIALPRODUCT_TWITTER') == 1)
  $data['twitter'] = '<!-- Twitter Share this Product -->
		<a href="https://twitter.com/share" class="" data-count="none"><img src="http://www.monsite.com/img/moniconetwitter.png"/></a>
		<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);[spam-filter](document,"script","twitter-wjs");</script>';

Si je trouve je te dis ;)

Link to comment
Share on other sites

  • 1 month later...
  • 4 months later...
Guest
This topic is now closed to further replies.
×
×
  • Create New...