Wednesday, January 9, 2008

Add Technorati blog reaction on your Blogger Template

Some readers asked to me how to add Technorati blog reactions on Blogger Template.
This simple script helps you to know how much a post is popular in the blogosphere.

The result, how you can see on my blog, is something like this:

245 blog reaction

Step 1: Edit your Blogger template
First: save a copy of your template to avoid problems... Then, edit your blogger template and flag the checkbox "Expand Widget Models". Find this line of code:

<p class='post-footer-line post-footer-line-3'>


Step 2: copy and paste technorati code
Copy and paste the following code using data:post.url to get dinamically the url of each post:

<script src='http://embed.technorati.com/linkcount' type='text/javascript'/>
<a expr:href='"http://technorati.com/search/" + data:post.url' rel='linkcount'>View blog reactions</a>

Save your tamplate and try it!


Add a retweet counter on your website with ReTweet.comAdd a retweet counter on your posts with TweetmemeHow to install Disqus comments into BloggerImprove the default comment system with Google Friend ConnectAdd TwitThis on your Blogger templateAdd Digg vote button on Blogger Template (update)Add delicious button with counter in your blogger postsPlace Google AdSense below post's title on BloggerAdd StumbleUpon button in your Blogger postsAdd reddit button with counter in your Blogger templateAdd Mixx button on Blogger templateAdd DZone button on Blogger templateAdd Design Float button on Blogger templateSome Blogger Tips you probably don't knowAdd Yahoo! Buzz button on Blogger Template

Tuesday, January 8, 2008

Split text string using Coldfusion

This tutorial explains how to split an input text string (with some values comma separed) using Coldfusion.


