The other day a great comment was left on this site. When I went to answer, I realized that I wanted to be able to select part of what the commentator said and automatically turn it into a quote in my comment.

Copy and paste are too mundane for me, so I wrote a Greasemonkey script that adds the markItUp! Editor to any textarea on a page. I then extended markItUp! by adding a ‘quote’ button that wraps the currently selected text (from anywhere on the page) in blockquote tags.

Why A Greasemonkey Script?

I’m pretty sure that there’s a WordPress plugin somewhere that allows you to automatically add quotes to comment replies. As the comment I wanted to quote was on my site, which is powered by WordPress, I could have used this.

However, I realized that I wanted this functionality to be available on any site I was leaving a comment on, not just my own. I know there is a Firefox add-on that adds a HTML editor, but I wasn’t that impressed when I tried it and I don’t think it ‘quotes’ the selected text from anywhere on the page.

In that context, a Greasemonkey script seemed to be the answer. I just needed to find an editor to embed.

Enter markItUp!

I looked at quite a few editors, but markItUp! stood out for me because:

• It provides the main HTML markup options I need: strong, em, lists, links, images (although it doesn’t include blockquotes, by default).
• It’s easily extensible, allowing me to add the blockquote functionality.
• It’s based on jQuery, which is my preferred JavaScript framework.
• It’s open source (Dual licensed under the MIT and GPL licenses), allowing me to embed it in a Greasemonkey script.

Turning markItUp! On

The script runs on all pages you visit, but it doesn’t turn markItUp! on automatically. Instead it creates a "Toggle markItUp!" link immediately before any textarea, as follows:

Once you click this, markItUp! is turned on for that textarea and you’ll see the markItUp! editor:

markItUp! can be turned on for multiple textareas at the same time, but each one needs to be turned on individually.

Functions Included

This implementation of markItUp! includes the following functions:

• Bold: wrap the selected text in <strong> tags
• Italic: wrap the selected text in <em> tags
• Strike through: wrap the selected text in <del> tags
• Paragraph: wrap the selected text in <p> tags
• Blockquote: wrap the selected text (from anywhere on the page) in <blockquote> tags
• Unordered lists: wrap the selected text in <ul> tags
• Ordered lists: wrap the selected text in <ol> tags
• List element: wrap the selected text in <li> tags
• Picture: insert an image
• Link: insert a link
• Clean: remove HTML tags from the selected text
• Preview: show a preview of how the markup will be rendered

Example

As an example, to make something bold, first select the text you want to make bold:

Then click the B icon and the selected text will be wrapped it in <strong> tags:

To see how this will be rendered, click the Preview icon (the green check mark):

Technical Notes

For those that are interested, here are some technical notes related to creating the script.

The following scripts are embedded in the Greasemonkey script:

• jQuery by John Resig
• markItUp! by Jay Salvat
• jqModal by Brice Burgess

I used the Greasemonkey function GM_addStyle() to add the CSS for both markItUp! and jqModal. For markItUp!, I went a step further and used Daily Coding’s Online Image to Base64 Converter to convert the images for icons etc into base64 encoded images. This allowed the CSS and images to be embedded in the script itself, rather than living in external files that have to be stored somewhere (they can’t live in Greasemonkey).

I wrote a Quote function that grabs the currently selected text (from anywhere on the page), wraps it in blockquote tags and inserts it at the current cursor location in the textarea. If there’s nothing selected on the page, it grabs whatever is selected in the textarea itself and wraps that in blockquote tags.

The default Preview function in markItUp! wouldn’t work as it relies on using an IFrame to load an external file which it then manipulates. Once again, the external file can’t be stored within a Greasemonkey script. I therefore wrote my own Preview function, which uses jqModal to display the text in a modal dialog. The styles in the Preview probably won’t be exactly the same as the final comment, but it allows you to check if links, lists, etc are correct.

Where Do I Get It?

I’ll be creating a home page on this site for the markItUp! For Greasemonkey script, but it’s also available on userscripts.org.

I’ve released version 1.12 of Comment Warning overnight. It only contains a small, non critical, change – it now counts how many comments have been made from each IP address in the Log.

What Does Version 1.12 Include?

As mentioned above, version 1.12 only includes one small, non critical, change: counting how many comments have been made from each IP address in the Log.

