Dave PC Guy » web extras

Setting up Feedburner Feeds

Admin — Fri, 26 Mar 2010 05:09:53 +0000

Have you ever wondered about that pretty subscriber counter most blogs have on their pages? How do they know exactly how many people are following them?

It’s called FeedBurner. I’ve been using it for a while now and it never occurred to me how much POWER such a service can have! Not only are you provided with statistics, but you can add ads to the feed, get a counter, update twitter automatically, and a whole spectrum of other features.

Here’s what I’m going to cover in this short tutorial:

getting a FeedBurner Feed
Setting it up
incorporating the feed into your website.

Getting a Feed

This is actually the easiest part. All you need is a google account and go here. Once you’re at the dashboard, look over here:

Okay, now go to your blog site. I’m using one of my newer blogs so just type in the URL.

In my case, I typed in http://www.livingsmartgreen.com/ Click next.
If you have several RSS feeds available, such as RSS, RSS2, or Atom. Pick one of them. Click next.
The feed title and address should be already filled in, if not, just type those in.
Click next. It should tell you that everything’s done! Click next anyways.
Check off all the boxes there for extra statistics. Next.

Yay, now you’ve got your feed!

Setting up that feed!

You should be at the main feed page (not the dashboard). Here’s what mine looks like:

Looks good so far. The “analyze” part will not work just yet. You’ll have to wait for that so let’s skip to “publicize” the most important part. Here is the deal, FeedBurner offers A LOT of services, most of which you will never use. Some of them are truly just annoying services so don’t bother. Try them out, and have fun. Here are the essentials:

Go to “PingShot” first and activate it. There are some services that like to get notified whenever your RSS feed changes. This will boost your traffic, hopefully.

Next, go to “socialize” and add your twitter account if you want. Your feed will be reposted on twitter (thus you don’t have to use the WP>twitter WordPress Plugin). Under “hash tags” choose the “Create hashtags….” option. That’s all you need, activate the service and be on your way.

Go to “creative commons” and choose the appropriate license. This makes sure you retain the rights to your content. It’s a smart thing, trust me on this one.

As for the rest:

