Jump to content

[Module] Intégration d'icone dynamique facebook, twitter, contact et colissimo

zangbeto

By zangbeto
in Modules et thèmes gratuits

 Share

Recommended Posts

zangbeto Newbie

zangbeto

Posted
Posted (edited)

Bonjour à tous, je souhaiterais partager avec vous un module sympa couplé avec une technique d'intégration des boutons de réseaux sociaux, colissimo, contact sur le front office de vote boutique.

 

 

ÉTAPE 1: Téléchargez le dossier "images" en pièce jointe dans votre répertoire principale

 

ÉTAPE 2: Téléchargez et installez le module "HTMLbox" en piece jointe (compatible PS 1.2.x à 1.5.x.)

 

ÉTAPE 3: Cliquez sur "configurer" du module "HTMLbox" et sélectionnez à gauche l'onglet "header", dans la zone de texte copier et coller le code ci-dessous en prenant soin de modifier les liens "FACEBOOK" et "TWITTER" selon vos données personnelles.

 

<div style=\"width:100px; height:91px; display:block; position:fixed; left:0px; top:200px; background:none;\">	  <a href=\"http://www.facebook.com/VOTRE_PAGE\" style=\"background:none;\" target=\"_blank\">   <img onmouseover="this.src='/images/fb2.png';" onmouseout="this.src='/images/fb1.png';" src="/images/fb1.png" alt="" width="100" height="91" /></p>

</a>  </div>
<div style=\"width:100px; height:91px; display:block; position:fixed; left:0px; top:300px; background:none;\">	  <a href=\"https://twitter.com/VOTRE_PAGE\" style=\"background:none;\" target=\"_blank\">   <img onmouseover="this.src='/images/tw2.png';" onmouseout="this.src='/images/tw1.png';" src="/images/tw1.png" alt="" width="100" height="91" /></p>

</a>  </div>
<div style=\"width:100px; height:91px; display:block; position:fixed; left:0px; top:400px; background:none;\">	  <a href=\"/contactez-nous" style=\"background:none;\">   <img onmouseover="this.src='/images/co2.png';" onmouseout="this.src='/images/co1.png';" src="/images/co1.png" alt="" width="100" height="91" /></p>
</a>  </div>

<div style=\"width:100px; height:91px; display:block; position:fixed; left:0px; top:500px; background:none;\">	  <a href=\"http://www.colissimo.fr/portail_colissimo/suivre.do?language=fr_FR" style=\"background:none;\" target=\"_blank\">   <img onmouseover="this.src='/images/col2.png';" onmouseout="this.src='/images/col1.png';" src="/images/col1.png" alt="" width="100" height="91" /></p>
</a>  </div>

 

NB: Je tiens à préciser que je n'ai pas dévéloppé moi-même le module HTMLbox, mais seulement le code d'intégration.

En espérant que cela vous soit utile. Cordialement

 

ecran.jpg

htmlbox-v1-3.zip

images.zip

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

zangbeto

Posted
  • Author
Posted (edited)

Salut merci pour ce module sympa, cependant je ne sais pas dans quel dossier mettre les images ?

Tu as 2 possibilités,

1- tu glisses le dossier "images" téléchargé, directement dans le répertoire principal (le même répertoire où se trouve ton dossier admin)

 

2- Dans le cas où tu as déjà au préalable un dossier nommé "images" dans ton répertoire principal, tu glisses les images directement dans ce dossier. En espérant avoir répondu clairement à ta question

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

zangbeto

Posted
  • Author
Posted

Parfait merci pour ta réponse c'est super.

 

ps: dans le dossier images il manque le col1 mais je les refait pour mon site .

Guillaume je viens d'ajouter l'image col1 dans le dossier "images.zip" effectivement j'avais oublié de la mettre. Je comprends mieux la question de hostingames

Link to comment
Share on other sites
zangbeto Newbie

zangbeto

Posted
  • Author
Posted (edited)

Salut à tous,

 

Merci @zangbeto pour ce partage, c'est sympas et ça marche bien ^^ ! Comment faire pour afficher les boutons à droite du site ?

 

Merci

Ca fait plaisir de lire des encouragements. Pour déplacer le positionnement des onglets vers la droite, il suffit juste de remplacer tous les "left" coloré en rouge ci-dessous en "right" -> et si tu veux juste déplacer un seul onglet sur la droite, tu fais uniquement le changement sur la ligne de code concernant l'onglet que tu souhaites déplacer. En espérant avoir bien répondu à ta question.

 

PS: Il faudra penser à modifier l'apparence des onglets (images col1 etc...) sinon vous aurez des images a l'envers. Par contre si je constate que mon post a un peu plus de succes niveau commentaire...je vous mettrai les images adaptables au coté droit.. Lol..

post-85195-0-34122900-1366514079_thumb.jpg

Edited by zangbeto (see edit history)
  • Like 1
Link to comment
Share on other sites
Fehmi135 Newbie

Fehmi135

Posted
Posted

Ca fait plaisir de lire des encouragements. Pour déplacer le positionnement des onglets vers la droite, il suffit juste de remplacer tous les "left" coloré en rouge ci-dessous en "right" -> et si tu veux juste déplacer un seul onglet sur la droite, tu fais uniquement le changement sur la ligne de code concernant l'onglet que tu souhaites déplacer. En espérant avoir bien répondu à ta question.

 