The number of comments counted will include all comments from an IP address, even those before the comment author was warned. It will NOT include comments that have been marked as spam (or deleted obviously).

If there are some comments for an IP address, the number will link to the Edit Comments page for that IP address, so you can check the comments left by that visitor to see if they are appropriate to remain on the site.

Note: Because of the way the Log is created, there may multiple entries for each IP address. In this case, the comment count will be duplicated for each entry from the same IP address.

How To Upgrade

To upgrade to the new version, go to the Comment Warning plugin page, download the new version, unzip it and upload it over the top of the existing files on your server.

Basically you just need to follow the installation instructions on the plugin page, without the need to activate it. Although not strictly necessary, it’s always recommended to backup your database and files before doing anything on your server.

Alternatively, if you’re already running Comment Warning and are on WordPress 2.7+, you’ll see an upgrade notification in the Plugin page of the Admin area. Click the upgrade link and it will do it all for you in about 15 seconds.

Late last week, I quietly released my new WordPress plugin, Comment Warning. Over the weekend, I added some extra functionality and it’s now reached the point where I’m ready to announce it to the world. So here goes.

Who Is Comment Warning For?

Comment Warning is aimed at DoFollow and ex-DoFollow blogs that have become a target for comment spammers, including those running the CommentLuv and KeywordLuv plugins.

Background

Although DoFollow and related plugins can reward your commentators (and help increase traffic), it also attracts comment spammers. These spammers often hunt for blogs through DoFollow lists or Google searches for terms related to the CommentLuv and KeywordLuv plugins.

The level of comment spam I get on this blog has become untolerable. I turned off DoFollow, but the spammers keep coming.

Comment Warning helps deal with this problem. In the 7 days that I’ve been running the plugin on this blog, 113 visitors have triggered the warning. The number of borderline spam comments have dropped.

Of course this means that the total number of comments I’m getting has dropped as well, but I’ve decided I only want genuine comments at this stage.

Compatibility

The plugin has been tested on WordPress 2.7 and 2.8.

I suspect that this plugin will NOT be compatible with the WP Super Cache plugin. I will be doing some testing in the near future and, if necessary, changing the plugin so it does work with WP Super Cache.

How Does It Work?

Comment Warning checks where visitors come from. If there are certain terms in the referring URL that may indicate that the visitor is a potential comment spammer, they will be presented with a warning message, outlining your comment policy. The message is displayed via a JavaScript modal ‘popup’ (not a real popup).

Both the list of triggers and the message are customisable, allowing you to control who is shown the message and what they are shown. If you come across another site or term that should be added, please let me know.

It is possible to redirect potential spammers to a URL of your choice, either immediately (bypassing the warning) or after a certain number of visits from the same IP address. However, my own personal view is that redirecting visitors is harsh.

A log of visits that trigger the warning is kept. This allows you quickly jump to any comments left by these visitors. It also adds a message, letting you know that the commentator has been warned in the past, to all new comment email notifications and to comments appearing in the Admin area.

What It Doesn’t Do

Comment Warning won’t help if a comment spammer comes directly to your site, rather than from a search or a page with a URL that contains one of the trigger words.

However, if they have been warned previously, this will have been recorded in the log and a message indicating this will appear next to their comments in the Admin panel and in comment notification emails.

How Do I Get It?

You can read more about Comment Warning and download it on the plugin page. Alternatively, you can get it from the Official WordPress Plugin Directory (or search for Comment Warning in the install plugin page in the WordPress Admin area).

The Official WordPress Plugin Directory

This is the first time I’ve added a plugin to the official WordPress Plugin Directory (when did it change from Repository to Directory?). The process wasn’t too hard, but it would have been much harder without the excellent Listing Your Plugin at the WordPress.org Plugin Directory post by Ronald Huereca on WebLogToolsCollection.

Other WordPress Plugin Development News

It was with some surprise that I noticed that this is my first release for almost 18 months! Time flies…

I’m working on some other WordPress plugins in the background and I’m still holding to my statement that I’ll update my old plugins and move them into the official plugin directory. I’ve also started thinking that I should tidy up and release some of the custom plugins that I use on my sites.

Time will be an issue, but I’m hoping I can get most of this done.

I’ve been using WordPress 2.7 for a while now and have comprehensively tested my WordPress plugins on it. In this post, I release the results of my testing: Four plugins work fine (albeit with a non version specific bug found in one of them). One plugin seems to have problems with WordPress 2.7.

