Brett Innes Dot Com

Working on an API for Pijoo

Brett — Sun, 14 Sep 2008 20:43:26 +0000

Due to pijoo support being inundated by… literally… 10’s of requests from people who want to create widgets and buttons to submit blog posts to Pijoo, I’m working on an API that will give users access to certain functionality needed to add vote/submit buttons to their blog posts.

Using the API to get information on a blog, or individual blog post will be extremely easy using a peice of javascript in your blog theme. As an example, to create a link to submit a blog post, with a vote counter (as part of a voting widget) would look something like this..

^?View Code JAVASCRIPT

<script type="text/javascript">
var action = 'FetchStoryLink';
var elementID='mywidget';
var userID='Public';
var apikey='1Oerg3060rqks46ssgsn076';
script>
<script type="text/javascript" src="http://pijoo.com/api/beta/joo.js">script>

Currently, the available functions include..

FetchID - Get the Pijoo ID for a blog post, if it exsists in the voting system, it’s number is returned for use in a link.
FetchStoryLink - Returns either a link to the post comments (if in the voting system), or a submit link with all the details (title, excerpt etc..) already filled out.
FetchLove - Returns how many people liked the post.
FetchHate - Returns how many people didn’t like the post.
FetchRecVis - Returns the recent visitors to a blog, formatted as list (
) elements.
FetchRecVisAvs - Returns clickable avatars for recent visitors.

This also means Pijoo will provide official voting widgets using the Pijoo API (codenamed “Joo”) when it’s launched, which won’t be for a couple of weeks, as an API needs an API page, with instructions and key generator etc.. but it’s on its way. My to-do list for feature requests on the site is getting huge, but this one’s a priority, so watch this space.

If anyone’s itching to create a widget, and wants beta access to give it a try before it launches, let me know and I’ll throw you an API key and some instructions.

Keep Your Readers Engaged with this Dynamic Tabs Hack for Wordpress

Brett — Sun, 14 Sep 2008 20:43:15 +0000

Have you seen those swanky looking dynamic tabs on news blogs? Do you want one?? This tutorial will show you how to hack one into your wordpress theme in 5 minutes. No downloads, no plugins - just follow the steps outlined below, and pimp your blog out with this essential gadget.

Step 1 - Back-up your theme!

I won’t be held responsible if you break your blog theme, it’s your responsibility to make sure you have back-ups of anything you edit. There’s really not much damage you can do with this, but still.. you can’t sue me now.

Step 2 - Add in the Stylesheet

The CSS for our tabs box is pretty simple, and matches your exsisting theme (link colours, bullets etc..) but you can always edit it to suit your tastes later. For now, go to your style.css (Design–>Theme Editor from your admin panel) and paste in the code below.

*Important - Don’t replace the stylesheet, just add the code to the end.

^?View Code CSS

/* SIDEBAR TAB BOX START */
 
