Ask and Answer

How To Make A Dynamic Page On Blogspot, Using an external server to make your pages hosted on blogspot dynamic

May 26th, 2007, Php, Javascript, General, admin,  Print This Post

Good morning everyone.

Have you ever wondered how to allow your visitors to edit content on your blog? Like adding a post straight off the page, adding a link, editing your profile etc. This will be extremely useful if you want your visitors to contribute to your blog besides writing comments or tagging.

1. Adding a post straight off the page.

Go to blogger.com, login, select your blog.
Go to settings -> email.

By enabling blog email, you can now add a post by simply sending an email to the address you specified. The address should look something like:

yourusername.secretpass@blogger.com

Now open up a text editor, and paste this code (note the italics):
CODE

<?php

/*******************************************
This script sends an email to Blogger
to post on blogspot.com
Called by: form on blogspot.com
*********************************************/

$subject = $_POST[”subject”];
$headers = $_POST[”author”];
$message = $_POST[”message”].”
“.$headers;
$email = “[i]enter your blogger email here. make sure it is in the inverted commas[/i]”;
mail($email,$subject,$message);
header (”location: [i]enter your blogspot address here. make sure you add http:// before the address[/i]”);
?>

Save the above file as a php file.
Upload the php file on a server that supports php.

Go to blogger templates, and paste the following code (note the italics) where you want the form to appear:

CODE

<form action=”[i]enter your php script URL here[/i]” method=”post” name=”post”>

<table>

<tr>

<td><label>Author</label></td>

<td><input type=”text” name=”author” /></td>

</tr>

<tr>

<td><label>Subject</label></td>

<td><input type=”text” name=”subject” /></td>

</tr>

<tr>

<td><label>Post</label></td>

<td><textarea name=”message”></textarea></td>

</tr>

<tr>

<td><input type=”submit” value=”Post!” /></td>

</tr>

</table>

</form>

Tada! Now your visitors can use the form to add a post. The form wil call your php script, which will send an email to blogger and redirect back to your page.

2. Changing content.

For this tutorial, I will use “Links” as an example. The script will let user add links to your ‘links’ section.

Go to blogger template and paste the following code to create a links section. Do not put anything inside the div:

CODE

<div id=”links></div>

Now open up a text editor and paste the following (note the italics):

CODE

<?php

/*********************************************
This script appends to the javascript
links.js
Called by: form on blogspot.com
Calls: links.js
*********************************************/

//open file
$quotefile = fopen (”links.js”,a);
flock ($quotefile,LOCK_EX);

//get contents
$time = “<h3>”.$_POST[”time”].”<br>”;
$title = $_POST[”title”].”</h3>”;

$quote = str_replace (”
“,”<br>”,$_POST[”quote”]).”<br>”;

$msg = “quotes = quotes + \”".$time.$title.$quote.”\”;”;

//write
fwrite ($quotefile, $msg);

//close
flock ($quotefile, LOCK_UN);
fclose ($quotefile);

header(”location: [i]enter your page address here. don’t forget the http://[/i]”);

?>

Save as a php file.
Next use the text editor again to create a file:
CODE

// JavaScript Document

var quotes = “[i]enter your formatting here. e.g. <h1>links</h1>[/i]”;

Save as links.js.
Upload both files to your server.

Go to blogger template, add the following at the top of the script, within the head tag:
CODE

<script type=”text/javascript” src=”[i]enter the address of links.js. Make sure you have the http://[/i]”>
</script>

Add this to the body:
CODE

<form action=”[i]enter the address of your php script. Make sure you have the http://[/i]” method=”post” name=”post”>
<table>
<tr>
<td><label>Date/Time</label></td>

<td><input type=”text” name=”time” /></td>
</tr>
<tr>
<td><label>Title</label></td>
<td><input type=”text” name=”title” /></td>
</tr>
<tr>
<td><label>Quote</label></td>

<td><textarea name=”quote”></textarea></td>
</tr>
<tr>
<td><input type=”submit” value=”Add!” /></td>
</tr>
</table>
</form>

Now, go to the end of the html, and add this before closing the body tag:
CODE

<script language=”javascript” type=”text/javascript”>
//print quotes
var printTo = document.getElementById(’links’);
printTo.innerHTML = quotes;
</script>

And you are done. The form will call for the php script, which will append to links.js. The html will load links.js and the variable quotes. The last script in the html will get the div “links” and write the contents of the string quotes to the innerHTML.

del.icio.us Digg it Earthlink Furl iFeedReaders ma.gnolia Maple.nu Netvouz Netscape RawSugar reddit Scuttle Shadows Simpy Spurl StumbleUpon Wink Yahoo MyWeb

Leave a reply