Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Twitter Discussion :

Javascript et Share Twitter


Sujet :

Twitter

  1. #1
    Membre régulier
    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 .....

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

    Thais

  2. #2
    Membre averti
    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>

  3. #3
    Membre régulier
    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

  4. #4
    Membre régulier
    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

  5. #5
    Membre averti
    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

  6. #6
    Membre régulier
    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

  7. #7
    Membre averti
    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

###raw>template_hook.ano_emploi###