Javascript et Share Twitter

Version imprimable

06/12/2013, 14h40
thais781

2 pièce(s) jointe(s)

Javascript et Share Twitter

Bonjour,

Je n'ai pas de soucis pour ajouter un bouton share Twitter dans un fichier html, mais quid pour l'ajouter via une fonction JS.

Je m'explique si on execute les fichiers ci-joint :
- Test 1 : le bouton twitter s'affiche bien dans le haut de page (ca c'est Ok)
- Test 2 : On clique sur Affiche xx et un texte s'affiche dans la partie droite via une fonction JS et je voudrais avoir le bouton twitter a cet endroit (cf. le test dans Afficher Texte 1), on a que du texte et pas le bouton ..... :cry:

Merci pour votre aide si vous avez ne soluce ...:D

Thais

Un truc dans le genre avec jQuery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
	</head>
	<body>		
							  
    <table id="myTable" style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="2">
     <tbody>
      <tr>
       <td style="vertical-align: top; width: 40%;">
		  <a class="link" id="text1" href="" data-text="Affiche Texte1">Texte 1</a><br>
		  <a class="link" id="text2" href="" data-text="Affiche Texte2">Texte 2</a><br>
		  <a class="link" id="text3" href="" data-text="Affiche Texte3">Texte 3</a><br>
       </td>
        <td style="vertical-align: top; width: 60%;" id="tableau"> 
		<span id="spanTwitter" style="display:none">
			<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.google.fr" data-text="BONJOUR" data-related="twitter,twitfond" data-count="horizontal" data-lang="fr">Tweeter</a>
		</span>
		<span id="spanText"></span>
        </td>
      </tr>
     </tbody>
    </table>
	
	</body>	
</html>

<script type="text/javascript">

	$(document).on('ready', function() {

		$('#myTable').on('click','a.link', function (event) {		
			var text = $(this).data('text');
			$('#tableau #spanText').html(text);
			$('#tableau #spanTwitter').show();
			event.preventDefault();
			return false;
		});

		var autoClickLink = function () {		
			var lnk = window.location.hash.replace('#','');
			if (lnk === "")
				return;
			var element = $('#'+lnk);
			if (element.length > 0)
				element.trigger('click');
		};
		
		$(window).on('hashchange', autoClickLink);
		autoClickLink();
	});
	
</script>

06/12/2013, 16h12
thais781

Bonjour,

Merci pour ton aide.
Le soucis est que je dois avoir un bouton/share Twitter différent pour chaque "Affiche Texte X", par exemple google pour le 1, developpez.net pour le 2 etc ....

Une idée ?

Thais

Bon, j'ai utilisé ta méthode et j'aie peut être une soluce, mais je n'arrive pas a le regler ....

Code Html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
 <head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
  <script type="text/javascript" src="Scripts.js"></script>
 </head>
 
 <body>
 
 
    <table style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="2">
     <tbody>
      <tr>
       <td style="vertical-align: top; width: 40%;">
		  <a href="" onclick="javascript:afficheTexte1(); return false;" >Texte 1</a><br>
		  <a href="" onclick="javascript:afficheTexte2(); return false;" >Texte 2</a><br>
		  <a href="" onclick="javascript:afficheTexte3(); return false;" >Texte 3</a><br>
       </td>
        <td style="vertical-align: top; width: 60%;" id="tableau"><br>
 
			<span id="TwitterSpan" style="display:none">
				<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.google.fr" data-text="BONJOUR" data-related="twitter,twitfond" data-count="horizontal" data-lang="fr">Tweeter</a>
			</span>
 
        </td>
      </tr>
     </tbody>
    </table>
 </body>
</html>

et le script JS :

Code:

1
2
3
4
5
function afficheTexte1()
{
	document.getElementById('TwitterSpan').style.display = '';
	document.getElementById('tableau').innerHTML = "Affiche   Texte1"; 
}

Uniquement le display marche a peut pres mais pas avec le texte ...;

