Share Weblog Posts Inwards Social Media Using Addthis

AddThis is the close consummate social sharing service allowing yous to portion your posts inward to a greater extent than than 270 unlike social networks. If yous desire to hold out the AddThis widget as well as larn the AddThis sharing buttons, this tutorial volition demonstrate yous how to register as well as add together this characteristic on your blog. Plus, yous volition larn to know exactly about of the customization options of these buttons. So let's larn started!

Getting the AddThis portion buttons code

Step 1. Visit the https://www.addthis.com/get/sharing page.

Step 2. To larn the sharing buttons as well as to access the AddThis sharing stats to notice out how many people shared your post service yesteryear using the AddThis feature, click on the "Create account" button.

The site volition inquire yous to brand a modest registration. Fill out the information to register. It's quick, unproblematic as well as it's free. To complete the registration, click on the Register button.

Step 3. After you've been logged in, correct below the "Get sharing buttons for", pick out the "A website" option.

Step 4. In the "Select style" section, pick out the buttons agency that yous intend would await the best on your site/blog. Please banking concern complaint that on the correct side yous tin laissez passer the sack come across a preview of these buttons.

Step 5. After yous convey chosen the style, the site volition render a code - click on the "Grab it" push to re-create it.

The code provided volition await similar this:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-XXXXXXXXXXX"></script>
<!-- AddThis Button END -->

Now that yous convey selected as well as fix your AddThis sharing buttons, let's add together them inward the footer of the posts.

Adding the AddThis sharing buttons on Blogger

Step 1. Access your Blogger Dashboard as well as larn to "Template", as well as hence click on the "Edit HTML" push on the correct side:

Step 2. Click anywhere within the code surface area as well as press the CTRL + F keys to opened upwards the search box.

Step 3. Type the next occupation within the search box as well as essay to notice the instant occurrence of it - striking Enter:

<div class='post-footer'>

Step 4. Just higher upwards this line, add together the code for the AddThis social sharing buttons.

Note: If yous desire to add together at the starting fourth dimension of your posts, add together the code below the second:

<div class='post-header'>

How to add together to a greater extent than AddThis buttons

To add together to a greater extent than buttons, only pick out the push for that social network as well as add together the code exactly earlier the </div> tag (refer to the stride v from above).

Some examples:

<a class="addthis_button_linkedin"></a> /* linkedin push */
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a> /*gplus push */
<a class="addthis_button_digg"></a> /* digg push */
<a class="addthis_button_stumbleupon"></a> /* stumbleupon push */
<a class="addthis_button_print"></a> /* impress push */

CSS3 AddThis Share Buttons

You tin laissez passer the sack add together exactly a unmarried button, hence that when the reader hovers over it, a carte volition opened upwards amongst the options of social networks to portion the post.

Visit this page for a demo.

Step 1. Go to "Template" > click on the "Edit HTML" push > press the CTRL + F keys as well as search:

<div class='post-footer'>

Just higher upwards this line, glue the next code:

<style type='text/css'>
.addthis_share_btn a, .addthis_share_btn a:visited {
background: #FF5C00; /* background color of the push */
display: inline-block;
padding: 6px 12px;
font-family: arial,helvetica,lucida,verdana,sans-serif;
font-size: 12px;
line-height: 1em;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px enterprise rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
.addthis_share_btn a:hover {
background: #D45500; /* background color on mouse hover */
color: #fff;
}
.addthis_share_btn a:active { top: 1px; }

.addthis_share_btn a span, .addthis_share_btn:visited a bridge {
background: url(http://www.addthis.com/cms-content/images/gallery/icon-addthis.gif) no-repeat left;
padding: 1px 0 1px 18px;
}
</style>
<!-- AddThis Share Button -->
<div class='addthis_toolbox addthis_share_btn'>
<a class='addthis_button_compact' href='http://addthis.com/bookmark.php'>
<span>Share</span></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<!-- End AddThis Share Button -->

Customization

• To alter the color of the push according to the colors of your template, modify the color value inward red.
• If yous desire to alter the "Share" text, supersede the text inward blue.

Step 2. Save the changes yesteryear clicking on the "Save template" push as well as you're done!