a.tabs_link:link {text-decoration: none; color: #484848}
a.tabs_link:visited {text-decoration: none; color: #484848}
a.tabs_link:active {text-decoration: none; color: #484848}
a.tabs_link:hover {text-decoration: none; color: #484848}
 
#tabs_menu {
width: 99%;
height: 16px;
display: block;
margin: 0px;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 4px;
padding-right: 4px;
text-align: left;
background-color: #FFFFFF;
border-left: 1px SOLID #FFFFFF;
border-right: 1px SOLID #FFFFFF;
border-top: 1px SOLID #FFFFFF;
border-bottom: 1px SOLID #AAAAAA;
font-family: Helvetica,Arial,sans-serif;
font-size: 11px;
color: #484848;
}
 
.tabs_menuON {
height: 16px;
display: block;
float: left;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 2px;
margin-right: 2px;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 4px;
padding-right: 4px;
text-align: center;
vertical-align: middle;
background-color: #FBFBFB;
border-left: 1px SOLID #AAAAAA;
border-right: 1px SOLID #AAAAAA;
border-top: 1px SOLID #AAAAAA;
border-bottom: 1px SOLID #FBFBFB;
}
 
.tabs_menuOFF {
height: 12px;
display: block;
float: left;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 2px;
margin-right: 2px;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 4px;
padding-right: 4px;
text-align: center;
vertical-align: middle;
background-color: #EEEEEE;
border-left: 1px SOLID #AAAAAA;
border-right: 1px SOLID #AAAAAA;
border-top: 1px SOLID #AAAAAA;
border-bottom: 1px SOLID #D8D8D8;
}
 
#tabs_content {
width: 99%;
height: 120px;
display: block;
margin: 0px;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 4px;
padding-right: 4px;
text-align: left;
background-color: #FBFBFB;
border-left: 1px SOLID #AAAAAA;
border-right: 1px SOLID #AAAAAA;
border-top: 1px SOLID #EEEEEE;
border-bottom: 1px SOLID #AAAAAA;
font-family: Helvetica,Arial,sans-serif;
font-size: 14px;
color: #484848;
}
 
/* SIDEBAR TAB BOX END */

Step 3 - Edit Single Post (single.php)

Still in the Theme Editor, select the “Single Post (single.php)” file. This file displays an individual post on your blog, and we’re going to put the tabs box at the bottom of the post, just before the comments. Depending on your theme, the code will be slightly different, but we’re looking for the following 2 lines of code…

^?View Code PHP

 the_content(); ?>
 comments_template(); ?>

Now copy & paste the following code between the 2 lines shown above. If you can’t find the first line, yours might be different - just make sure you add it before the second line…

^?View Code PHP



  //GRAB SOME INFO FROM THE DATABASE - We have to access the database
  //directly, so we can store the results into variables...
  $opost = $post;
  //Get Similar Posts
  $similartxt = '';
  $category = get_the_category();
  $catID = $category[0]->term_id;
  $catID = (int) $catID;
  $posts = get_posts(array('category' => $catID, 'numberposts' => 5, 'order' => ASC));
  foreach( (array) $posts as $post ) {
    $similartxt .= "". $post->post_title ."
";
  }
 
  //Get most commented from database
  $mostcommtxt = '';
  $request = "SELECT ID, post_title, comment_count FROM $wpdb->posts WHERE post_status = 'publish'";
	$request .= " ORDER BY comment_count DESC LIMIT 5";
  $posts = $wpdb->get_results($request);
  foreach ($posts as $post) {
    $post_title = stripslashes($post->post_title);
    $comment_count = $post->comment_count;
    $permalink = get_permalink($post->ID);
    $mostcommtxt .= "". $post_title ."
";
  }
 
  //Get most recent from database
  $rectxt = '';
  $request = "SELECT ID, post_title, comment_count FROM $wpdb->posts WHERE post_status = 'publish'";
	$request .= " ORDER BY ID DESC LIMIT 5";
  $posts = $wpdb->get_results($request);
  foreach ($posts as $post) {
    $post_title = stripslashes($post->post_title);
    $comment_count = $post->comment_count;
    $permalink = get_permalink($post->ID);
    $rectxt .= "". $post_title ."
";
  }
  $post = $opost;
  //NEXT WE BUILD THE TABS LAYOUT...
 ?>
<div id="tabs_menu">
<div id="tabmenu1" class="tabs_menuON"><a class="tabs_link" onclick="switchtabs('1'); return false;" href="#">Similar Postsa>div>
<div id="tabmenu2" class="tabs_menuOFF"><a class="tabs_link" onclick="switchtabs('2'); return false;" href="#">Most Recenta>div>
<div id="tabmenu3" class="tabs_menuOFF"><a class="tabs_link" onclick="switchtabs('3'); return false;" href="#">Most Commenteda>div>
div>
<div id="tabs_content">
<ul><?php echo $similartxt; ?>ul>div>

  //FINALLY, WE ADD IN A JAVASCRIPT FUNCTION TO SWITCH TABS
  echo '';
 ?>

Now save the file (click Update File) to finish.

Step 4 - Finished!

That’s it, you’re done! If anyone asks where you got it, feel free to link them to this tutorial. Oh, and leave a comment if you found it useful.

CSS Tricks: Transparent Mouse-over Images

Brett — Sun, 14 Sep 2008 20:43:06 +0000

This tutorial will take you through the steps to make your images transparent using only CSS, and how to change an image transparency on mouse-over, without relying on javascript. Everything you see here works in both Firefox and Internet Explorer.

Because CSS Opacity is a post-processing operation, which relies on the browsers ability to perform a bit of off-screen witchcraft on the image, and because IE is notoriously crappy at most things, we have to add 2 instructions to our stylesheet - one for good browsers like Firefox, and one for Internet Explorer. The CSS would look like this..

^?View Code CSS

.transparent {
  opacity: 1.0; /* Firefox */
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /* IE */
}

The style above would set the image to fully opaque. Opacity can be used on any element, including divs, images, and text, and uses a range of 0.0 (fully transparent) to 1.0 (fully opaque). You’ll notice for Internet Explorer, the range goes from 0 to 100 (as a percentage, not a fraction) so keep that in mind.

We can use a different style to represent a range of pre-set opacity values like so…

^?View Code CSS

.transparent {
  opacity: 1.0; /* Firefox */
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /* IE */
}
 
.transparent_50 {
  opacity: 0.5; /* Firefox */
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
}
 
.transparent_25 {
  opacity: 0.25; /* Firefox */
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=25); /* IE */
}

To change the transparency on mouse-over, add another class to your style-sheet with the :hover suffix like so…

^?View Code CSS

.transparent:hover {
  opacity: 0.5; /* Firefox */
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
}

Now hover over the image below to see the effect…

Play Classic Games with Firefox Plugin

Brett — Sun, 14 Sep 2008 20:42:14 +0000

If you’re anything like me, and you’re always looking for an excuse not to do any work, there’s a Firefox plugin that lets you play 100’s of classic NES games from your browser! FireNES installs like any other plug-in and gives you a list of games you can play while you browse the internet.

The official site is in Spanish, so for anyone who can’t read moonspeak, the download link is here.

You don’t need to hunt around for ROMs as all the games are built-in and emulated through a Java window.

If you find you can’t control the games, just click the window that pops up to focus it, then it’s Z,X,Ctrl,Enter and the arrow keys (You’ll figure it out). One more reason to Get Firefox if you haven’t already.

Now, get back to work and stop playing games you workshy bunch of..