PS: Il faudra penser à modifier l'apparence des onglets (images col1 etc...) sinon vous aurez des images a l'envers. Par contre si je constate que mon post a un peu plus de succes niveau commentaire...je vous mettrai les images adaptables au coté droit.. Lol..

 

 

Merci beaucoup ! C'est nickel ! Y'a intérêt qu'il ai du succès lol, on peut modifier les liens, les images etc donc utilisable à souhait !

Link to comment
Share on other sites
Glaber Newbie

Glaber

Posted
Posted (edited)

Bonjour

 

Merci pour ta contribution on peut aussi faire comme sur se site

http://www.littleyou.fr/

 

 

 

<script type="text/javascript">/*<![CDATA[*/jQuery(document).ready(function() {jQuery(".rblikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});/*]]>*/</script><style type="text/css">.rblikebox{background: url("IMAGE URL") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 42px;width: 245px;z-index: 9999999;position:fixed;right:-250px;top:20%;}.rblikebox div{border:none;position:relative;display:block;}.rblikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 999;}.rblikebox span a{color: gray;text-decoration:none;}.rblikebox span a:hover{text-decoration:underline;}</style><div class="rblikebox"><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/VOTRE PAGE&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div>

 

 

 

merci

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

Glaber

Posted
Posted (edited)

voici le code valide cw3

 

<script type="text/javascript">
/*<![CDATA[*/jQuery(document).ready(function() {jQuery(".rblikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});/*]]>*/
</script>
<div class="rblikebox">
<object style="border: medium none; overflow: hidden; width: 250px; height: 270px; background:#fff;"  data="http://www.facebook.com/plugins/likebox.php?id=BeExcessive&width=250&height=270&connections=10&header=false"></object>
</div>

 

et le css

 

.rblikebox{
background: url("../img/fb.png") no-repeat scroll left center;
display: block;
float: right;
height: 270px;
padding: 0 5px 0 29px;
width: 250px;
z-index: 9999999;
position:fixed;
right:-250px;
top:20%;
}
.rblikebox div{
border:none;
position:relative;
display:block;
}
.rblikebox span{
bottom: 12px;
font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;
position: absolute;
right: 7px;
text-align: right;
z-index: 999;
}
.rblikebox span a{
color: gray;
text-decoration:none;
}
.rblikebox span a:hover{text-decoration:underline;}

 

 

le css a mettre dans le global.css et l image a mettre dans le dossier img du theme

 

demo http://www.beexcessive.fr

Edited by Glaber (see edit history)
Link to comment
Share on other sites
Fehmi135 Newbie

Fehmi135

Posted
Posted (edited)

Salut Glaber,

 

Super le partage, merci. Est-ce possible d'en faire autant avec " Contact " avec un emplacement dans lequel on pourrait introduire

- l'email du client

- le message du client

 

Ca serait un moyen plus simple et plus rapide pour le client d'envoyer un email; voici un exemple : (en haut à droite le petit logo message) : http://www.designchemical.com/blog/index.php/category/jquery/

 

Merci d'avance

Edited by Fehmi135 (see edit history)
Link to comment
Share on other sites
  • 4 weeks later...
eightmann Newbie

eightmann

Posted
Posted

Bonjour,

 

Merci pour cette super astuce.

 

Par contre j'ai un petit soucis; je télécharge 'images.rar" ensuite de le décompresse dans "C:\wamp\www\prestashop" mais les images ne s'affichent pas et il n'y a pas l'animation lorsque l'on passe le curseur dessus. Je suis sur Prestashop 1.5.4.1.

 

Merci de votre aide !

Link to comment
Share on other sites
  • 1 month later...
  • 4 months later...
  • 2 months later...
zangbeto Newbie

zangbeto

Posted
  • Author
Posted

Bonjour,

 

Merci pour cette super astuce.

 

Par contre j'ai un petit soucis; je télécharge 'images.rar" ensuite de le décompresse dans "C:\wamp\www\prestashop" mais les images ne s'affichent pas et il n'y a pas l'animation lorsque l'on passe le curseur dessus. Je suis sur Prestashop 1.5.4.1.

 

Merci de votre aide !

 

Bonjour,

 

J'ai installé le module comme ce qui a été dis mais rien apparait, je suis débutant j'aimerais savoir comment faire avec le dossier images ?

 

cordialement.

 

2 solutions s'offrent à vous!

1- Vous glissez-déposez tout simplement tout le dossier "images" dans votre répertoire principale et c'est tout.

2- Dans votre répertoire principale, vous créez un dossier nommé "images" ensuite vous mettez le contenu du dossier "images" que vous avez téléchargé içi.

Link to comment
Share on other sites
  • 2 weeks later...
  • 3 months later...
xgty5 Newbie

xgty5

Posted
Posted

bonjour a tous et merci a zangbeto pour ce module gratuit , ça fait longtemps que j'en cherchai un comme ça. 

 

cependant j'ai un petit souci et j’espère avoir une solution ici, je ne maîtrise  pas le code.

 

 

j'ai les icônes qui s'affichent dans la fenêtre "condition générale des ventes" par dessus le texte lors du processus de commande (je précise que j'ai un thème)

 

je voudrais aussi savoir s'il y a un code à rajouter pour empêcher l'affichage des icônes sur le mobile ( mon thème est responsive)

 

 

merci d'avance pour toute solution

Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...