Index du Forum » » Questions fréquentes

Auteur

Ajouter la fonction Facebook, Twitter et Google+
fouineur
253     

  Posté : 04-07-2013 21:13

Ajouter la fonction J'aime Facebook Twitter ou Google+

Installation simple :

1. Pour commencer voici les liens de configuration :
--------------------------------------------------------------------

Facebook : <a href="https://developers.facebook.com/docs/reference/plugins/like/" target="_blank" class="noir">https://developers.facebook.com/docs/reference/plugins/like/</a>
Twitter : <a href="https://twitter.com/about/resources/buttons" target="_blank" class="noir">https://twitter.com/about/resources/buttons</a>
Google+ : <a href="https://developers.google.com/+/web/+1button/?hl=fr" target="_blank" class="noir">https://developers.google.com/+/web/+1button/?hl=fr</a>


1.1 Pour Facebook Twitter et Google+ :
--------------------------------------

- Aller dans l'administration de votre site "admin.php"
- Cliquez sur "Editer les fichiers de configuration"
- Cliquez sur "header_head"
- Raccourci : www.votre-site/admin.php?op=ConfigFiles_load&files=header_head


1.1.2 Pour Facebook :
---------------------
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

1.1.3 Pour Twitter :
--------------------
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>


1.1.4 Pour Google+ :
--------------------
<script type="text/!!javascript!!">
window.___gcfg = {lang: 'fr'};
(function() {
var po = document.createElement('script'); po.type = 'text/!!javascript!!'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>


*****************************************************************
Attention:
On colle le(s) script(s) du haut juste après :
<?PHP
blablabla
?>
Sauvegarder
*****************************************************************

============================================================================= =
============================================================================= =


2. Maintenant faire appel :
---------------------------

2.1 Pour Facebook :
-------------------
<div class="fb-like" data-href="http://votre-site.fr" data-send="true" data-width="450" data-show-faces="true"></div>

2.2 Pour Twitter :
------------------
<td width="10%"><a class="twitter-share-button" href="https://twitter.com/share" data-lang="fr" data-via="Fouineur216" data-url="http://votre-site.fr">Tweeter</a></td>

2.3 Pour Google+ :
------------------
<div class="g-plusone" data-size="medium" data-href="http://votre-site.fr"> </div>

_____________________________________________________________________________

Exemple pour un article :
-------------------------
Conseil : créer un tableau avec 0 bordure :
-------------------------------------------

<table style="width: 30%;" border="0">
<tbody>
<tr>
<td width="10%">
<div class="g-plusone" data-size="medium" data-href="http://votre-site.fr/article.php?sid=206"> </div>
</td>
<td width="10%">
<div class="fb-like" data-href="http://votre-site.fr/article.php?sid=206" data-show-faces="true" data-width="450" data-send="false" data-layout="button_count"> </div>
</td>
<td width="10%"><a class="twitter-share-button" href="https://twitter.com/share" data-lang="fr" data-via="Votre speudo" data-url="http://votre-site.fr/article.php?sid=206">Tweeter</a></td>
</tr>
</tbody>
</table>

============================================================================= =
============================================================================= =
Rien ne vous empêche d'ajouter les autres options proposé par Facebook, Twitter et Google+.

Seulement la deuxième partie sera différente
============================================================================= =
============================================================================= =

Exemple pour Twitter :
----------------------

On a vue le bouton "partager" :
-----------------------------
<td width="10%"><a class="twitter-share-button" href="https://twitter.com/share" data-lang="fr" data-via="Votre speudo" data-url="http://votre-site.fr">Tweeter</a></td>

Bouton "Suivre" :
-----------------
<a href="https://twitter.com/votrespeudo" class="twitter-follow-button" data-show-count="false" data-lang="fr">Suivre @votrespeudo</a>

Bouton "Hashtag" :
------------------
<a href="https://twitter.com/intent/tweet?button_hashtag=HistoiresTwitter" class="twitter-hashtag-button" data-lang="fr">Tweet #HistoiresTwitter</a>

Bouton "Mentionner" :
---------------------
<a href="https://twitter.com/intent/tweet?screen_name=assistance" class="twitter-mention-button" data-lang="fr">Tweet to @assistance</a>



PS : N'oubliez pas d'aller modifier vos information "Site, speudo, etc.." sur le site officiel donner au début de la doc



Cet article provient de NPDS

http://www.npds.org/viewtopic.php?topic=25880&forum=28