How to add "Email This Article to a Friend" into your WordPress site without using a plugin
Advertisement
As we created interesting posts in our site and which are worth of sharing into our friends, we open use other functionality so that user can share, send posts to their friends, other sites owner are adding social sites to share and send post to their friends and followers but this time I will try to explain how to create Email This Article to Friend without using a plugin and or social sites.
In this tutorial we need to edit single.php file in our current theme as the Send button only display in single post.
Okay, let’s start.
PHP
This contains small information use to send email, like Post title, Post content and post URL. This snippet should put before the HTML form.
<?php
session_start();
$message = get_the_content('readmore »', false);
//filter the content to display HTML tag like <p>
$message = apply_filters('the_content', $message);
$message = str_replace(']]>', ']]>', $message);
$title = get_the_title(); //get post title and assign into $title variable
$site_url = get_permalink(); //get post permalink and assign into $site_url variable
$_SESSION['message'] = $message;
$_SESSION['title'] = $title;
$_SESSION['site_url'] = $site_url;
?>
HTML
This contains our HTML form for sending data.
<div class="email-to-friend">
<div class="top-arrow"></div>
<h4>E-mail this interesting post to a friend.</h4>
<div class="message"></div>
<form id="emailform" method="post">
<p>
<label for="to">E-mail to:</label>
<input type="text" id="to" name="to" class="text" value="" />
</p>
<p>
<label for="sender">Sender Name:</label>
<input type="text" id="sender" name="sender" class="text" value="" />
</p>
<p>
<label for="your_email">Your Email:</label>
<input type="text" id="your_email" class="text" name="your_email" value="" />
</p>
<p>
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" class="text" value="" />
</p>
<p><input type="submit" value="Send" name="send_btn" class="send-btn" /> or <a href="javascript: void(0);" id="hide-form">Cancel</a></p>
<input type="hidden" name="action" value="email-to-friend" />
</form>
</div>
Javascript
This contain JS script for popup HTML or simply a dialog box form and send data to the server.
<script type="text/javascript">
var ryans = jQuery.noConflict();
ryans(document).ready(function(){
// Display our form
ryans("#show-form").click(function(e){
ryans(".email-to-friend").fadeIn("slow")
.css('top', e.pageY + 16)
.css('left', e.pageX)
.appendTo('body');
});
// Hide our form
ryans("#hide-form").click(function(){
ryans(".email-to-friend").fadeOut("slow");
});
});
// Add submit event to the form.
ryans("#emailform").submit(function(){
eaction = this.action.value;
eto = this.to.value;
esender = this.sender.value;
eyour_email = this.your_email.value;
esubject = this.subject.value;
send_btn = this.send_btn;
// send data using jQuery.post
ryans.post("<?php bloginfo('template_directory') ?>/includes/email-ajax.php", {action: eaction, to: eto, sender: esender, your_email: eyour_email, subject: esubject}, function(data){
if(data=='0') {
ryans(".message").html('<p class="error">All fields are required.</p>');
} else if(data=='1') {
ryans(".message").html('<p class="error">Invalid Email Address, Please try again.</p>');
} else {
send_btn.value="Sent";
send_btn.disabled=true;
ryans(".message").html('<p class="success">Post successfully emailed to your friend ;)</p>');
}
});
return false;
});
</script>
Confused?
Okay I will explain how the above javascripts works.
ryans("#show-form"):We simply add an event and display the form if #show-form is triggered.ryans("#hide-form"):This will use to hide the form.ryans.post():We’re using jQuery.post to send data(s) to the server, visit jQuery site for more information.
ajax-email.php
This contains PHP script that accepts data that are being sent from javascript above.
<?php
session_start();
$err = '';
$success = '';
if( isset($_POST['action']) && $_POST['action']=='email-to-friend' ) {
$to = $_POST['to'];
$sender = $_POST['sender'];
$your_email = $_POST['your_email'];
$subject = $_POST['subject'];
if( $to == "" || $sender == "" || $your_email == "" || $subject == "" ) {
echo '0';
} else if(!filter_var($to, FILTER_VALIDATE_EMAIL)) {
echo '1';
} else if(!filter_var($your_email, FILTER_VALIDATE_EMAIL)) {
echo '1';
} else {
$body = $_SESSION['message'];
$title = $_SESSION['title'];
$site_url = $_SESSION['site_url'];
$message = '
<html>
<head>
<title>'. $title .'</title>
</head>
<body>
<h2>'. $title .'</h2.
'. $body .'
<p>Having trouble viewing this email? <a href="'. $site_url. '">Click here</a>.</p>
</body>
</html>
';
$headers = 'From: '. $sender .' <'. $your_email .'>' . "\r\n";
$email = mail( $to, $subject, $message, $headers );
if( $email ) {
echo '2';
}
}
}
?>
CSS
To beautify our send button and form we need to add CSS code, copy and paste below code to apply.
.show-form{
padding: 4px 6px 4px 26px;
background: #ECEEF5 url('images/email.png') no-repeat 6px center;
border: 1px solid #CAD4E7;
font-size: 12px;
color: #3B5998;
text-decoration: none;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
.show-form:hover{
background: #E2E6EF url('images/email.png') no-repeat 6px center;
text-decoration: none !important;
}
.email-to-friend{
z-index: 99999;
background: #fff;
border: 1px solid #323232;
padding: 10px;
position: absolute;
display: none;
}
.email-to-friend a:hover{
text-decoration: underline;
}
.email-to-friend .top-arrow{
margin-top: -15px;
background: url('images/top-arrow.png') no-repeat 2% top;
width: 9px;
height: 5px;
display: block;
}
.email-to-friend label{
width: 88px;
position: absolute;
cursor: pointer;
}
.email-to-friend .text{
padding: 4px;
width: 200px;
margin-left: 90px;
border: 1px solid #BDC7D8;
}
.email-to-friend .send-btn{
width: 60px;
padding: 4px 6px;
background: #ECEEF5;
border: 1px solid #CAD4E7;
font-size: 12px;
cursor: pointer;
color: #3B5998;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
.email-to-friend .message {
margin: 6px 0;
}
.email-to-friend .message p{
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
.email-to-friend .success {
padding: 4px 8px;
background: lightYellow;
border: 1px solid #E6DB55;
}
.email-to-friend .error {
padding: 4px 8px;
background: #FFEBE8;
border: 1px solid #C00;
}
That’s it, this tutorial is quite long but it contains everything you need ;), you can share your idea below.
Advertisement