Plugins That Work With WordPress 2.7

The following WordPress plugins appear to work fine with WordPress 2.7:

• DualFeeds
• FeedEntryHeader
• LocalCurrency
• KeywordLuv

However, during testing I discovered a bug with LocalCurrency, which I’ll explain in more detail below. This bug is not specific to WordPress 2.7 and has always existed in the plugin. If you haven’t noticed it yet, you’re unlikely to.

Plugin Which Has Problems With WordPress 2.7

Unfortunately, the IFrameWidgets plugin has a problem, which appears to be related to WordPress 2.7. In fact, I suspect that this problem has existed since WordPress 2.5, but only occurs on certain browsers.

The problem is that widgets running in the IFrame widget do not appear. This seems to be related to the JavaScript no longer being able to find the height of the IFrame (the plugin hides the IFrame until it’s fully loaded, then automatically resizes it based on it’s contents).

I’m not certain of all scenarios when it will occur, but I’ve managed to make it happen with the BlogCatalog widget using Firefox 2.0.0.20. For me, there’s no problem in Firefox 3, Google Chrome and IE6.

Kirk M from Just Thinkin’, who reported the problem, seems to be having a more serious problem with the Google Friend Connect Members widget: he gets the problem with Firefox 3.0.5, Shiretoko builds, Chrome and IE 7.0.

It may be that there are two problems: a general problem which only occurs with FireFox 2 and a more specific problem with the Google Friend Connect Members widget.

I suspect the general problem occurs because the way widgets work changed back in WordPress 2.5: IFrameWidgets uses the number of the widget in the plugin logic. Prior to WordPress 2.5, you were only allow a maximum of 9 widgets, so the plugin was using the numbers 1 to 9. In versions after 2.5, there is no maximum number of widgets and the plugin is using numbers such as 320138091. It may be that FireFox 2 can’t handle numbers this large?

I am continuing investigations and hope to identify a fix soon. You can follow this issue in the comments on the IFrameWidgets page and I’ll announce the fix in a post – so subscribe to my feed if you want to know when it’s released.

LocalCurrency Bug

As mentioned above, LocalCurrency has a bug which has always existed within the plugin. The plugin works fine within a single post or page, but doesn’t always work on pages with multiple posts (ie the home page or category pages).

The plugin has been designed to work on pages with multiple posts, but it doesn’t always load the JavaScript that allows it to make the call to Yahoo! Finance. To optimise performance, the JavaScript is only loaded when the plugin finds the <–LCSTART–> tag in the post.

This is fine for single posts / pages. It’s also fine for pages with multiple posts IF the tag is in the first post on the page. However, if the fist post doesn’t have any currency to be converted (ie no <–LCSTART–> tag), then the JavaScript isn’t loaded.

I’ll be fixing this problem sometime in the near future. I’ll probably add an option to allow the blog owner to decide whether they want to convert currency on multiple post pages. If chosen, the plugin will load the JavaScript without checking the posts for the tag, circumventing the problem.

Final Thoughts

Anytime there is a WordPress upgrade, there is a chance that one of my plugins will break. This means I have to do extensive testing with each WordPress release. This takes a lot of time, but fortunately, there are normally no problems to fix.

For the WordPress 2.7 release, I did find a couple of problems – but I’ll get them fixed as soon as I can.

I was pleasantly surprised to find that my FeedEntryHeader plugin was featured on Episode 28 of the WordPress Weekly podcast. The mention was fairly brief,  but it’s nice to be noticed by such an influential podcast.

I’d like to thank Keith Murray for making FeedEntryHeader his plugin of the week. WordPress Weekly is one of the regular features of my 40 minute train ride into the Brisbane CBD. I always listen to the plugin of the week section with interest, but never thought one of my WordPress plugins would appear.

It’s probably lucky that I found out that FeedEntryHeader was featured before I listened to Episode 28. If I’d been taken by surprise on the train, there’s no telling what my reaction may have been!

Anyway, Keith mentioned the threat of having your content scraped by a splog and the role that FeedEntryHeader can play in combating this.

Ironically, I found out that FeedEntryHeader had been featured on WordPress Weekly when I followed a backlink in my WordPress Admin Dashboard. It took me to a splog, which appears to have been scraping Weblog Tools Collection! There was a copy of the Episode 28 page, word for word, including the link to the FeedEntryHeader home page.

