Putting a "Share This" button in a blog post

Social networking icons and buttons have become a common feature in blogs. This in turn makes it easier to promote blog posts organically, improve SEO (search engine optimisation) and generally make your blog a more friendly place for regular readers. There are a number of different social networking icons which can be added to a page. Some authors prefer to use their own custom icons, whereas other prefer to use a widget or module. This post will focus on a ready-made module of buttons, but the same procedure can be applied to custom buttons as well.

Step 1

Go to http://www.addthis.com. Under the setup options, ensure website is selected, choose a button style, leave analytics unticked and then click the large "Get Your Button" code. The button code comprises of three lines of HTML code. The first and last lines are simply comments. The middle line creates a link which contains a small image and javascript code to perform the required bookmarking action. If you want to, you can also signup and get a button script which has the addition of analytics support. This later option is very useful if you want to track activity on your blog and get a rough idea of who is bookmarking or sharing your articles.

Step 2

In RapidWeaver, open your blog page and paste the code into a blog article. For the sake of keeping things simple for end users, it is probably advisable that the code goes into the blog entry body, rather than an entry summary. This way users will only be bookmarking individual articles, instead of an entire blog summary page. Having too many buttons on the same page may be confusing, and ultimately makes your page look cluttered.

Step 3

Highlight the code in RapidWeaver and go to Format > Ignore Formatting within the menu. In preview mode, this will highlight the code pink and ensures that any styling in the code such as line breaks are hidden. This step will help keep your content looking uniformed and well presented within a page.

Step 4

When your site is exported locally and previewed, the button should now be functioning correctly. However, there are a few cosmetic improvements which can be made to change the position of the share button and prevent it taking up an entire line. Buttons like the "Share This" button have selector names, so it is possible to use custom CSS code to change styling.

Step 5

To prevent the button taking up an entire line, enter this custom CSS code below. This changes the default width from 100% (a block element) to a constrained fixed width:

.addthis_button {
width: 130px;
}

The exact width setting you use depends on the button size you are using. Utilities such as Pixelstick can be used to measure elements on a screen.

Step 6

A common place for social networking buttons within a blog is the space to the right of an entry title and date. The following code will work in some RapidWeaver themes, but not others.

.addthis_button {
width: 130px;
position: absolute;
top: 0px;
right: 0px;
}

In order for absolute positioning of an element to work, the element must be inside a container with a relative position. Themes which have a .blog_entry container with a relative position set via CSS will work fine. If your theme does not have this style applied, you can apply it yourself using this custom CSS code:

.blog-entry {
position: relative;
}

The end result

A "Share This" button in a blog page of the Wilderness RapidWeaver theme.

Other information

This tutorial just covers a single type of bookmarking service. Roughly the same procedure should be followed when incorporating other types of buttons within a blog post. The exact CSS code required varies depending on the button size and theme you are using. Absolute positioning enables you to float a button anywhere in the blog content area, but does rely on the outer .blog-entry container having a relative position applied. The custom CSS code can either go in the custom CSS box under the page inspector, or it can be pasted into a styles.css or custom.css file (depending on the theme you're using). The steps outlined above are applicable to the Blog page plugin supplied with RapidWeaver and the RapidBlog plugin by Loghound Software. Both plugins share the same CSS code and many container names.