Add Tweet Box To Your Blog

Tweet Box allows Twitter users to tweet directly from your website or your blog. To add Tweet Box to your website or blog, simply add this little piece of code to your WordPress single.php theme file. You can place it anywhere you like. I have it installed at the bottom of this single.php page. See below.

<div id="tbox"></div>
<script type="text/javascript">
  twttr.anywhere(function (T) {
    T("#tbox").tweetBox();
  });
</script>

You can modify Tweet Box by passing parameters to the script.

<div id="tweet-box"><h3>Twitter</h3></div>
<script type="text/javascript">
    twttr.anywhere(function (T) {
      T("#tweet-box").tweetBox({
        'counter' : true,
        'height'  : 50,
        'width'   : 440,
        'label'   : "I made it easier for you to tweet this:",
        'defaultContent' : "Just read: <?php the_title(); ?>
        @ulyssesonline",
      });
    });
</script>

In this example, I’m displaying the counter, which counts the number of characters left in the tweet box. You can set the height and the width of the Tweet Box. I have it set to 440px x 50px to match the content area of my blog. I’m also displaying the label, as well as the default content. The default content includes the title of the blog. I’m calling the WordPress’s the_title() function to display the post title.

I hope you find this helpful. Send a tweet.

JSColor Is The Best Color Picker

Javascript color pickers are fun. They make picking colors on web forms an easy task. One of my favorite color pickers is called JSColor. I like it for its simplicity. It’s easy to install and use. It’s also elegant.

To use JSColor, just download the source and paste this code in your pages:

<script type="text/javascript" src="jscolor/jscolor.js"></script>

Add the “color” class to your input tag:

<input class=’color’/>

And you’re done. Simple.

This is the main reason why I rated JSColor the best Javascript color picker.

See the demos here.

ShiftEdit

ShiftEdit is an online IDE for developing PHP, Ruby, Python, Perl, Java, HTML, CSS and JavaScript through FTP, SFTP and Dropbox. I recently started using ShiftEdit after seeing it from the Chrome Web Store. I’m using it at the moment to manage several of my websites.

ShiftEdit allows you to create and edit PHP, Ruby, Java, HTML, CSS and JavaScript scripts. ShiftEdit has a built-in SFTP support to manage your websites. Just supply your FTP credentials within ShiftEdit to manage your sites. ShiftEdit also has syntax highlighing, block tabbing, undo/redo, line numbers, as well as jump to any line number.

If you’re looking to manage your website via the browser, without the need for a file editor or FTP client, you should look into ShiftEdit. All your work is done via the browser. No more downloading and uploading files. No more editing offline. Changes are immediate.

ShiftEdit keeps tracks of your file changes as well with Revisions History. You can highlight several files and look at file differences. You can also bookmark files for easy access later. There are more features. Visit ShiftEdit if you’re interested.

JQuery.js Or JQuery.min.js

If you’re running JQuery on a production site, which library should you load? JQuery.js or JQuery.min.js? The short answer is, they are essentially the same, with the same functionality.

One version is long, while the other is the minified version. The minified is compressed to save space and page load time. White spaces have been removed in the minified version making them jibberish and impossible to read.

If you’re going to run the JQuery library on a production site, I recommend that you use the minified version, to decrease page load time, which Google now considers in their page ranking.

Another good option is to use Google’s online javascript library. This will save you the hassle of downloading the library, as well as uploading to your site. In addition, your site also does not use resources when JQuery is loaded.

The latest JQuery minified version from Google is available here.

You can link to it in your pages using:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Add Google Maps To Your Posts

They say a picture is worth a thousand words. Adding a static map to your posts can make a world of difference. Your posts not only look good, but are informative and effective as well. Whether you are giving out directions or simply just showing off where in the world you were at one point, you can add great value and effectiveness to your posts. The good news is, adding Google Maps is not so difficult.

The Google Static Maps API

The Google Static Maps API lets you embed a Google Maps image on your webpage without requiring JavaScript or any dynamic page loading. The Google Static Map service creates your map based on URL parameters sent through a standard HTTP request and returns the map as an image you can display on your web page. I will breakdown the URL piece by piece and explain.

The URL

http://maps.google.com/maps/api/staticmap?<em>parameters</em>

Required Parameters: Center, zoom, size and sensor. Examples.

center=101+Market+Street+San+Francisco  (enter address or latitude, longitude)
zoom=14 (from levels 1 to 20)
size=480x300 (map size in pixels)
sensor=false (use default 'false' unless using GPS locator)

Optional Parameters

Maptype: Roadmap, Satellite, Terrain or Hybrid.
Marker: See below.
Paths: See below.

Putting It All Together

We can string it all together using ampersand (&).

This URL:

http://maps.google.com/maps/api/staticmap?center=101+Market+Street+San+Francisco&amp;zoom=14&amp;zoom=14&amp;size=480x300&amp;maptype=roadmap&amp;sensor=false

Produces this:
San Francisco

Finally, to add an image to your post, just add an HTML img tag. Example:

<img src=”http://maps.google.com/maps/api/staticmap?center=101+Market+Street+San+Francisco&zoom=14&zoom=14&size=480×300&maptype=roadmap&sensor=false” 
alt=”San Francisco” />

There are other options that can be added such as Markers and Paths, but are a bit more involved. You can check out the rest from the Google Static API V2 Developer Guide.

Javascript and WordPress Threaded Comments

Sometime after WordPress 2.7 and before WordPress 2.9.2, I lost a key functionality within WordPress. It’s threaded comments.  I blame myself for constantly tinkering around with the theme. I must have deleted a key piece of code somewhere in the theme that prevented threaded comments from working.

For those not familiar with WordPress, the threaded comments functionality allows the “comment form” to jump underneath a specific comment when a “Reply” link is clicked. Clicking “Cancel Reply” restores the “comment form” to its original position. When a comment is submitted, the comment is placed directly underneath that specific comment.

In my case, the threaded comment function still worked, sort of, but not quite the way it was supposed to. I did some digging around. After reading a couple of articles, I finally found what was missing in my WordPress theme. It’s a tiny Javascript command that you place in header.php.

This tiny Javascript makes the comment form jump from one place to another. Make sure this code is in header.php just before the <?php wp_head(); ?> command.

<?php if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ ); ?>