Headline Animator creates a banner that shows off your latest feeds as well as a link to your site.
BuzzBoost does something similar, except it creates a gadget. If you have been following my blog for the past few months, I always had it in the left sidebar under the meta.
Email subscription. Another nice gadget that lets users subscribe via e-mail rather than RSS. Try it out if you want to.
FeedCount. Okay, this is everyone’s favorite. This is that little counter thing that tells everyone on your blog how many people are subscribe. If you want it to look fancier, I suggest you use this tutorial to create your own little piece of PHP code and get an actual text value for the number of subscribers. You will probably have to enable the awareness API for this to work.
Chicklet Chooser. Another nice gadget. This one is used for the actual Feed. If you don’t already have an RSS icon or want to use one of Feedburner’s pre-made icons, go ahead and activate this and customize your own icon. Copy the code, and paste it to your site where you want it.
Password Protector and NoIndex. Password protector is used if you want to protect your feed from other people. ie. make it private. NoIndex makes sure your feed is not submitted to any search engine (I suggest against it.

That’s pretty much it. If you go to optimize, you will be able to add some new functionality to your feed such as e-mail replies, images, and shortened URL’s. I don’t see the point in that so let’s move on. If you go to monetize, you will be asked to go to google’s AdSense. Log into there if you have an account set up. Go to AdSense Setup and add a Feed. Straightforward setup.

WordPress/Blog Integration

It’s easy to integrate your FeedBurner Feed into WordPress. Go to Plugins > Add New and serach for “FeedBurner”. Install and activate the plugin called: FD Feedburner Plugin. Moving on, under Plugins, you should find Feedburner Configuration. Go there. Here’s my setup:

I checked off two of those options, you don’t need to. It’s up to you. If you cannot remember the Feed URL, go back to that main page and click on the RSS button. Use that link:

Save the options and you’re done!

What’s the next step?

The next step is optimizing your feed, analyzing the data, and doing whatever. There are a lot of choices to make and a lot of features you can take advantage of. Just have fun and see what you can accomplish!

Share and Enjoy:

CSS Trick: Disappearing Textbox

Admin — Fri, 30 Oct 2009 16:21:45 +0000

Remember that trick to show a sub-menu using CSS in my older tutorial? Well, I had an idea for a project of mine, and with a little help from my dear friend Raphael. Last night, I launched my little website project called “A Night Story” and made some tweaks. Ignore the story, it’s just a concept. If you hover over the word “city” in the text, you’ll see another textbox appear with more information about the word.

The whole concept of the website is to create a story, a swift, easy-to-read story that contains more information than it seems.

Hover effect

So, let me teach you how to create such a hover effect on any word in the text, and on an unlimited amount of words without much work

The HTML

First, we have to create an ideal HTML situation that will be easy to describe with CSS later on. First, pick the word, in my case “city” and then the text.

We’ll have to put the whole thing within a “span” and then create another “span” for the hover text like this:

citythe city was large, and dark. People droned on and walked aimlessly through the streets every day. The smog filtered through their lungs. No one could escape the industrialization that overtook and destroyed the greenery that had once been there, the darkness shrouded my moves.

If you don’t want to use the tag, then use another tag that you can use as an “anchor”, ie so the browser knows its special, a good one to use could be the tag , which will let people know that the bold text is important and hoverable. Otherwise, you can create ids for all these spans and that’s just too much work. You can try different variations of this formula and see how it works. This is what I did, and it worked out well

The CSS

Let’s focus on the CSS. One thing, I want to do is change the word “city” so that it does not appear…like such a link. Let me show you how I customized the link so that it appears the way it does:

a { padding: 0px; margin: 0px; background-color: #FFFFFF; } a:link, a:visited { color: #0000CC; text-decoration: none; } a:hover { background-color: #369; color: #fff; }

That creates a nice effect. The underline is gone, the tag has no special padding or a margin. I’ve also took the the liberty to make its background match the rest of the div (not necessary). Next I changed it so that the color does not change once clicked, but the color of the word will still be different than white. Once hovered, the word will change color and background as shown on my test page.

Let’s get down to disappearing! Believe it or not, this is so easy, you’ll be asking yourself why you hadn’t thought of it:

span>span{ display: none; position: absolute; width: 300px; } span:hover>span { display: block; padding: 5px; background-color: white; border: 1px solid black; }

First, I used a strange class: span>span means, the span within another span will follow these properties. The text will not display, the position is absolute (so that it will cover other text once hovered over), and the width is nice 300px. You can change the width attribute, and mess around with the position if you wish to. I probably will in the final version.

Next, span:hover>span is a pseudo weird class. The span:hover class basically is a class that takes effect only when you mouse over the original span. By adding >span, we’ve created something genius. This class is a class that works only once the original span is moused over. Now, we’re using the display:block property to display the nice block of text. I used some padding and added a background color so that the other text won’t interfere. The border is there only for neatness.

And that’s it! With just these few steps you’ve created something that people use javascript for!

Pros:

The pros of using CSS:

It is really easy to change the effects

You don’t have to learn javascript

It works even if the user has javascript disabled

It is faster than javascript because it requires no calculation or parsing

Cons:

The Cons of using CSS for this particular effect:

less maneuverability

less special effects

looks too simple for some websites

With some experimenting and patience, you can create really beautiful drop-down textboxes with custom backgrounds. Well, the possibilities are endless!
Again, go check out my testing site for a demo!
Share and Enjoy:

Custom E-mail Form

Admin — Thu, 15 Oct 2009 19:14:43 +0000

AH! So I have to create a custom e-mail sending form. He wants me to create a webform that will ask for a person’s name and e-mail address. Once those are input, an e-mail will be sent to the person’s e-mail account with a thank you message. Meanwhile, the website will reload with a custom coupon that bears their name. I’ll need it printable so I’ll have to add a print button as well.
Sounds simple enough, right?.. right?

First off, go create a coupon. After you’re done with that, we can start working. Make sure the “name” field is left out though, we’ll add that in later with some CSS. Originally, I wanted to send the coupon in the e-mail, forcing the customer to input the right e-mail address but I realized that most e-mail clients do not support CSS and especially not the “position: absolute;” property and value.

Tip: I update the script periodically, and have numerous times while writing this tutorial. None of the scripts mentioned in this post are necessarily WRONG but at the bottom of the page is the current “release” that I’ve created. The images may not correspond directly with the code they represent.

Setup

Alright, here’s what you’ll need to do. You need to download MIME (MultiplePurpose Internet Mail Extensions), which is an e-mail extension for php that allows you to send HTML e-mails. If your site operates under c-panel, like mine is, then just scroll down, find the PHP extension icon. Search for “MIME” and install the packages. If you need to install them manually, search through google “Installing MIME on” your OS. I cannot really help you out more than that because I am not an expert on PHP extensions. There are multiple guides online though that WILL help you out.

installing MIME

Press Install

Once you press install, the package will automatically install. It may ask if it can install other dependent packages, simply OK it.

Basic Form

Modified Mail Form

Let’s start scripting. I advise you to create a mail.php form that you can “include ()” or “require()” into your existing website. It’s much neater this way and the PHP won’t get in the way of your layout. Here’s the basic form I created for our purposes:

Name:

E-mail address:

Message (optional):

I used the “$_SERVER['PHP_SELF']” variable for the action so that we won’t have to create yet another script page to use the information. The “name” field will translate to $_POST['name'], the”e-mail address” into $_POST['email'], and the optional “message” into $_POST['optmessage']. There is nothing much more to it. I used maxlength for the name 41 characters because my full fictional name, “Captain Soren William Alexander Janus VI.”, is exactly 41 characters long . 40 characters for the e-mail seems sufficient enough as well. 140 character message is the same as twitter’s max tweet. There is nothing much else to this.

Are you feeling “Loopy”?

Let’s move on. We need to create a loop that will ensure our data has been entered and that we are not dealing with a blank form. The purpose of this basic loop is to show the initial form for the user to submit the data to, reload the form if any errors were made during submission (ie invalid entries), and send the email in the end.

Form goes here Something entered was wrong, please re-enter your information: form goes here.

Confused? Don’t be. The beginning tells us if the form has been previously submitted, if not, the form will load. The second part after “elseif” checks if all the data entered is correct. After all the conditions have been met, we progress to the last “else” which will execute the mail sending.

“Validate This!”

If you look above, you’ll see a strange function called “isEmailAddress”. I set this function up using a script I found. Here is the function:

function isEmailAddress($value) { return eregi('^([a-z0-9])+([\.a-z0-9_-])*@([a-z0-9_-])+(\.[a-z0-9_-]+)*\.([a-z]{2,6})$', $value); }

It basically checks if the e-mail is in the correct format. It also makes sure that only a single e-mail address has been entered and that it does not contain any malicious code.

Tip: If you wish to add database support to this script, you’ll have to use a validation function for the name and message as well!

Next part of validation are the “empty()” and “trim()” functions. “Empty()” is self-explanatory. You entered the variable name and the function will check if it is empty or not. If it is, the function returns TRUE. “Trim()” works similarly except here it takes out all the extra spaces and such. If it equals ‘ ‘ or an empty space, then it will return TRUE. The “elseif” statement is setup so that it checks the e-mail and name value.

Tip: If you have some time on your hand you can create a function that will check for each of these statements like: function CheckValue ($var) { if (empty($var) {return TRUE;} if (trim($var) == ‘ ‘) { return TRUE;} }

Second Form

Incorrect entry

You have a choice here. Under “elseif ()”, you can create new “if” statements and inform the user of what exactly is wrong. For example if the name is empty, you can create an if statement like this:

if (empty($_POST['name'] || trim($_POST['name']) == ' ') { ?> echo "You left the name field empty";

I like to keep the user in the shadows and put all of the validation together using the || which means “or” and the same original form will show up with the message “Error: Please enter a valid e-mail address and your name”. Add the following form under “elseif()” between the php tags:

Error: Please enter a valid e-mail address and your name
Name:

E-mail address:

Message (optional):

It’s the same form with a little message on top.

Everything “Else”

So all the variables go through, the script is validated. What now then? Now we’ll send the e-mail and refresh the site. I am using e-mails for a good reason. Whenever a user asks for a coupon, I’ll have a copy of their name and their e-mail address for future reference. I COULD use a database system but I’m a lazy person. I’ll point you in the right direction if you wish to do that though. Instead, let’s focus on what I already have done.

We should set up our variables first, writing out $_POST['email'] is quite a hassle. Plus, we have to set up the e-mail variables as well. Also note that this is in the last else {} section:

//variables $to = $_POST['email']; $subject = "Coupon from the Chiropractors"; $name = $_POST['name']; $optmessage= $_POST['optmessage']; $opt = wordwrap ($optmessage, 70);

The mail function works like this:

mail (to, subject, message, headers)

So we set up the “$to” variable which we will direct to the e-mail. We’ve also set up the subject of the e-mail and put $_POST['name'] into the $name variable for later use. Next, I transferred the optional message into $optmessage variable which I then word-wrapped into $opt. You have to word-wrap your e-mail message and the longest line can only have 70 characters. Using the “wordwrap ()” function and the parameter “70″, we’ve accomplished that. Let’s write the message:

$message = " Chiropractic
Dear $name,
Thank you for visiting us at ourWebsite.
Please print out your coupon and present it on your next visit. Thank you, and we hope to see you soon!

Sincerely, Alexander

optional message:
$opt

Your e-mail: $to
";

Note that e-mail clients have different support of HTML and CSS. Don’t include any XHTML, that’s way too complicated. This is the reason why I did not put the coupon into the e-mail. Most e-mail clients do not support the “position: absolute”. Alright, let’s setup our header variable. With headers, you can define who the e-mail is from, where to reply to the e-mail, send different copies, and most importantly, use MIME.

//header information $from = "no-reply@davepcguy.com"; $headers = "From: $from" . "\r\n"; $headers .= 'MIME-Version: 1.5.2' . "\r\n"; $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; $headers .= "BCC: reply@davepcguy.com" . "\r\n";

I used an e-mail address I set up through c-panel. Set it up the same way you set up any other e-mail account. And you won’t even have to include the password in your script. Let’s break down the header.

The first header establishes from where the e-mail will be sent. Always break the lines when setting up the header variable using “\r\n”. Next, set up your MIME and its version. The newest one should be 1.5.2 but check your version under the PHP addons/modules in your c-panel. If you can’t make it work, use “MIME-Version: 1.0″. Next, set the content-type. Just copy the above, there should be no other alternative. The script will also send a BCC (Blind Carbon Copy) of every e-mail to my own e-mail address so that I can keep records. Let’s send it then!

//functions $mail_sent= mail("$to", $subject, $message, $headers);

All that work and it’s summed up in one single line, amazing, eh?

The Script After

Hmm…I think I should give the user the coupon finally, don’t you think? They’ve done SO much work. Well, let me set up the message then:

//announcement $sent= "
Dear $name,
Thank you for visiting us at Website Here is your coupon

$name

Please print this coupon out and present it on your next visit. Thank you, and we hope to see you soon!

Sincerely, Alexander

P.S. please print out your coupon immediately or save this page because it will not be available after you close out. If you're having any trouble, please contact our webmaster.

Optional Message:
$opt
"; echo $mail_sent ? $sent : "Mail failed"; echo $sent; } ?>

Haha, I know, it looks complicated, doesn’t it? Well not really, the “$sent” just sets up a variable with the html code I plan to use in my webpage. Beware, you’ll have to adjust this according to your own webpage. the echo $mail_sent ? $sent: “Mail failed”; is a short hand for an if loop ” if ($mail_sent) {$sent} else { “Mail Failed”};” then the $sent variable will echo out.

final page

Extras

database support

print

extra validation

This is how I finished out my script. I don’t plan on doing too much to it other than making it printable. I’m thinking about making a pop-up window that will display all of that information. Let’s review some of the extras you can add.

Database Support First, you can add database support. Simply make a new database in MySQL (using PHPmyAdmin) and set up two columns, one for name, and the other for name. Set up the table or use this SQL command if you can, creating the database might be tricky, but you should be able to use the “CREATE TABLE” part. If you can’t, just set it up manually using the values shown:

CREATE DATABASE coupondb; CREATE TABLE `coupons` ( `id` int(11) NOT NULL auto_increment, `name` varchar(255) NOT NULL default '', `email` varchar(255) NOT NULL default '', PRIMARY KEY (`id`) ) TYPE=MyISAM;

You can probably make a third column for an order (1., 2., 3.) or for the date and time. Add this at the beginning of the “else{}” :

//MySQL variable $host = "localhost"; $user = "user"; $pass = "password"; $db = "coupondb"; //connect $connection = mysql_connect($host, $user, $pass) or die ("Unable to connect!"); // select database mysql_select_db($db) or die ("Unable to select database!");

First, set up the host variable ie, where the database is. I’ll trust my WordPress senses and leave that with localhost. You’ll have to create a new username and password as well as a database manually using c-panel or a different site manager your hosting provides you. Input the user and password. Change the “die” variable to something like “internal server error” or something, this is just for educational purposes. I got it off Zend Dev Zone again. Make sure you put this BEFORE the e-mail sending (ie the mail() function) because it’s senseless to send the e-mail but not make a database entry. Here’s the basic query:

// create query $query = "INSERT INTO coupons (name, email) VALUES ('$name', '$to')"; // execute query $result = mysql_query($query) or die ("Error in query: $query. ".mysql_error()); // close connection mysql_close($connection);

And there you go, database support added. Check out my full script on the bottom for the full implementation with the duplicate entries check as well as other features.

Print Let’s check out how to print all this stuff out. I found a neat piece of JavaScript that can accomplish this. It’s a bit tricky and I still can’t get it to show the best results but, it seems to work well nonetheless. You can find it here. Add the header part into the real header where you’ll use this mail.php script. Then, modify the $sent variable:

$sent= "

Dear $name,
Thank you for visiting us at Website Here is your coupon

$name

Please print this coupon out and present it on your next visit. Thank you, and we hope to see you soon!

Sincerely, Alexander

P.S. please print out your coupon immediately or save this page because it will not be available after you close out. If you're having any trouble, please contact our webmaster.

Optional Message:
$opt

";

Change the width to suit your needs. And I am completely aware there is a million different divs just in this script (you should see the pages I code, million more divs) but they are mostly mandatory. You can switch the “div” around the “$name” variable to . You’ll have to spend some time adjusting this, the width of the page, the margin, as well as the different positions to suit your needs. It worked for me almost perfectly

Extra Validation Okay, so if you want to use a database with this form, you’ll need some extra validation as a precaution against SQL injection. We’ve already validated the e-mail address and I won’t be validating the optional message just yet. So let’s validate the name. I used a function from the same script I cited when I used the e-mail validation function:

// check whether input is alphabetic function isAlpha($value) { return preg_match('/^[a-zA-Z]+$/', $value); }

Add this function to the beginning of the document and add another || to the elseif () {} part of the loop saying “!isAlpha($_POST['name'])”. Also, warn the user that they can use only letters for the name and no periods or other characters nor numbers. The optional message SHOULD be validated but I am not certain how to go about it just yet. I’d like to let the user be able to use some personalized html code so I won’t look into it too much. Also, I am not storing that message so I don’t have to fear an SQL attack.

Conclusion

I hope this shed some light on how you’d create an e-mail form as well as how to use the mail() function. As you can see, the possibilities with PHP are endless. I’d like to also inform you that it took me several hours to write this script with numerous trial&error runs. I’m self-taught, and mostly used the PHP manual as a reference. I hope this helped and that you have fun trying this out for yourselves!

I’d appreciate any comments regarding the security of this script as well as usability. I, myself, am about to launch the script on one of my pages so I’d like to know what people have to say about it.

Final Script with all its features added: Note that I will update this part of the post as necessary when I find bugs and optimize it.

Please enter your name and e-mail address. The name field supports only alphabetic characters (letters).
Name:

E-mail address:

Message (optional):

"; } if (email($_POST['email'])){ echo "Please enter a valid e-mail address in this format: account@email.com.
";} ?>
Name:

E-mail address:

Message (optional):

Dear $name,
Thank you for visiting us at Website Here is your coupon

$name

Please print this coupon out and present it on your next visit. Thank you, and we hope to see you soon!

Sincerely, Alexander

P.S. please print out your coupon immediately or save this page because it will not be available after you close out. If you're having any trouble, please contact our webmaster.

Optional Message:
$opt

"; //MYSQL QUERY //check for duplicates $duplicate = mysql_query("SELECT * FROM coupons where email='$to'"); $affected_rows = mysql_num_rows($duplicate); if($affected_rows >= 1) { echo $sent; echo "Note: If you have already entered your e-mail address before, you will not get another e-mail message.
This is to prevent spamming."; die(''); } else { // create query $query = "INSERT INTO coupons (name, email) VALUES ('$name', '$to')"; // execute query $result = mysql_query($query) or die ("Error in query: $query. ".mysql_error()); // close connection mysql_close($connection); } //html message $message = " Chiropractic
Dear $name,
Thank you for visiting us at ourWebsite
Please print out your coupon and present it on your next visit. Thank you, and we hope to see you soon!

Sincerely, Alexander

optional message:
$opt

Your e-mail: $to
"; //header information $from = "no-reply@davepcguy.com"; $headers = "From: $from" . "\r\n"; $headers .= 'MIME-Version: 1.5.2' . "\r\n"; $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; $headers .= "BCC: reply@davepcguy.com" . "\r\n"; //functions $mail_sent= mail("$to", $subject, $message, $headers); //announcement echo $mail_sent ? $sent : "Mail failed"; echo $sent; } ?>
Share and Enjoy: