Module "Partager" et Chatbox

[Emer.inL0ve]

Bonjour,

Je voudrais avoir un module "Partager cette page sur ..." et créer un pop-up pour ma chatbox. Je vous remerci d'avance de votre aide. Bonne fin de journée !

Cordialement,
Emer U.

[zz10]

Bonsoir,

Pour le module "Partagez" :

Code à mettre dans un fichier javascript :

Code:

jQuery(document).ready(function()  {   
   var url = document.URL;
   $("#main-content").append( '<div class="h3">Partagez cette page</div><table cellspacing=0 cellpadding=0 width=100%><tr><td align=right valign=center style="margin-right:20px;"><ul class="sharing-cl" id="text">    <li><a target="_blank" class="sh-mail" href="mailto:?subject=Cette page devrait te plaire.&body='+url+'">email</a></li>    <li><a target="_blank" class="sh-feed" href="http://www.forum-ice-epinal.com/feed">RSS</a></li>    <li><a target="_blank" class="sh-tweet" href="http://twitter.com/home?status=Forums des Dauphins d'Epinal  '+url+'" target="_blank" onclick="javascript:pageTracker._trackPageview ('/outbound/twitter.com');">twitter</a></li>    <li><a target="_blank" class="sh-face" href="http://www.facebook.com/share.php?u='+url+'">facebook</a></li>    <li><a target="_blank" class="sh-su" href="http://www.stumbleupon.com/submit?url='+url+'">stumbleupon</a></li>    <li><a target="_blank" class="sh-digg" href="">digg</a></li> </ul></td><td width="180" align="right" valign=center><fb:like href="'+url+'" layout="button_count" width="45"></fb:like></td></tr></table><br>');

puis le CSS :

Code:

.sharing-cl{
overflow:hidden;
margin:-20px 0 0 0;
padding:0;
list-style:none;
width:530px;
}
.sharing-cl a{
overflow:hidden;
width:75px;
height:20px;
float:left;
margin-right:5px;
text-indent:-200px;
background:url(../share-sprite.png) no-repeat;
}
a.sh-su{background-position:-210px -40px;}
a.sh-feed{background-position:-70px -40px;}
a.sh-tweet{background-position:-140px -40px;}
a.sh-mail{background-position:0 -40px;}
a.sh-digg{background-position:-280px -40px;}
a.sh-face{
margin-right:0;
background-position:-350px -40px;
}
a.sh-mail:hover{background-position:0 1px;}
a.sh-feed:hover{background-position:-70px 1px;}
a.sh-tweet:hover{background-position:-140px 1px;}
a.sh-su:hover{background-position:-210px 1px;}
.sh-digg:hover{background-position:-280px 1px;}
a.sh-face:hover{
background-position:-350px 1px;
}

Il faut que vous hébergiez l' image à nouveau et que vous modifiez leur lien dans le CSS :


Pour la CB latérale : https://forum.forumactif.com/gerer-l-apparence-de-son-forum-f7/chatbox-laterale-t289219.htm?highlight=chatbox+lat%e9rale

[Emer.inL0ve]

Re,

Je n'ai jamais utilisé de CSS et de javascript sur mon forum (Enfin je pense ). Pouvez-vous m'indiquez ou je dois coller ces code ? Pour la Chatbox latérale, je la voudrai plutot en bas a droite et plus petit que sa. Mais je ne sais pas du tout comment modifier votre code fournis. Pour l'apparence de mon forum, je voudrai une bordure comme sur le votre.

Cordialement.

[zz10]

Pour le code javascript :

1- Allez dans PA>module>page HTML
2- Créez une page HTML et collez tout le code javascript
3- enregistrez le fichier
7- Retenez (copiez) le lien du fichier que vous venez de créer
8- Allez dans PA>général>forum>configuration
9 Dans le champ "description du forum", collez ce code en modifiant l'adresse du fichier :

Code:

<script type="text/javascript" src="LIEN_DU_FICHIER"></script>

Pour le code CSS:

A coller dans le PA : PA>Affichage>couleurs>CSS

Pour modifier le lien de l'image :

Dans le code CSS, vous trouverez cette ligne :

Code:

background:url(../share-sprite.png) no-repeat;

Il faut modifier :

Code:

../share-sprite.png

par le lien de l'image.

Pour la CB plus petite :

Dans le code de la CB, modifiez Width (largeur) et Height (hauteur) :

Code:


 style="width: 800px; height: 400px; display: none;"

Pour le cadre de mon forum :

A mettre dans le CSS :

Code:

#wrap
{
border: 5px solid #0b118a;
-moz-border-radius: 20px 20px 20px 20px ;
-webkit-border-radius: 20px 20px 20px 20px ;
border-radius:20px 20px 20px 20px;
-moz-box-shadow: 0px 0px 50px #faebfa;
-webkit-box-shadow:  0px  0px 50px #faebfa;
box-shadow: 0px 0px 50px #faebfa;
}

[Emer.inL0ve]

Re,

Pour la bordure, le code marche niquel ! Par contre les codes CSS pour le module "partagez" je n'ai rien qui s'affiche sur ma page d'acceuil. Vous pouvez aller voir sur mon forum pour regarder.

Merci de votre aide,
Emer U.

[zz10]

Remplacez tout le code javascript par celui-ci :

Code:

jQuery(document).ready(function()  { 
  var url = document.URL;
  jQuery("#main-content").append( '<div class="h3">Partagez cette page</div><table cellspacing=0 cellpadding=0 width=100%><tr><td align=right valign=center style="margin-right:20px;"><ul class="sharing-cl" id="text">    <li><a target="_blank" class="sh-mail" href="mailto:?subject=Cette page devrait te plaire.&body='+url+'">email</a></li>    <li><a target="_blank" class="sh-feed" href="http://www.forum-ice-epinal.com/feed">RSS</a></li>    <li><a target="_blank" class="sh-tweet" href="http://twitter.com/home?status=Ton forum '+url+'" target="_blank" onclick="javascript:pageTracker._trackPageview ('/outbound/twitter.com');">twitter</a></li>    <li><a target="_blank" class="sh-face" href="http://www.facebook.com/share.php?u='+url+'">facebook</a></li>    <li><a target="_blank" class="sh-su" href="http://www.stumbleupon.com/submit?url='+url+'">stumbleupon</a></li>    <li><a target="_blank" class="sh-digg" href="">digg</a></li> </ul></td><td width="180" align="right" valign=center><fb:like href="'+url+'" layout="button_count" width="45"></fb:like></td></tr></table><br>');

[zz10]

Pour le code javascript :

1- Allez dans PA>module>page HTML
2- Créez une page HTML et collez tout le code javascript
3- enregistrez le fichier
7- Retenez (copiez) le lien du fichier que vous venez de créer
8- Allez dans PA>général>forum>configuration
9 Dans le champ "description du forum", collez ce code en modifiant l'adresse du fichier :

Code:

<script type="text/javascript" src="LIEN_DU_FICHIER"></script>

Avez-vous bien respectez les points 8 et 9 ? Il me semble que non. Le code ne semble pas placé au bon endroit...

[Emer.inL0ve]

Spoiler:

Comme ça ?

[zz10]

Re,

Spoiler:

Comme ça ?

Oui

[zz10]

Avez-vous vu que j'ai mis ça plus haut ?

Remplacez tout le code javascript par celui-ci :

Code:

jQuery(document).ready(function()  { 
  var url = document.URL;
  jQuery("#main-content").append( '<div class="h3">Partagez cette page</div><table cellspacing=0 cellpadding=0 width=100%><tr><td align=right valign=center style="margin-right:20px;"><ul class="sharing-cl" id="text">    <li><a target="_blank" class="sh-mail" href="mailto:?subject=Cette page devrait te plaire.&body='+url+'">email</a></li>    <li><a target="_blank" class="sh-feed" href="http://www.forum-ice-epinal.com/feed">RSS</a></li>    <li><a target="_blank" class="sh-tweet" href="http://twitter.com/home?status=Ton forum '+url+'" target="_blank" onclick="javascript:pageTracker._trackPageview ('/outbound/twitter.com');">twitter</a></li>    <li><a target="_blank" class="sh-face" href="http://www.facebook.com/share.php?u='+url+'">facebook</a></li>    <li><a target="_blank" class="sh-su" href="http://www.stumbleupon.com/submit?url='+url+'">stumbleupon</a></li>    <li><a target="_blank" class="sh-digg" href="">digg</a></li> </ul></td><td width="180" align="right" valign=center><fb:like href="'+url+'" layout="button_count" width="45"></fb:like></td></tr></table><br>');

[Emer.inL0ve]

Re,

Oui j'ai très bien vu. Ce code là, je dois le créer en tant que page HTML si j'ai bien compris ? Et ensuite copier le lien de cette page HTML et la coller sur le code précédent, c'est bien ça ? En tout cas c'est ce que j'ai fait.

[zz10]

Non, il suffisait de remplacer le code dans la page HTML créée précedemment

[Emer.inL0ve]

Je vous pris de m'excuser mais je n'ai pas compris . Quelle page HTML créer précédemment ? C'est bien la seule non ? Moi, j'ai créer une page HTML dont le code est :

Code:

jQuery(document).ready(function()  { 
  var url = document.URL;
  jQuery("#main-content").append( '<div class="h3">Partagez cette page</div><table cellspacing=0 cellpadding=0 width=100%><tr><td align=right valign=center style="margin-right:20px;"><ul class="sharing-cl" id="text">    <li><a target="_blank" class="sh-mail" href="mailto:?subject=Cette page devrait te plaire.&body='+url+'">email</a></li>    <li><a target="_blank" class="sh-feed" href="http://www.forum-ice-epinal.com/feed">RSS</a></li>    <li><a target="_blank" class="sh-tweet" href="http://twitter.com/home?status=Ton forum '+url+'" target="_blank" onclick="javascript:pageTracker._trackPageview ('/outbound/twitter.com');">twitter</a></li>    <li><a target="_blank" class="sh-face" href="http://www.facebook.com/share.php?u='+url+'">facebook</a></li>    <li><a target="_blank" class="sh-su" href="http://www.stumbleupon.com/submit?url='+url+'">stumbleupon</a></li>    <li><a target="_blank" class="sh-digg" href="">digg</a></li> </ul></td><td width="180" align="right" valign=center><fb:like href="'+url+'" layout="button_count" width="45"></fb:like></td></tr></table><br>');

Et le code CSS :

Code:

.sharing-cl{
overflow:hidden;
margin:-20px 0 0 0;
padding:0;
list-style:none;
width:530px;
}
.sharing-cl a{
overflow:hidden;
width:75px;
height:20px;
float:left;
margin-right:5px;
text-indent:-200px;
background:url(http://i67.servimg.com/u/f67/15/67/24/47/share-10.png) no-repeat;
}
a.sh-su{background-position:-210px -40px;}
a.sh-feed{background-position:-70px -40px;}
a.sh-tweet{background-position:-140px -40px;}
a.sh-mail{background-position:0 -40px;}
a.sh-digg{background-position:-280px -40px;}
a.sh-face{
margin-right:0;
background-position:-350px -40px;
}
a.sh-mail:hover{background-position:0 1px;}
a.sh-feed:hover{background-position:-70px 1px;}
a.sh-tweet:hover{background-position:-140px 1px;}
a.sh-su:hover{background-position:-210px 1px;}
.sh-digg:hover{background-position:-280px 1px;}
a.sh-face:hover{
background-position:-350px 1px;
}

... ?

[zz10]

Il y a une erreur dans le code javascript. remplacez le à nouveau par celui-ci :

Code:

jQuery(document).ready(function()  { var url=document.URL;jQuery("#main-content").append( '<div class="h3">Partagez cette page</div><table cellspacing=0 cellpadding=0 width=100%><tr><td align=right valign=center style="margin-right:20px;"><ul class="sharing-cl" id="text">    <li><a target="_blank" class="sh-mail" href="mailto:?subject=Cette page devrait te plaire.&body='+url+'">email</a></li>    <li><a target="_blank" class="sh-feed" href="http://www.forum-ice-epinal.com/feed">RSS</a></li>    <li><a target="_blank" class="sh-tweet" href="http://twitter.com/home?status=Ton forum '+url+'" target="_blank" onclick="javascript:pageTracker._trackPageview ('/outbound/twitter.com');">twitter</a></li>    <li><a target="_blank" class="sh-face" href="http://www.facebook.com/share.php?u='+url+'">facebook</a></li>    <li><a target="_blank" class="sh-su" href="http://www.stumbleupon.com/submit?url='+url+'">stumbleupon</a></li>    <li><a target="_blank" class="sh-digg" href="">digg</a></li> </ul></td><td width="180" align="right" valign=center><fb:like href="'+url+'" layout="button_count" width="45"></fb:like></td></tr></table><br>');});

[zz10]

Si ça ne fonctionne toujours pas, on fera différemment.

[Emer.inL0ve]

D'accord ... Non toujours pas !

[Emer.inL0ve]

Que dois-je faire maintenant ?

[zz10]

Ok, bon on va faire comme ça.

1- Allez sur Archives host https://www.archive-host.com/
2- Créez vous un compte
3- Ouvrez le bloc note de votre ordinateur, collez y tout le code javascript (le dernier en date)
4- Enregistrez le fichier avec ce nom : "partagez.js"
5- Hébergez le fichier sur archive host
6- Retenez le lien du fichier puis remplacez le dans PA->Général>Forum>configuration>description

[Emer.inL0ve]

Je l'ai hébérger en tant que "partagez.js" mais après l'hébérgement il s'est mis automatiquement en "partagezjs.txt" Est-ce grave ?

[zz10]

Oui c'est grave !

Au moment de l'héberger, on ne vous propose pas de choisir le format ? Javascript, js...

Hébergez le en essayant de mettre le bon format

[zz10]

Je viens d'essayer, je n'ai pas le problème...

[zz10]

En cliquant sur le fichier dans archives Host, vous pouvez renommer le fichier

[zz10]

Je viens de comprendre d'ou viens le rpoblème !

Au moment d'enregistrer le fichier avec le bloc note, il faut mettre comme type de fichier : "Tous les fichiers"

[Emer.inL0ve]

J'ai réussi de la mettre en "partagez.js" mais ça ne marche toujours pas . J'ai surement fais une erreur quelque part, non ? Vous pouvez à nouveau vérifier sur mon forum .

[zz10]

J'ai vu et vous avez tout bien fait.

le problème semble venir du code jaavscript et ça me gonfle !

Je regarde

[zz10]

J'ai compris !!!

Code:

jQuery(document).ready(function()  {
   var url=document.URL;
   jQuery("#main-content").append( '<div class="h3">Partagez cette page</div><table cellspacing=0 cellpadding=0 width=100%><tr><td align=right valign=center style="margin-right:20px;"><ul class="sharing-cl" id="text">    <li><a target="_blank" class="sh-mail" href="mailto:?subject=Cette page devrait te plaire.&body='+url+'">email</a></li>    <li><a target="_blank" class="sh-feed" href="http://www.forum-ice-epinal.com/feed">RSS</a></li>    <li><a target="_blank" class="sh-tweet" href="http://twitter.com/home?status=Ton forum '+url+'" target="_blank" onclick="javascript:pageTracker._trackPageview ('/outbound/twitter.com');">twitter</a></li>    <li><a target="_blank" class="sh-face" href="http://www.facebook.com/share.php?u='+url+'">facebook</a></li>    <li><a target="_blank" class="sh-su" href="http://www.stumbleupon.com/submit?url='+url+'">stumbleupon</a></li>    <li><a target="_blank" class="sh-digg" href="">digg</a></li> </ul></td><td width="180" align="right" valign=center><fb:like href="'+url+'" layout="button_count" width="45"></fb:like></td></tr></table><br>');
});

Cherchez ce morceau de code :

Code:

'/outbound/twitter.com'

et mettez y des backslah avant et après \ . ( ATL-GR+8 )

Je ne sais aps pourquoi mais quand je met le code ici, les \ disparaissent !

[Emer.inL0ve]

Toujours pas ..

[zz10]

Je viens de regarder :

Vous n'avez pas mis les backslash.

On y est presque, encore un effort

[Emer.inL0ve]

Code:

('\outbound\twitter.com')

J'ai mis ça, c'est bon comme ça ? Mais ça ne marche toujours pas

[zz10]

Non pas comme ça, il faut que vous encadriez le code de backslash comme ceci

Code:

\ '/outbound/twitter.com\ '

Attention à enlever les espaces entre \ et ' dans le code si dessus.