Javascript et Share Twitter

**thais781** · 06/12/2013, 14h40

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 .....

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

Thais

**npuzin** · 06/12/2013, 15h46

Un truc dans le genre avec jQuery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**thais781** · 06/12/2013, 16h12

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

**thais781** · 06/12/2013, 16h50

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**npuzin** · 06/12/2013, 16h52

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**thais781** · 06/12/2013, 17h52

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

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**npuzin** · 09/12/2013, 15h34

Tu peux en ajoutant eval :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Javascript et Share Twitter

Twitter

Discussions similaires

Partager

Partager