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.



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.


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.


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.


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.




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.


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;
}





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


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.

Stripe backgrounds and gradient backgrounds have become a popular trait in modern web design. Although there are quite a number of online services for rolling out your own stripe background, using an application like Pixelmator gives you a bit more control over colours and some users may find it easier. Now that Pixelmator supports the export of images to the web, the process is even easier. This tutorial will show you how to create a basic stripe background which can be tiled across a website background.


Step One:
Launch Pixelmator. At the opening window, click to create a new image. In the new image dialogue window (pictured below) set the width and height to 4px. Ensure resolution is at 72 pixels/inch which is the standard for all graphics on the internet. Although it may seem a bit silly to be working from such a tiny canvas size, because this is such a simple graphic, there is no need to work from anything larger.


Step Two:
With the new image canvas open, press option + repeatedly until the canvas cannot scale up in size any larger. You may need to resize the window a bit like below.


Step Three:
In the toolbar, click the foreground colour square. In the colour picker dialogue window, click the crayons tab and choose a dark colour like lead (#191919). Press N (to switch to bucket fill) and apply this colour to your canvas.


Step Four:
In the toolbar, click the foreground colour square. In the colour picker dialogue window, click the crayons tab and choose a slightly lighter shade of colour like tungsten (#333333). Press P (to switch to the pencil tool). Go to View > Show Brushes (if the brushes window is not already open). Click to select the smallest brush size available.


Step Five:
Click and pencil 4 points diagonally across the canvas as shown below. You can either have the stripe running from the top left or bottom left. The choice is yours and will govern the direction stripes run in.


Step Six:
Go to File > Export for Web... from the Pixelmator menu. Set the format as JPEG and put the quality slider right up to 100%. Note that even though the quality is maximum, the image file size is absolutely tiny making it perfect for use on the internet. Save the image with a web safe name such as body_bg.jpg so you have a good idea what this file is after it has been uploaded.


Step Seven:
Use CSS to apply a background to a web page. The standard code is this:

body {
    background-image: url(http://www.example.com/template/images/body_bg.jpg);
}


Obviously you would need to change the URL between the brackets in the above code to point to the place where your background image is stored on your web-server.

If you are building a website using software such as RapidWeaver, this background image can be stored in the theme contents. Most themes normally contain an images folder in the theme contents where all images and icons relating to a theme are stored. Use the following CSS code in RapidWeaver to add your new background image:

body {
    background-image: url(%pathto(/images/body_bg.jpg)%);
}


Whenever the %pathto()%
syntax is used in RapidWeaver, the link to your image will automatically be entered, regardless of theme name or website URL. Whichever code you use to set a background image, the image will automatically tile. This CSS code is supported by all major web browsers.

Advanced tips
This tutorial just covers the absolute basics of creating an attractive stripe background for a webpage. It is completely feasible to use a larger canvas size to generate wider stripes or use a thicker pencil tool. Bare in mind that when using a tool such as Pixelmator, you have complete control over colours. This will enable you to create a stripe background effect which matches an existing theme or colour scheme.

Completed Example
Following the steps outlined in this tutorial, the completed background will look like this when applied to a webpage.

In this example, the stripe background effect was applied to the Composition RapidWeaver theme. These finishing touches may only be minor, but they certainly make a website design look far more 'polished' and professional. The size of the background image used means that the page still continues to render very quickly and the background will tile automatically to fill any resolution of monitor. Note that a similar stripe technique was used in the Pixelmator website, albeit a more subtle stripe colour was chosen.

My thanks to Ed Brenner and the other members of SupportCasts who have kindly put together a free video on using the spacer stack for RapidWeaver. As explained in the video, this is probably the most simple third-party stack available for the Stacks plugin. The purpose of the stack is to insert a whitespace and help divide pages up into blocks of content which are then easier to read. Whitespace is often a bit scary at first -- the concept of empty space within a commercial website may not immediately seem a sensible idea and breaks traditional rules. But as any modern web designer or developer will (should) tell you, whitespace is key in outputting pages which engage the reader and make a website a pleasant place to visit. An excellent article was written here on A List Apart talking about this concept of whitespace. This is also a topic Smashing Magazine regularly visit and make reference to.


This spacer stack was originally developed for a client I had made a bespoke RapidWeaver theme for. The website in question was looking great, with most pages having been setup using the Stacks plugin. But some of the pages were looking a bit sparse at the time of launch, and text was hunched up in the top left corner. Increasing padding around stacks was not really an option because only a maximum of 20px could be applied and this padding got applied to all sides of a stack, which in turn forced elements into a more central position. So in the course of about 5 minutes, I threw together this quick stack which would insert empty boxes into a stacks page. Combined with some columns, the result was excellent. Later I added some settings under the stack inspector. So it is now possible to customise how high this box is, which in turn adjusts the amount of whitespace between two horizontal elements.

It would be safe to say that I now use this stack more than any other stack. I think I have used the spacer stack on just about every stacks page of the ThemeFlood website and used it multiple times where I have inserted whitespace between theme preview images. For such a simple stack, it is very useful and prevents having to tediously give every element in a page selector names and messing around with CSS code etc.

You can watch the full video here: http://supportcasts.com/spacer-stack-free-show/

Since I started uploading a selection of free stacks to the ThemeFlood website, a number of people have been downloading them. Quite a few people have not downloaded new stacks before, so the installation process is confusing a few people. Unlike RapidWeaver themes, plugins and snippets, stacks do not install themselves. Each stack is formed of a standard folder called widget.stack or similar. Once this is downloaded an un-zipped, it must be installed manually into the correct folder in order for stacks to see it and add it to the stacks library.

All stacks should be copied over to ~/Library/Application Support/RapidWeaver/Stacks/ where ~ is the name of your home directory.

Here is a quick video to illustrate this better:

Screen Recording - Computer

I'll admit I'm not much of a social networker! I'm proud to have been one of the first onboard the Twitter train, and indeed I use Twitter as an effective business tool. But as for the whole facebook / myspace malarkey, to be honest this is just kids-play in my eyes and not something I can be bothered with. A client recently asked me to setup a FeedFriend widget in the sidebar of their blog. Friendfeed, unlike feedburner, is not a service I had previously heard of or come across so I had to quickly research this service and signup for an account. It is not very clear from the FriendFeed website what this service is or how it works. But basically FriendFeed is another form of social aggregator. Its purpose is to fetch information from your other social hide-outs such as Twitter, Blogger, Facebook, Tumblr, Delcious, Digg, Flicjr, Last.fm, and YouTube to name a few. When you post information to any of these services, FeedFriend pulls this information into a single consolidated list. This list of postings is sorted into date / time order and other FeedFriend members can subscribe and post comments. As of August 2009, FeedFriend has since been purchased by FaceBook.

Much like many social networking services, FeedFriend provide a widget (what we used to call HTML code) to paste into a website. This fetches your FeedFriend feed to display on a website for all to view. The code loads the FeedFriend content insider a rather gory looking window which has obviously been optimised for Internet Explorer 4. However as this article explains, it is possible to customise the FeedFriend widget so it works more in harmony with your chosen RapidWeaver theme.

Step 1
Log in to your FeedFriend account. Next to the search bar at the top, click on the blue Tools button. Under the tools section, scroll down to the sub heading "share your feed" and click the Embeddable Widgets link. Next you want to click the Feed Widget link which will land you on a page similar to the screen capture below:



Step 2
Choose how many entries are to be displayed. Five is the default value, but more active users may want to display more entries. It is recommended you untick the Logo and Subscribe link options. Ensure the Javascript option is ticked under the format section.

Step 3
Copy and paste the generated code snippet into the sidebar container of your RapidWeaver project or into the main content container. If pasting into a styled text input box, it would be recommended you highlight your code and go to Format > Ignore Formatting in RapidWeaver to clear away miscellaneous line breaks and other formatting.

Step 4
FeedFriend allow you to customise the appearance of your FeedFriend widget further using CSS code. Details of the selector names they use can be found here. This code should be entered into your custom CSS box under the Page Inspector in RapidWeaver. FriendFeed have incorrectly suggested that items such as font sizes should be implemented using point dimensions. This is incorrect and percentage or em values should be specified instead.

Tips:
Once you have confirmed your email address for using FriendFeed, options like the commenting should work. If you have set your FriendFeed to private (so others cannot view it) the widget will not work because access to it will be blocked.

Is it worth it?
The main advantage FriendFeed offers RapidWeaver users is the ability to consolidate many sources of social information into a simple digest with options for other FeedFriend users to comment on your entries. I think most people would probably prefer keeping content from different sources separate and easily distinguishable for readers. But if you are limited to space or unable to use some of the excellent social networking stacks available, then FeedFriend is a promising solution.

PlusKit is one of the most useful RapidWeaver plugins you can get and offers a single plugin with many different functions for improving projects. Probably the most frequently used function in PlusKit is ‘@import’ which gives you the ability to import the content of one page into another without the use of iFrames. Lets say for example you had a Twitter feed created with Stacks, you could use PlusKit to display that Twitter feed on another page such as a Blog or Styled Text page. It is a very useful function to have if you are working with lots of different page styles. Not all pages are compatible with PlusKit due to the way they are setup. But if you can work around this list of non-compatible pages, it is a fairly easy function to setup.


Step 1
With your RapidWeaver project open, go to File > Add Page in the RapidWeaver menu. From the list of plugins you have installed, select PlusKit. If you don’t see PlusKit on the list, you will need to download and install it from the Loghound Software website: Restart RapidWeaver for PlusKit to become available in your list of installed plugins.

Step 2
Rename your PlusKit page from untitled1 to something like PlusKit. Although this is not essential, it may stop you from accidently deleting the PlusKit page from your project. Each individual RapidWeaver project only requires 1 PlusKit page and this should be kept hidden. A hidden page will be dimmed out in the RapidWeaver page list.


Step 3
Switch RapidWeaver into edit mode. On the page you want to import content, enter the following:



This code can either be entered in the main content container of a page or in a sidebar. The choice is yours depending on where you want the content to be shown.

Step 4
Between the double open and close brackets, type the name of the page you wish to import. Page names are case sensitive so a page named Twitter Feed would be entered like this:



Step 5
Switch RapidWeaver into preview mode. The rendered content should then be visible.

Taking things a step further:
Some third-party RapidWeaver themes support the use of Extra Content which allows you to position content outside the normal editable bounds of a RapidWeaver theme or apply specialist styling. It is possible to use the @import function in conjunction with Extra Content. If for instance you had an Extra Content container named 4 which you wanted to put your Twitter feed inside, you would enter the following code in the sidebar:

<div id=”myExtraContent4”>

</div>


And you will find your @import function continues to work fine. Likewise if you are using the Stacks plugin by YourHead software, you will find that entering the @import code in a suitable stack produces the same results. It is this degree of flexibility that makes @import such a useful feature in PlusKit.

I am not going to hide the fact that Stacks (by YourHead Software) is probably my all time favourite RapidWeaver plugin. For those unaware of this plugin, Stacks enables you to quickly and effortlessly build professional looking pages which otherwise would have to be coded by hand using HTML and CSS.

Quite often when you are working with Stacks, as your layout comes together, you find yourself in a position where something doesn't look quite right on a certain page. Rather than delete stacks and remake them on another page, a trick I have adopted is to create a 'clipboard' page to stash my spare stacks in. This keeps them stored safely within the RapidWeaver project until I can find a use for them. You can also use the clipboard to store configured stacks in so they can be quickly copied to other pages. Here I will show you how to set up a clipboard page in your project to store stacks in and copy and paste stacks between pages.


Step 1:
Add a new Stacks page to your RapidWeaver project. Rename this page something like "Stacks Clipboard" or similar. Give it a short and relevant name so you wont accidently delete it.


Step 2:
While on your stacks clipboard page, open the RapidWeaver page inspector and click the general tab. Un-tick the first two options which are "Enabled" and "Show in menu". This will prevent your stacks clipboard being visible and showing in the navigation menu.



Step 3:
Stacks does not have a copy or paste button. But the standard copy and paste keyboard shortcuts in RapidWeaver work fine. In one of your stacks pages, click into edit mode and single-click the stack you want to make a copy of. It should be highlighted with a blue dotted border as shown below. Press the keyboard shortcut CMD and C to copy the stack.



Step 4:
Switch into your stack clipboard (remaining in edit mode) and single-click somewhere on the page. Then press the keyboard shortcut combination CMD and V to paste the stack into the clipboard. The pasted stack is normally rendered at the bottom of the stacks page, but you can click and drag it anywhere else in the page. Note that you can also copy and past stacks between RapidWeaver projects, so if for instance you have two projects open in RapidWeaver, you could copy a stack from one project into the other.

Another quick stacks tip:
Stacks makes use of some rather large inspector windows. On a small screen or when RapidWeaver is close the the screen edge, these inspector windows can be partially obscured by the screen edge. Clicking at the top of your stack inspector window (imagine there was a window title bar there) and dragging the inspector will 'snap' it off the stack and leave it free-floating on your screen. To close the stack inspector again, just click outside the stack inspector to minimise it again.