Fancy Footer

×

This post was originally published in 2008
It may contain stale & outdated information. Or it may have grown more awesome with age, like the author.

Updated 19/09/08

Update: Added Trackback/Pingback to prefix snippet.

After being annoyed at the time it took to add my typical blog-post footer (RSS, Email subscription links, Social Bookmark links, JS-Kit comments), it finally dawned on me that I could do all this with one PHP script, have 1/3rd the code at the bottom of each post, and easily change the footer of EVERY BLOG POST AT ONE TIME.

The last thing was the decider, as I recently changed the width of my entire site, and wanted the comments/social bookmarks list to fit nicely with the new width, but didn’t relish the thought of changing the fiddly code I use at the bottom of each post.

So I created a PHP script that is included in the “Prefix” of my blog pages. It consists of one function that is passed a few pieces of information, and spits out a nicely formatted footer section.

This post will explain how to use this script in your site. I have packaged the script + prefix + function call into three snippets, which can be downloaded here: Fancy Footer.

1) Double click on the snippets to install, close and reopen RW. Press ⌘5 to open the snippet window, and find the “PREFIX – RSS, Email, Social Links, Comments + Ratings Inserter” snippet. Double-click on this snippet to go into edit mode.

2) I have labeled each segment clearly, so that you may easily delete those you do not wish to display in your blog. As an example: I do not want the RSS/Email links to display. I press ⌘5 to open the snippet window, and double click on the PREFIX snippet. I search for the line:

//DON'T WANT EMAIL/RSS LINKS? DELETE FROM HERE:"

Then select the lines between it and the line that reads:

//TO HERE!

Then I press delete. The script will no longer output RSS/Email links.

The Social Bookmark links come in two flavours: one with links that behave normally, with the page loading in the current window. The other has links that will open in a Greybox, if Greybox has been set up in your theme. Jan Erik Mostr̦m has written an excellent tutorial explaining how to set a theme up for Greybox. It can be found here: RapidWeaver Рusing Greybox in a theme. If you decide to use the Greybox enabled section, comment the standard section out, and uncomment the Greybox section, as per the instructions within the file.

- – -

If you decide to use the RSS/Email and/or Social Bookmarking Sections:

a) The RSS/Email and Social Bookmarking sections require the images included in the download. These images need to be uploaded to your server. Do this with an FTP program, then open your browser and find the folder you uploaded the images to and copy the URL.

As an example: the images used in my footer are located at: http://pagesofinterest.net/images/, and this is the URL that I would copy for this step.

b) If you closed the snippet window, reopen it and double click on the PREFIX snippet to open it for editing. You will need to replace PATH_TO with the URL you copied in a, above. I find this easier to do within a text editor using Find & Replace. To do this simply select the entire text of the snippet and copy it into a text editor window, then use Find & Replace to replace PATH_TO with the URL you copied. When you’re done, double check the new text. Where an image’s src tag read “src=”PATH_TO/image_name.jpg”", it should now look something like (using the example URL):

"src="http://pagesofinterest.net/images/image_name.jpg"

Now select all of the text and copy it back into the snippet window. Press save.

The Email and RSS section require you to have an RSS feed for your blog, and a “subscribe to this blog via email” page. If you lack one of these, you won’t be able to use this section. Just delete it, as described above.

- – -

3) The JS-Kit section is highly customizable. I have set it up so that there will be a “comment count” line with 5-star user-ratings below. Beneath these will be a “Leave a Comment!” link, under which the comments will be displayed.

Note that any part of the JS-Kit section can be changed. As there are such a large amount of options, I’ve created a list of the parts I think you’d most likely want to play with:

- – -

Ratings Options:

Type:

- The ratings widget may be configured to display in three modes: combo, split and score.

Combo displays one row of 5 stars.

Split displays two rows of 5 stars – the left row represents the total rating, the right the user’s rating.

Score is actually an entirely different method of rating – thumbs up/down.

Once you’ve decided which you would like to use, replace “view=’combo’” with your desired style.

Options:

1
view='split', view='score', view='combo'

starColor='Golden':

- Colour of rating stars. Colour options: Ruby, Red, Golden, Blue, Green, Emerald, Indigo, Violet.

No ratings:

- Delete the following:

1
<div view='split' class='js-kit-rating' title='".$post_title."' permalink='".$post_permalink."' path='".$post_permalink."' starColor='Golden'></div>