Thais

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
	</head>
	<body>		
 
    <table id="myTable" style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="2">
     <tbody>
      <tr>
       <td style="vertical-align: top; width: 40%;">
		  <a class="link" id="text1" href="" data-text="Affiche Texte1">Texte 1</a><br>
		  <a class="link" id="text2" href="" data-text="Affiche Texte2">Texte 2</a><br>
		  <a class="link" id="text3" href="" data-text="Affiche Texte3">Texte 3</a><br>
       </td>
        <td style="vertical-align: top; width: 60%;" id="tableau"> 
		<span class="spanTwitter" data-LinkedTo="text1" style="display:none">
			<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.google.fr" data-text="BONJOUR" data-related="twitter,twitfond" data-count="horizontal" data-lang="fr">Tweeter</a>
		</span>
		<span class="spanTwitter" data-LinkedTo="text2" style="display:none">
			<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.developpez.com" data-text="BONJOUR" data-related="twitter,twitfond" data-count="horizontal" data-lang="fr">Tweeter</a>
		</span>
		<span class="spanTwitter" data-LinkedTo="text3" style="display:none">
			<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://localhost" data-text="BONJOUR" data-related="twitter,twitfond" data-count="horizontal" data-lang="fr">Tweeter</a>
		</span>
		<span id="spanText"></span>
        </td>
      </tr>
     </tbody>
    </table>
 
	</body>	
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script type="text/javascript">
 
	$(document).on('ready', function() {
 
		$('#myTable').on('click','a.link', function (event) {		
			var text = $(this).data('text');
			$('#tableau #spanText').html(text);
			$('#tableau span.spanTwitter').hide();
			$('#tableau span.spanTwitter[data-LinkedTo=' + $(this).attr('id') + ']').show();
			event.preventDefault();
			return false;
		});
 
		var autoClickLink = function () {		
			var lnk = window.location.hash.replace('#','');
			if (lnk === "")
				return;
			var element = $('#'+lnk);
			if (element.length > 0)
				element.trigger('click');
		};
 
		$(window).on('hashchange', autoClickLink);
		autoClickLink();
	});
 
</script>

Faut que tu lises un peu des bouquins ou que tu fasses des tutos car tu n'as pas l'air très au point :)

Ouiah, tu as raison je suis une boulette en JS, je vais aller m'acheter un bouquin à la FNAC ce week-end .... :oops:

Dernière petite question comme tu as l'air de maitriser.

Est ce que l'on peut passer l'execution d'une fonction pour récupérer le text à afficher dans la partie droite en paramètre ?

du sytle :

Code:

<a class="link" id="text1" href="" data-text='afficheTexte1()'>Texte 1</a><br>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 $(document).on('ready', function() { $('#myTable').on('click','a.link', function (event) { var text = $(this).data('text') ---------> on execute la fonction récupérer ..... $('#tableau #spanText').html(text); $('#tableau span.spanTwitter').hide(); $('#tableau span.spanTwitter[data-LinkedTo=' + $(this).attr('id') + ']').show(); event.preventDefault(); return false; }); var autoClickLink = function () { var lnk = window.location.hash.replace('#',''); if (lnk === "") return; var element = $('#'+lnk); if (element.length > 0) element.trigger('click'); }; $(window).on('hashchange', autoClickLink); autoClickLink(); }); function afficheTexte1() { return "Salut Ppuzin"; }
Le texte étant un peu gros, c'est mieux de le passer en param.

Merci encore pour ton aide.

Thais

09/12/2013, 15h34
npuzin

Tu peux en ajoutant eval :

Code:

var text = eval($(this).data('text'));

Mais c'est pas top, pour au moins 2 raisons :

- le texte devrait être dans le html et non dans le javascript
- les best practices javascript déconseillent de mettre du javascript au milieu de ton html

Pour faire correctement, tu devrais mettre ton texte dans une span cachée, et le recopier ou tu veux au moment du clic sur le lien

Bon courage