How to Use a Script in HTML to Create My Own "Share This" Button

You can allow your users to share your online content with the HTML mailto attribute.

In today's world of social networking and interactive media, allowing your users to share your online content with their friends and associates is a useful method of driving traffic to your website. But even if you aren't familiar with the intricacies of dynamic web scripting, it is possible to add a simple "Share This" button to your Web page that will allow your reader to share the link to it via e-mail. The process is simple, and requires only a few lines of code.

Instructions

1. Open the Web page to which you wish to add a "Share This" button in your preferred text editor.

2. Move your cursor to the location in the document where you wish to place the "Share This? button and insert the following code:

   <div style="width:80px; height:15px; background-color:#0000FF; text-align:center">

   <a style="color:#FFFFFF" href="mailto:?subject=this is a subject&body=[sub]" onclick="this.href = this.href.replace('[sub]',window.location)">Share This</a>

   </div>

3. Tweak the inline styles of the DIV container and the <a> tag to get the appearance that you desire.

4. Save and publish your web page. Your users will now be able to click on your "Share This" button and open their default e-mail client with a new message that they can send to whoever they like, containing the URL of whatever page happens to be in their window at the time. This makes the code in Step 2 usable as is on any page you desire.

References

• "Creating Web Pages For Dummies"; Bud E. Smith; 2008

Resources

• CSSDesk - Online CSS Sandbox