Comments:

paginate='10':
- No more than 10 comments will be displayed. If there are more than 10 comments, they will be split into “pages” that are accessible via small links or arrows at the top/bottom of the comments section. If you do not care how many comments are displayed at a time, remove this.

Anything coming after “Label:”:

- Will be displayed as a label. Change this text to whatever you wish.

The line:

1
<div class='js-CreateCommentBg' style='width:100%;border:none;'>

- style='SOME_CSS_STYLE' your desired styling options here. currently set so that the comment area will be as wide as the div it is
nested in.

The line:

1
<div><textarea name='js-CmtText' rows='6' cols='62' style='width:550px;height:200px;'></textarea></div>

- cols='XX': where XX = the number of columns for the comment text area.
- style='SOME_CSS_STYLE' your desired styling. Currently set to be 200px high and 550px wide.

The line:

1
<div class='js-commentAvatarArea' style='min-width:550px;max-width:551px;'></div>

- style='SOME_CSS_STYLE' your desired styling. If changing width, you must use both min and max values – it is a hack fix but it works.

Remember that everything here is open to alteration. Don’t like the order in which components are displayed? Swap their position and see what happens!

- – -

4) Open your blog page. Press ⌘⇧I to open the Page Inspector, select the “Header” tab. Now select the “Prefix” tab, and drag the modified snippet into this field.

5) Assuming you are using the JS-Kit Comments sections, change to the “General” tab of the Page Inspector. Check the “Footer” box, and copy whatever footer text you normally use into it. Append the following to this:

1
<script src="http://js-kit.com/comments-count.js"></script><script src="http://js-kit.com/comments.js"></script><script src="http://js-kit.com/ratings.js"></script>

These are required for JS-Kit to function. Placing them in the footer means that the important stuff – your blog content – will load more quickly. The loading of these scripts will not cause the page load to “freeze”.

6) Choose a blog entry and drag the BLOG ENTRY snippet to whatever position you want the items to appear. Select the code that appears and press ⌘. to ignore formatting. This is very important.

The “filler” parts that are within the insert_comment() brackets need to be replaced with your information:

RSS_URL: The URL pointing to your RSS feed.
EMAIL_SUBSCRIPTION_URL: The URL pointing to your “Subscribe to this blog via Email” page.
POST_FULL_PERMALINK: The FULL permalink for this post. As an example, for this page this is:

“http://pagesofinterest.net/mikes/blog_of_interest_files/fancy_footer.php”

POST_TITLE: The title of this post.
SCROLL_FROM_TOP_TAG: The tag for the div a “Scroll to Comments” anchor would scroll to, if you were using Scroll to Anchors With jQuery.
LEAVE_A_COMMENT_LABEL: The label for the “Leave a comment” link that when pressed allows a visitor to leave a comment.
SCROLL_TO_TOP_TAG: The tag for the anchor that would scroll to the top of the page, if you were using the above scrolling method.

IMPORTANT:

If you decide not to use any of the sections or scrolling, you MUST replace values related to those sections with empty quotes. As an example, here is a fancy footer BLOG snippet that is not displaying RSS or EMAIL links, and does not use SCROLLING:

<? php insert_comment("","","http://pagesofinterest.net/mikes/blog_of_interest_files/fancy_footer.php","Fancy Footer - Usage and Tips","","Like these snippets?  Leave a comment!",""); ?>

Notice the use of empty quotes in place of variables that are not required. Not doing this correctly will give visitors an error page instead of your lovely blog post.

That’s it!

Probably best to try this out on a test blog (I did) before committing changes to your precious main blog. Play with it, publish it to a server and see if the results are what you expected. When you’re sure you have it how you want it, copy the code over to your main blog.

I’ve used a stylesheet to style my JS-Kit comments , and I am really pleased with the result. I plan on writing a post explaining how to style comments, and will link to it from here when it is done.

Enjoy!

Fancy Footer Snippets’ User Rating:

To learn more JS-Kit tricks, read the following posts:

JS-Kit Comments + Greybox on Any Page
JS-Kit Comments for Each Blog Entry
JS-Kit Comments: Correct Usage of the ‘Permalink’ and ‘Path’ Attributes
Recent Comments PHP Script
Styling JS-Kit Comments
JS-Kit Comments: Correct Usage of the ‘Permalink’ and ‘Path’ Attributes

Comments (5) | Trackback