User Tools

Site Tools


web_development:share_this_page_corner_banner

I really like the idea of these all-in-one sharing systems that let your site visitors share your web site's content on their favorite social networking sites. I like the idea so much that I installed one. However, as you probably have noticed, most of these services are hosted. If their server goes down, your site loses the content, or worse-yet, breaks.

So, in the interest of openness and stability, here's some code that will help get you started in creating your own “Share This Site” system, which is fully hosted on your own web server.

Don't forget to upload the icons folder, your corner banner graphic, and set up all the parameters in the source code according to their locations.

Download the icon pack banner.tar.gz

This script adds a top-right corner banner to your site (which you will need to modify until someone creates a “branded” one). When clicked, the banner pops out a “Share This Page” window.

If you add the required code to your own site's template, the PHP portions will automatically modify each page's share links, so the currently viewed page is the one being shared (eg. no need to do this manually on each page).

Requires * PHP on your web server * Icon pack to be decompressed and uploaded to icons/ folder

Currently supported social networking sites are: * Digg * Email * Facebook * Twitter

Add to your site's <head> section:

share_page_corner_banner_header.php
<!-- Begin Share This Page -->
<?php
  $fileURL = $_ENV["REQUEST_URI"];
  if (!$fileURL) $fileURL = $_SERVER["SCRIPT_URL"];
  if (!$fileURL) $fileURL = $_SERVER["REQUEST_URI"];
  $_SERVER['FULL_URL'] = 'http';
  if($_SERVER['HTTPS']=='on'){$_SERVER['FULL_URL'] .=  's';}
  $_SERVER['FULL_URL'] .=  '://';
  if($_SERVER['SERVER_PORT']!='80') $_SERVER['FULL_URL'] .=  $_SERVER['HTTP_HOST'].':'.$_SERVER['SERVER_PORT'].$fileURL;
  else
  $_SERVER['FULL_URL'] .=  $_SERVER['HTTP_HOST'].$fileURL;
?>
<script type="text/javascript" language="JavaScript">
<!-- Pop-out div code Copyright 2006,2007 Bontrager Connection, LLC
// http://bontragerconnection.com/ and http://www.willmaster.com/
// Version: July 28, 2007
var cX = 0; var cY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
dd.style.display = "block";
}
//-->
</script>
<!-- End Share This Page -->

Add to your site's <body> section:

share_corner_banner_body.html
<!-- Begin Share This Page -->
<img alt="Click Here" style="z-index:10000; position: absolute; top: 0; right: 0; border: 0;"
  src="corner_banner_205.png" width="205" height="205" border="0" usemap="#corner_banner" />
<map name="corner_banner"><area shape="poly" coords="0,0,201,202,202,128,75,0" href="javascript:ShowContent('sharethispage')" /></map>
<div id="sharethispage" style="display:none; opacity:0.9; filter:alpha(opacity=90);
      position:absolute; 
      top: 80px;
      right: 80px;
      border: solid 1px #777777; 
      background-color: white; 
      z-index:10001;
      width: 200px;
      height: 150px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" height="100%">
<tr><td bgcolor="#555555" style="font-family:Arial; font-size:10px; padding-left:5px; color: #ffffff;">Share This Page</td><td bgcolor="#555555" align="right"><a style="padding-right:5px; font-family: Arial; font-weight: bold; text-decoration: none; color: #ffffff;" href="javascript:HideContent('sharethispage');">x</a></td></tr>
<tr height="100%"><td align="center" colspan="2">
 
<a style="padding:5px;" href="http://digg.com/submit?url=<?php echo $_SERVER['FULL_URL']; ?>" target="_blank"><img border="0" src="icons/digg.png" width="16" height="16" title="Digg this page"></a>
 
<a style="padding:5px;" href="mailto:?subject=I wanted to share this page with you&body=Check out <?php echo $_SERVER['FULL_URL']; ?>" target="_blank"><img border="0" src="icons/email.png" width="16" height="16" title="Share this page by email"></a>
 
<a style="padding:5px;" href="http://www.facebook.com/share.php?u=<?php echo $_SERVER['FULL_URL']; ?>" target="_blank"><img border="0" src="icons/facebook.png" width="16" height="16" title="Share this page on Facebook"></a>
 
<a style="padding:5px;" href="http://twitter.com/home?status=Currently reading <?php echo $_SERVER['FULL_URL']; ?>" target="_blank"><img border="0" src="icons/twitter.png" width="16" height="16" title="Tweet about this page on Twitter"></a>
 
</td></tr>
</table>
</div>
<!-- End Share This Page -->

References

Based on Corner_Banner

Icon Pack: http://www.komodomedia.com/blog/2008/12/social-media-mini-iconpack/

Pop-Out Code: http://www.willmaster.com/blog/css/floating-layer-at-cursor-position.php

web_development/share_this_page_corner_banner.txt · Last modified: 2012/02/01 10:38 by garbee