Skip to main content

How to centre-align the sharing-icons from AddThis in Blogger

This article shows how to get and then centre-align the row of sharing items that you can get from AddThis (and it's likely that a similar technique applies to sharing buttons from other services like ShareThis, too).



If you think that Blogger's own social sharing buttons a just a bit too small and difficult position, then you may decide to use a service like AddThis to generate buttons that are more elegant all round.

Signing up with AddThis is easy: just log in to your Blogger account, and in a separate tab open up AddThis.com. Choose Create Account, and then Continue with Google. This links your Google account and your AddThis account, and is the easiest approach - but there are other options too, like creating your account with your Facebook or Twitter accounts, or even just signing up the old fashioned way with your email address.

Once you have signed up and chosen a plan (personally I just the free "Basic" plan), you need to actually install the AddThis buttons on your site. To do this:
  • Select one or more sets of sharing buttons (from the options available to your account type),
  • Choose the settings which apply to that set of buttons
  • Choose Activate (button in the bottom right corner of the setting screen), and
  • Install the code that AddThis gave you into your blog.

Installing the code that AddThis gave you is pretty much like installing any other piece of code.   Typically the code you have to install has two parts:

For the piece that says:
Step 1: Add the following code to the <body> of your website.
Search for "<body"  (note:  no closing angle-bracket because some templates have extra instructions in there), and then put the code from AddThis after the angle bracket that goes with the <body


For the piece that says:
Step 2: Paste this code into whichever page you would like this tool to show up.
Find the location in your template that you would like the gadget (eg an HTM gadget, or inside the post statement itself - read more about the options), and copy and paste the relevant code from AddThis.




But it's not in the right place.

If you install the code as is from AddThis, you will find that the row of sharing buttons is pretty tightly linked up with the rest of the page, and left-aligned.   Fortunately this is easy to change.


How to centre (or right align) rows of buttons from AddThis 

To put the set of sharing buttons from AddThis at the middle of the page, you need to surround the 2nd piece of code from AddThis with another Div statement, like the one in bold below:
<div style = 'width:100%; text-align: center; margin-bottom:3em; margin-top:2em;'><!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_sharing_toolbox"></div>
</div>
The exact details to use depend on how exactly you want to set up your sharing-bar form AddThis.  I wanted it to be centre-aligned on one of my sites, with some extra white space above and below, so I used these commands:

  • width:100%  -  says to use all of the page-width in deciding where to put the sharing bar  (by detfault, it would just use the width of the sharing bar itself
  • text-align: centre   -   means that he bar will be put in the middle
  • margin-bottom and margin-top   put some extra space above and below the gadget, so it sticks out more-so.


But you may use a different approach, depending on what your blog is trying to achieve.

What your readers see

Visitors using a web-browsers

Will see your AddThis buttons, as you defined them

Readers who subscribe to your blog's RSS feed

Will not see your blog's AddThis sharing buttons, unless they happen to click through from their feed-reader to your blog.

Readers who follow-by-email 

Will not see your standard social sharing buttons at all, unless they visit your site.   (AddThis does have some email newsletter buttons, but these don't automatically go into emails generated from Blogger).


Is it worth it?

For what it's worth, I recently made the change from custom sharing buttons that I'd made myself to classier looking ones from AddThis, and saw quite a jump (50% or more) in the number of social shares, across all my sites.

YMMY, of course.


Related Articles

Installing 3rd party code into Blogger

Using Div statements to control layout
Labels:

Comments

Post a Comment

Share or Leave Your Comment

Popular posts from this blog

Putting files into Blogger's root directory

This article explains the issues, and options, for putting a file into the "root directory" of your Blogger blog. Turnips (Brassica rapa)  from Wikimedia commons Originally posted to Flickr   by thebittenword.com.   Licensed under the terms of  the cc-by-2.0. If you are using certain non-Google products to enhance your Blog, they will sometimes tell you to put a file into your root-directory .   They may even tell you to use an FTP  tool to do this. Sometimes this happens when a product also gives you code to install into your blog  , This approach is used when the code is written for websites in general rather than specifically to work with Blogger: putting useful files into a place relative to the root directory makes it a lot easier to move a website from a test-address to the live one, so is a common approach outside of Blogger. Or maybe the other tool has been designed to verify that you do own the website in this way, rather than asking...
Post a Comment
Read more

How to change or remove the Newer Post and Older Posts links

This article explains how to hide or change the format of the "Older Posts" and "Newer Post" and "Home" links that are shown at the b ottom of Blogger blogs with Layout or Designer templates. Why are the older and newer posts links used Most designer and layout templates have links at the bottom of your page of blog posts which let readers navigate back and forward among the list of posts. This is basic to how a blog is intended to work:  you post regularly, and give people a way to get back to previous posts. The pager-links are particularly important on pages that are reached using the Label or Archive gadgets, which may show more posts than you normally have on your home page, or displaying in your blog. But some people want to remove them - and this is fine provided readers have other ways of navigating around the blog. How to remove "Newer Posts" and "Older Posts" from your blog To totally remove these items, you just add some new...
Post a Comment
Read more

How to share pictures from Google Photos, using shareable-links

This article describes how to get a link to one ore more photos from your Google Photos collection, using the Shareable Link controls.   It also explains how to delete shareable links that you have made in the past Google Photos is a tool for managing picture collections. It replaces Google+ Photos, and works alongside Picasa-web-albums.   You can read more about it here . Shareable Links are a new type of linking introduced in Google Photos, which let you easily share one or more pictures at the same time.   You can email them, or use them in tools like Facebook. When someone opens a shareable link, they see a display with the date, the name and picture of the person who is logged in to Google at the time, and all the pictures that are included in the same shareable link. If you want to use an image from Google Photos in a tool which cannot use shareable links, you need to find the URL for the photo, instead. How to get the shareable link for one photo in Google Pho...
Post a Comment
Read more