Réseaux Sociaux

Une façon simple pour ajouter les boutons de partage twitter, facebook, google+, etc.. à droite ou à  gauche de votre blog



Pour permettre à vos visiteurs de partager vos articles,  installez les boutons de partage sur votre blog.
Pour ce faire,

1. connectez-vous sur votre panneau d'administration
2. Cliquez sur ajouter un gadget
3. Chercher sur HTML/Javascript
4. Copiez et Coller le code suivant

/*-------MBT Floating Sharing Widget------------*/

#floatdiv {

  position:fixed;

bottom:15%;

margin-left:-850px;

z-index:10;

float:left;

padding-bottom:2px;

}

#mbtsidebar {

        background:#fff;

        border-top:0px solid #ddd;

        border-left:0px solid #ddd;

        border-bottom:0px solid #ddd;

        border-radius:0px;

       -moz-border-radius:0px;

       -webkit-border-radius:0px;

        padding-left:5px;

        width:75px;

        margin:0 0 0 5px;

}

.fb_share_count_top {width:60px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>

<div id="floatdiv">

<div id="mbtsidebar">

    <table cellpadding="0px" cellspacing="0">

    <tr>

    <td style="padding:5px 0px 0px 0;">

<a href="http://twitter.com/share" class="twitter-share-button"

     data-count="vertical" data-via="palabreinfo">Tweet</a>

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

    </td>

    </tr>

    <tr>

    <td>

    <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

    </td>

    </tr>

    <tr>

    <td style=" padding:5px 0px 0px 0px;">

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

<g:plusone size="Tall" expr:href="data:post.url">

    </g:plusone></td>

    </tr>

    <tr>

    <td>

<iframe src="http://www.facebook.com/plugins/like.php?href=http://palabre-infos.blogspot.com/

&amp;layout=box_count

&amp;show_faces=true

&amp;width=60

&amp;action=like

&amp;font=arial

&amp;colorscheme=light

&amp;height=65"

scrolling="no"

frameborder="0"

style="border:none; overflow:hidden; width:60px; height:65px; margin-top:3px;"

allowtransparency="true"></iframe>

    </td>

    </tr>

<tr>

    <td style=" padding:5px 0px 0px 0px;">

<div class="addinto_sharebox addinto_sharebox_default">

       

        <a class="addinto_button_more"></a>

</div>

<script type="text/javascript" src="http://static.addinto.com/ai/ai2_bkmk.js"></script>

</td>

    </tr>

    </table> <div id='mainright'>

5. Remplacer les lignes en rouge par vos comptes twitter et facebook respectivement.

Vous pouvez changer aussi l'emplacement du widget. Dans sa forme actuel, il se place à gauche de votre blog.

Pour changer, modifier margin-left: mettre right

6. Enregistrez puis admirer le résultat.

Partager cette astuce :