Fancy Footer Update
I’ve updated the Fancy Footer snippet, now Trackbacks/Pingbacks will be able to find your posts - the previous version’s implementation was ... lacking.
The previous snippet used the post permalink as both the permalink and the path - the Trackback/Pingback system didn’t like “http://“ being included in the path attribute.
I was afraid that I wouldn’t be able to find a solution that allowed us to have Trackback/Pingback support and keep our existing comments.
I am glad to say that my fears were unfounded, and I managed to come up with a solution. The snippet now parses out the “http://domain.com” part of the permalink, and uses that for the path attribute for the widgets. Happily, JS-Kit must do a similar thing, as it hasn’t messed up my comments (the path attribute is what JS-Kit uses to determine what page to display which comments).
The snippet may be downloaded here. This link leads to more information on how to use the snippet.
Email
delicious
Digg
Reddit
Newsvine
Furl
Google
Stumble
HaoHao(0 Comments)
Scroll to top
Fancy Footer - Usage and Tips
<- 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:" and 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: 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:
<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:
<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:
<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:
<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:
<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:
(0 Comments)
Scroll to top
Chinese Idiom Database Updates
I hit a brick wall with my plugin development, so I spent some time updating the Chinese Idiom Database.
A long time ago a kind person emailed me with some suggestions for the database. I thought all of his ideas were wonderful, and have just finished implementing them all, plus some minor improvements to the code, which will make further updates less painful. As this database was my first attempt at PHP programming, the code was ... messy.
I also implemented a few things I wanted to do a long time ago, but couldn't because of the state the code was in.
These are the changes:
There is now an "All Idioms" page that displays all the idioms' English meaning, which will make it possible for people just starting to learn Chinese to browse idioms.
Both the English and the Chinese "All Idioms" pages' links open in a Greybox above the page, which avoids a full page load.
One may move forward or backwards through the idioms within the Greybox, using the "Previous, Next" links.
Idioms may be given thumbs-up/down ratings.
Each time an idiom is returned as a search result or viewed by following a link from one of the "All Idioms" pages, a count is incremented. This will allow us to see which idioms have been viewed the most, which will give me some idea of how many people actually use the database (if any at all).
The hardest part was making the Greybox pages show the "Next/Previous" links, but that was only hard because I am a still pretty new to MySQL. During the page generation, I needed to be able to pull the idiom/English translation from the next and previous entries in the list of all idioms. After much irritation, I managed to do it like this:
############################################################
WARNING: High-Light was unable to convert the text
according to the applied language: php5
############################################################
I'm sure that my way is not the best way, but it works. If the database ever becomes massive, or I can't find anything better to do, I'll look at changing it.
As this script is only run when an idiom is added, so a little inefficiency is OK, right?
Shhh... I'll make it better later, promise!
(0 Comments)
Scroll to top
Idiom Database Updates
It took awhile, but I’ve finally written Roy’s Tag Cloud into the Idiom Database page!
I’ve configured it to show 60 random keywords each time the page is loaded. There are two reasons for limiting it this way: one is that it looks better, more than 60 gets too crowded; the second is that with all keywords (only 200 or so for the 80 idioms currently entered) it runs far too slowly, which does not give a good effect.
As there are not so many keywords in there yet, one will sometimes get a cloud that consists of keywords that are all the same size. This is because the random selection of keywords all have the same count (probably 1), which will mean that they will be given identical font sizes. As more keywords are added, and more idioms are tagged with keywords that already exist, this situation will become less likely.
In the future I’d really love to change this cloud to display idioms by the number of times each idiom has been viewed. There are two barriers that would need to be overcome before this could happen though: the tag cloud cannot currently display Chinese characters*, and I haven’t written the code to record each time an idiom is viewed. Coding that is simple in theory, but (probably because of the convuluted code I’ve writted) it proved to be impossible for me. I’ll have to rewrite the database pages after exams.
You’ve finished reading - go over to the Database and add an idiom!
*There are actually a lot of Chinese keywords, but they don’t get displayed. The flash cloud still includes them, and if one moves the mouse about within the cloud’s boundaries one will occasionally come across a “blank square” keyword - if this happens, congratulations! You’ve located a Chinese keyword.
Roy's Wordpress Cumulus Tag Cloud in Rapidweaver!
-> Revised (23/09/08) <-
MAJOR UPDATE: This tutorial has been updated to work with the new version (1.14) of Roy's Cumulus Tag Cloud. The embed script has changed significantly. If you had trouble with the last version, give this one a try - it has been improved a lot!
If you scroll down and look left, beneath the menu you’ll see a new addition to the page.
I’ve managed to find a way to integrate Roy’s awesome tag cloud plugin with Rapidweaver’s blog page.
And now that you’ve seen it, I figure you’ll want it too - and this is how to do it:
Note: requires php - will NOT work on .Mac.
This tutorial has been written with the “code-phobic” in mind. It may bore you with details that you feel are obvious. If so, just skim read until you find the parts that interest you. I’ve included screenshots of various steps in the process - to view the full size images, just click on the thumbnail of each image. The image will load on top of this page.
If you feel that this tutorial is too complicated, or you run into any problems, please let me know by posting a comment below.
As long as your server has PHP, I am confident that you/we will be able to get this beatiful tag cloud going.
3) Download the tag cloud file pack here. This It contains a snippet that is used to insert the cloud, the swf file, "swfobject.js" and “cloud_creator.php”, that gets tag information.
0x333333
to any hex colour. I use The RGB Colour Calculator to get my hex values.
For example, from:
<script type="text/javascript" src="http://pagesofinterest.net/mikes/swfobject.js"></script>
<? include('http://pagesofinterest.net/mikes/blog_of_interest_files/cloud_creator.php'); ?>
To:
<script type="text/javascript" src="PATH_TO/swfobject.js"></script>
<? include('PATH_TO/cloud_creator.php'); ?>
12) Publish your page - you’re done!
13) With the updated version of the flash file, there are a few extra options worth mentioning:
so.addVariable("tspeed", "100");
so.addVariable("distr", "true");
The first controls the speed of rotation. Increase it for faster rotation, decrease it for slower. I use slower rotation for bigger clouds, and faster for smaller to be best.
The second tells the cloud whether to attempt to spread the tags out evenly throughout the sphere. Change "true" to "false" to disable this (why would you want to disable it? I don't know).
Thanks for reading - if you like this tag cloud, head over to Roy's Site and let him know!
It has been brought to my attention that some hosts do not allow standard use of the “include(‘URL’)” function. If you get a message that looks similar to this:
Warning: include() [function.include]: URL file-access is disabled in the server configuration in /a/path/to/a/domain.com/index.php on line XX
In your "include" parts (there are two, one in the snippet, one that gets pasted in the header in step 11), instead of using this (with paths changed to suit your site):
<?php include("http://pagesofinterest.net/cumulus_test/blog/cloud_creator.php"); ?>
Do this (changing the paths to suit your site):
<?php include($_SERVER['DOCUMENT_ROOT']."/files/cloud_creator.php"); ?>
The $_SERVER['DOCUMENT_ROOT'] asks the server for the path to the current file, ."/files/cloud_creator.php" appends the path to the file we want.
The snippet's include should look something like:
<?php include($_SERVER['DOCUMENT_ROOT']."/files/cloud_file.html"); ?>
When you get it working, or get stuck - I want to know! Leave a comment and I’ll respond as soon as I am able.
(0 Comments)
Scroll to top