The code is very simple (you can use insted of input string tag_source equal to 'database, mysql, tutorial, how-to' another value such as a #FORM# variable):

<!--- String to split --->
<cfset tag_source = 'database, mysql, tutorial, how-to'>

<cfset comma_pos = -1>
<cfset index = 1>
<cfset tag_array = ArrayNew(1)>
<cfloop condition= "comma_pos NEQ 0 AND len(tag_source) GT 0">
<cfset comma_pos = #find(",", tag_source)#>
<cfif comma_pos NEQ 0>
<cfif comma_pos EQ 1>
<cfset tag_source_n = #left(tag_source, comma_pos)#>
<cfelse>
<cfset tag_source_n = #left(tag_source, comma_pos-1)#>
</cfif>
<cfset tag_source = #removechars(tag_source, 1, comma_pos)#>
<cfset tagArray[index] = trim(tag_source_n)>
<cfelseif comma_pos EQ 0 AND len(tag_source) GT 0>
<cfset tagArray[index] = trim(tag_source)>
</cfif>
<cfset index = index+1>
</cfloop>

<!--- Do something with splittet tags --->
<cfloop from="1" to="#arrayLen(tagArray)#" index="i">
<cfquery name="insertTag" datasource="aigers">
INSERT INTO TAG (tag)
VALUES (
'#tagArray[i]#'
)
</cfquery> </cfloop>

Monday, January 7, 2008

Use PHP and Twitter API to send message on your Twitter account (Update)

Some weeks ago, I wrote a post about how to send message from a PHP page using Twitter API. My friend Scott Sloan provided an useful update for my original code. For more infos and to download the script take a look here.

Database design fundamentals

This is a mini-guide with hot tutorials to learn, step-by-step, how to design a database from relationships-entities model to final implementation using SQL, MySQL and PHP.

If you are a newbie to design database you can find it very useful.

Database design
Define the relationships-entities model: tables, attributes, and relationships
Create tables and relationships with SQL
How to use PHP and SQL to create tables and relationships
A correct approach to define relationships between database tables

Friday, January 4, 2008

Simple newsletter system using PHP

Some days ago, I wrote a post about how to implement a newsletter system using Coldfusion and a lot of users have asked to me if I could add the same tutorial using PHP. This is the code, really simple, where I used PHPMailer to send emails.

Download this tutorial


Step 1
This picture is the folders structure of this tutorial:


PHPMailer folder contains all classes to send email from PHP, and config.php, contains info about DB connection. Take a look at config.php file source here.


Step 2: PHP and HTML Code
Create a new php page and call it index.php. Copy and past this code into this page (take a mind you have a MYSQL database installed with a table called user, with a field called email.):

<?php
if(isset($_POST['emailSubject']) && isset($_POST['emailBody']) && strlen($_POST['emailSubject'])>1 && strlen($_POST['emailBody'])>1 ){
include('config.php');
include('PHPMailer2/class.phpmailer.php');

// Get users info
$getUser_Sql = 'SELECT email FROM USER';
$getUser = mysql_query($getUser_Sql);

// Post Variables
$emailSubject = $_POST['emailSubject'];
$emailBody = $_POST['emailBody'];

while ($row = mysql_fetch_array($getUser)) {
// Get the current user's email
$emailUser = $row['email'];
// Define mail object and mail parameters
$mail = new PHPMailer();
$mail->From = 'name@mysite.com';
$mail->FromName = 'Add your name or your site name here';
$mail->AddAddress($emailUser);
$mail->Subject = $emailSubject;
$mail->Body = $emailBody;
// Send and verify
if(!$mail->Send()) {
echo 'Your message was not sent to '. $emailUser;
echo 'Error is: '. $mail->ErrorInfo;
} else {
echo 'The message has been sent to '.$emailUser;
}
}
}
?>

<form action="index.php" method="post">
<strong>Email Subject</strong><br />
<input name="emailSubject" type="text" size="32" />
<br /><br />
Email text<br />
<textarea name="emailBody" cols="20" rows="6"></textarea>
<br />
<input name="send" type="button" value="Send!" />
</form>

It's all! For questions send me an email

Wednesday, January 2, 2008

Google Spreadsheets (Apps) now supports Safari

It's true! I tried some seconds ago... With my big surprise, finally Google Apps supports Safari.

So, all Mac users (Safari lovers) can edit Google Spreadsheets files directly with their own preferred browser, without switch every time to Firefox.

Related Posts

Optimize your CSS files to improve code readability

Some readers have asked to me what is the better way to organize a CSS file to optimize code readability and simplify code management.

Generally, I adopt just some simple rules and, it's my opinion, they are useful in order not to become crazy if you have to manage a CSS file for a page/site with a complex design. In this post, I discuss for simplicity a typical two columns fixed layout like this:





Step 1: redefine HTML elements
I think it's a good rule to redefine HTML elements (body, a, form, input...) in the first rows of your CSS files.

/* ------------------------------- */
/* HTML Elements
/* ------------------------------- */
html {font-family:arial, verdana, sans serif; font-size:13px;}
a:link, a:visited{color:#0033CC;}
a:hover{color:#003366;}
h1, h2, h3, h4, h5, h6,
form, input, text-area{
border:0; padding:0; margin:0;
font-family:arial, verdana, sans serif;}
h1{font-size:24px; color:#000000;}
h2{font-size:18px; color:#666666;}
...


Step 2: define page elements
In order to improve code readability, I suggest to indent all elements but with some sagacities: if an element have just two-three attributes (for example #navbar), you can use a single line to declare all properties, otherwise it's better to declare every single property in a new line (for example see #navbar li a:link, #navbar li a:visited):

/* ------------------------------- */
/* PAGE Elements
/* ------------------------------- */
#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}
#navbar ul, #navbar ul li{padding:0; margin:0; list-style:none; float:left;}
#navbar a{color:#FFFFFF; font-weight:bold;}
#navbar a:hover{background:#777777;}
#navbar li a:link,
#navbar li a:visited {
background:#444444;
text-decoration:none;
height:24px;
line-height:24px;
display:inline;
float:left;
width:auto;
padding:0px 10px;}

#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}

div.spacer{clear:both; height:10px; display:block;}
#footer{width:auto; display:block; height:24px;}
#footer a{color:#666666; text-decoration:underline;}


Step 3: define custom class
In the final section of your CSS files, you can define all other custom classes with the same rules I specified above:

/* ------------------------------- */
/* OTHER Class
/* ------------------------------- */
.small{font-size:11px;}
.underline{text-decoration:underline;}
div.small-section{background:#CCCCCC;}
div.small-section a{color:#333333; font-weight:bold;}
...


How I said, these are only my personal suggestions and not true rules, but I think you can find them useful in order to deploy a more readable CSS file.