So… I found out that WordPress Weekly Episode 28 had mentioned my plugin as a weapon against splogs, through one of these very splogs, that had scraped the Episode 28 page! This is the bit where I say that Weblog Tools Collection should use FeedEntryHeader right?

Well, as it happens, they’d been scraped by a reasonably nice splog, which had left all the post’s links intact, including the post title link pointing at the original post. However, FeedEntryHeader would have made it clearer to people that they were reading the post on the wrong blog. It could also help them with the other, not so nice splogs.

Anyway, it was very nice to have been mentioned by WordPress Weekly. It’s a great podcast and I have a lot of respect for the guys that run it.

It’s been a while since I last posted, because I’ve been tied up with some other projects. My focus is now returning to this blog, but before I get into anything of substance, there’s some housekeeping I need to take care of.

If you subscribe to the feed of one of my WordPress plugin categories, please be warned that these feeds will be removed in 7 days time. The feeds in question are the following:

If you want news about my WordPress plugins, please subscribe to the following feed:

http://www.scratch99.com/category/my-wordpress-plugins/feed

This feed will contain news and tips relating to ALL my WordPress plugins.

Alternatively, you can subscribe to the feed relating to the tag (rather than category) for each plugin. These will probably have all the news relating to each plugin, but may also contain other posts that mention the plugin in passing. These feeds are as follows:

• DualFeeds Tag Feed
• IFrameWidgets Tag Feed
• FeedEntryHeader Tag Feed
• LocalCurrency Tag Feed
• KeywordLuv Tag Feed

I’ve taken this move for two reasons:

1. I’m consolidating my categories, because I have too many of them. This will merge 5 categories into one general category for my WordPress plugins.
2. I normally stick to one category per post, but I often have news relating to more than one plugin. This will allow such news to reach everyone who needs it.

I regret any inconvenience this may cause, but hopefully it will result in a better site.

I’m finally releasing version 1.01 of the IFrameWidgets WordPress plugin. The only change is that is has been re-written so that it will work with WordPress 2.5, which changed the way widgets worked.

If you are on WordPress 2.5 and above, use Version 1.01 of IFrameWidgets. If you are on an older version of WordPress, use version 1.0 of IFrameWidgets.

IFrameWidgets can stop slow loading JavaScript widgets from breaking your page. Widgets remain hidden until completely loaded, then appear in whole. If they don’t load, they won’t take up any space on your sidebar. If they load slowly, or hang, they won’t stop the rest of your page from loading.

Thanks To EagleHawk

A BIG Thanks to Eaglehawk from Flight of The Eaglehawk for alerting me to the problem and for beta testing the new version.

Where Do I Get It?

IFrameWidgets v1.01 can be downloaded from the IFrameWidgets plugin home page. Further information about the plugin and it’s features, including installation / upgrade instructions, is also available on the plugin home page.

I’d like to announce the release of KeywordLuv, my new WordPress plugin, but RT from Untwisted Vortex beat me to it, announcing it several days ago. I need to be quicker with this sort of thing! I don’t mind, as KeywordLuv was partially inspired by RT’s post on building backlinks via DoFollow blogs.

KeywordLuv helps you reward your commentators by separating their name from their keywords in the link to their site. This gives them improved anchor text, which can help their site rank higher in the search engine results.

Example Of KeywordLuv

If a commentator enters: "Stephen@Custom WordPress Plugins" in the Name field, their comment will have:

Stephen from Custom WordPress Plugins Says:

If they don’t enter the @ symbol, the anchor text will simply display as normal. For a live example, see the first comment below. Feel free to leave a comment to try it out!

What Are The Benefits?

Most commentators enter their name in the Name field. This helps them rank well for searches on their name, but little else!

Some commentators enter their chosen keywords instead of their name. This helps them rank well for searches on their keywords, but many blog owners will mark them as spam! Even if you don’t mark them as spam, you probably get a little tired of talking to Miami Hotels!

KeywordLuv lets them enter their name, so you can feel as though you are talking with a real person, while at the same time helping their blog rank well for their chosen keywords. It’s the best of both worlds!

The Fine Print

There are a couple of things you need to be aware of:

1. For your commentators to really benefit from this, you will need a separate Dofollow plugin, to remove the nofollow tag.
2. KeywordLuv may not work with all themes. For more information and workarounds, see KeywordLuv – Theme Compatibility Issue.

