mardi 25 février 2014

Share Blog Posts in Social Media using AddThis

In my opinion, AddThis is the most complete social sharing service allowing to share your posts in more than 270 different social networks. I use the AddThis widget, so if you would like to see a live demo, please scroll down to the bottom of this post to see the AddThis sharing buttons.


This tutorial will show you how to register and add this feature on your blog and you will get to know some of the customization options of these buttons. So let's get started!

Getting the AddThis share buttons code

Step 1. Visit the https://www.addthis.com/get/sharing page.
Step 2. To get the sharing buttons and to access the AddThis sharing stats to find out how many people shared your post by using the AddThis feature, click on the "Create account" button.

create addthis account

The site will ask you to make a small registration. Fill out the information to register. It's quick, simple and it's free. To finish the registration, click on the Register button.

register addthis

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

addthis share buttons

Step 4. In the "Select style" section, choose the buttons style that you think would look the best on your site/blog. Please note that on the right side you can see a preview of these buttons.

addthis sharing buttons

Step 5. After you have chosen the style, the site will provide a code - click on the "Grab it" button to copy it.

addthis code

The code provided will look like this:









Now that you have selected and set up your AddThis sharing buttons, let's add them in the footer of the posts.

Adding the AddThis sharing buttons on Blogger

Step 1. Access your Blogger Dashboard and go to Template, then click on the Edit HTML button on the right:

blogger template

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box.

Step 3. Type the following line inside the search box and try to find the second occurrence of it - hit Enter:
Step 4. Just above this line, add the code for the AddThis social sharing buttons.

Note: If you want to add at the beginning of your posts, add the code below the second:

How to add more AddThis buttons

To add more buttons, simply choose the button for that social network and add the code just before the
tag (refer to the step 5 from above).

Some examples:
/* linkedin button */
/*gplus button */
/* digg button */
/* stumbleupon button */
/* print button */

CSS3 AddThis Share Buttons

You can add just a single button, so that when the reader hovers over it, a menu will open with the options of social networks to share the post.

css3 share buttons, addthis

Visit this page for a demo.

Step 1. Go to Template > click on the Edit HTML button > press the CTRL + F keys and search:
Just above this line, paste the following code:



Abonnement Publier les commentaires [Atom]

<< Accueil