• Permettre aux visiteurs de partager votre page avec Twitter, Facebook, Linkedin

    image de l'aticle Permettre aux visiteurs de partager votre page avec Twitter, Facebook, Linkedin

    Il est intéressant pour un blog, site e-commerce de donner la possibilité aux visiteurs de faire connaître vos différentes pages en lui proposant de cliquer sur un lien qui l'invitera à mettre votre page sur son mur Facebook, Twitter ou autre et de lui donner une meilleur visibilité. À chaque fois qu'un internaute cliquera sur ce lien, le compteur sera incrémenté de 1 ce qui permettra aux visiteurs de voir combien de personnes aiment votre page.

    Comment faire cela?

    Cette technique est assez simple à mettre en place sur votre site. Choisissez un emplacement de choix sur vos pages pour que ces images soient bien visiblent. Ensuite à vous de choisir les balises html qui conviennent pour mettre en forme vos liens. Moi j'ai choisi pour cet exemple les balises <ul></ul> et <li></li>.
    Entre les balises <head> et </head> de votre page :

    <style type="text/css">
    UL.button_Social {padding: 2px;float: right; display: inline; margin-right: 40px;  }
    UL.button_Social LI { list-style:none; display: inline; float: right; margin: 0 0 0 10px;}
    </style>
    

    Voici le code pour oscommerce si vous avez installer la contribution easy meta tags :

    <ul class="button_Social">
     <li><a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php echo ((sizeof($_GET) == 0 && basename($PHP_SELF) == 'index.php') ? HTTP_SERVER . DIR_WS_CATALOG : tep_href_link(basename($PHP_SELF), tep_get_all_get_params())); ?>" data-text="<?php echo ((isset($meta_title_tag) && tep_not_null($meta_title_tag)) ? $meta_title_tag : HEADING_TITLE); ?>" data-count="vertical" data-via="TenueSexy" data-related="Woodgate" data-lang="fr">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
     <li style="position:relative;height:61px;width:74px;line-height:61px;vertical-align:bottom;background-image:url('<?php echo DIR_WS_IMAGES.'socialIcons/facebook_share.png'; ?>'); background-position:bottom left; background-repeat:no-repeat; ">
     <div style="position: absolute; bottom:0;"><a name="fb_share" type="box_count" share_url="<?php echo ((sizeof($_GET) == 0 && basename($PHP_SELF) == 'index.php') ? HTTP_SERVER . DIR_WS_CATALOG : tep_href_link(basename($PHP_SELF), tep_get_all_get_params())); ?>" href="http://www.facebook.com/sharer.php">Partager</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div>
     </li>
     <li style="position: relative; top:-3px;"><a title="Publier sur Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-locale="fr" data-url="<?php echo ((sizeof($_GET) == 0 && basename($PHP_SELF) == 'index.php') ? HTTP_SERVER . DIR_WS_CATALOG : tep_href_link(basename($PHP_SELF), tep_get_all_get_params())); ?>"></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script></li>
     <li><fb:like href="<?php echo ((sizeof($_GET) == 0 && basename($PHP_SELF) == 'index.php') ? HTTP_SERVER . DIR_WS_CATALOG : tep_href_link(basename($PHP_SELF), tep_get_all_get_params())); ?>" layout="box_count" show_faces="false" width="108"></fb:like></li>
     <li style="position: relative; top:8px;"><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-url="<?php echo ((sizeof($_GET) == 0 && basename($PHP_SELF) == 'index.php') ? HTTP_SERVER . DIR_WS_CATALOG : tep_href_link(basename($PHP_SELF), tep_get_all_get_params())); ?>" data-counter="top"></script></li>
    </ul>
    


    Pour les autres (si votre code est en dur sur la page) :

    <ul class="button_Social">
     <li><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.webmastertoulouse.com/3-informations-sur-la-creation-de-sites-internet/6-permettre-aux-visiteurs-de-partager-votre-page-avec-twitter-facebook-linkedin-et-google-buzz" data-text="<?php echo ((isset($meta_title_tag) && tep_not_null($meta_title_tag)) ? $meta_title_tag : HEADING_TITLE); ?>" data-count="vertical" data-via="TenueSexy" data-related="Woodgate" data-lang="fr">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
     <li style="position:relative;height:61px;width:74px;background-image:url('images/socialIcons/facebook_share.png'); background-position:bottom left; background-repeat:no-repeat; ">
     <div style="position: absolute; bottom:0;"><a name="fb_share" type="box_count" share_url="http://www.webmastertoulouse.com/3-informations-sur-la-creation-de-sites-internet/6-permettre-aux-visiteurs-de-partager-votre-page-avec-twitter-facebook-linkedin-et-google-buzz" href="http://www.facebook.com/sharer.php">Partager</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div>
     </li>
     <li style="position: relative; top:-3px;"><a title="Publier sur Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-locale="fr" data-url="http://www.webmastertoulouse.com/3-informations-sur-la-creation-de-sites-internet/6-permettre-aux-visiteurs-de-partager-votre-page-avec-twitter-facebook-linkedin-et-google-buzz"></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script></li>
     <li><fb:like href="http://www.webmastertoulouse.com/3-informations-sur-la-creation-de-sites-internet/6-permettre-aux-visiteurs-de-partager-votre-page-avec-twitter-facebook-linkedin-et-google-buzz" layout="box_count" show_faces="false" width="108"></fb:like></li>
     <li style="position: relative; top:8px;"><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-url="http://www.webmastertoulouse.com/3-informations-sur-la-creation-de-sites-internet/6-permettre-aux-visiteurs-de-partager-votre-page-avec-twitter-facebook-linkedin-et-google-buzz" data-counter="top"></script></li>
    </ul>
    

    Sur Facebook nous devons mettre une image de fond par défaut au cas ou il n'y est pas de vote pour votre page sinon, seulement le lien "partager" s'affichera, dans l'exmple l'image est "facebook_share.png".
    Voilà, vous savez maintenant comment vous pouvez attrirer plus de visiteurs sur vos pages en leurs donnant la possibilité de vous ajouter à leurs pages favorites sur leurs comptes facebook, Twitter, Google Buzz et Linkedin.

Laissez un commentaire

* Votre e-mail ne sera jamais utilisé ou donné à un tiers

Recherche

Catégories

Newsletters

Archives