Where Do I Get KeywordLuv?

The plugin is available for download via the KeywordLuv plugin home page. More information about how KeywordLuv works and how to use it is also available on the plugin home page.

I’ve been pretty quiet for the last couple of weeks, mainly due to offline endeavours. However, I did find time to finish off a new WordPress plugin called LocalCurrency, that allows you to show currency values to your readers in their local currency.

For example: If a post contains 10 yuan, a user from Australia will see 10 yuan (AUD$1.53), while a US user will see 10 yuan (USD$1.39).

How LocalCurrency Works

LocalCurrency determines the reader’s country (via IP address), gets the current exchange rate from Yahoo! Finance, then calculates the equivalent value in the readers currency for any values in the post. It then updates the post so the reader can see their currency, in brackets after the original value.

All of this is done using ‘AJAX’ techniques so that page load times aren’t affected. Readers can change their currency via a selection box if they desire.

Where Do I Get LocalCurrency?

See the LocalCurrency plugin home page for more information about LocalCurrency, a live example, and to download the plugin.

Why Is It On JobsInChina?

There is one big difference about this plugin, compared to my other plugins. LocalCurrency is a JobsInChina production. That means I’m hosting  it on the JobsInChina.com website. There are several reasons for this:

1. It was written for use on the JobsInChina blog
2. It’s running on that blog, not this one
3. It is more likely to appeal to a higher percentage of visitors to that blog (as many will start their own blog when living in China).
4. Honestly, the backlinks will help JobsInChina. I’ll write more on this in the coming weeks, but a plugin is great at generating backlinks.

This was a hard decision. This is my WordPress plugin site, so it could be argued that all my plugins belong here. Point three swayed the argument. JobsInChina is supposed to provide resources to people wanting to live in China. That includes bloggers!

It’s not all about point four. In fact, I’m sure there are SEO experts out there who’d say that it’d be better to keep the two sites separate and tightly focused. Of course it is possible for a site to be an authority on more than one topic. This blog has some authority for China – it ranks at position 20 for Chinese Hospitality (it used to be on page one, but it’s slipping).

Anyway, I may come to regret the decision, but it’s been made now. I’ll provide any feedback on the SEO impact if it becomes obvious.

Final Thoughts

This was one of the more complicated plugins I’ve written, as it involved JavaScript and ‘AJAX’, but it’s been very satisfying to complete. I’m not expecting it to be a mainstream plugin, but it is handy for people living abroad who often talk about what they’ve spent recently.

I’m pleased to release IFrameWidgets v1.0, a WordPress plugin that can stop slow loading JavaScript widgets from breaking your page.

Widgets remain hidden until completely loaded, then appear in whole. If they don’t load, they won’t take up any space on your sidebar. If they load slowly, or hang, they won’t stop the rest of your page from loading.

If You’re On A Beta Version

IFrameWidgets has been in beta for a long time. The last beta version (v0.14) version was released almost two months ago and no problems have been reported with it, so I have promoted it to v1.0 and I’m ‘releasing it’.

There are no changes from v0.14, apart from the version number and date.

The Problem – Slow JavaScript Widgets

We all love adding JavaScript widgets to our sidebars. Widgets for social networks, advertising, traffic exchange, weather conditions, etc…

The problem is sometimes these widgets can be very slow – or they may not load at all. When this happens, it can break your page. Items after the slow widget don’t load, they wait until the widget finally loads or gives up.

How IFrameWidgets Helps

The plugin creates WordPress sidebar widgets (not to be confused with the JavaScript widgets themselves) that run in an IFrame. These are similar to the standard Text widgets, but with the output created in an IFrame.

IFrames load in parallel to the rest of the page. If slow loading JavaScript widgets are placed in an IFrame, they won’t stop the rest of the page loading if they load slowly or hang.

IFrameWidgets also hides the widgets until they are completely loaded, then displays them. If they don’t load, they won’t take up any space.

Requirements

Should work on any WordPress version / theme with support for WordPress widgets. I am planning a non WordPress widget version in future.

Where Do I Get It?

IFrameWidgets v1.0 can be downloaded from the IFrameWidgets plugin home page. Further information about the plugin and it’s features, including installation / upgrade instructions, is also available on the plugin home page.