Apr 062011
 

Often, a web page contains not only a navigational menu (on the left or at the top of the page), but also a menu offering page-oriented (local) functions. You are likely to find buttons for bookmarking, permalinking, mailing, and printing at the right of the web page. In this article we describe the code to set up these four functions for your site.

Bookmark Button

Let’s start with the bookmark button. This is nothing more than a simple JavaScript command bookmarking a static link. Since this link is the same for all pages, we can have the title and link, $GLOBALS[“gp_site_title”] and “http://” . $GLOBALS[“gp_session_website”], respectively, set for all pages of the site.

Here is what our code looks like:

<!-- bookmark -->
<span><a href="javascript:bookmarksite('<?php echo (gp_display_core_text2html ($GLOBALS["gp_site_title"])); ?>','<?php echo (gp_display_core_text2html ("http://" . $GLOBALS["gp_session_website"])); ?>');" title="<?php echo (gp_display_core_text2html (_("Bookmark this site"))); ?>">
<img src="<?php echo (GP_PLATFORM_GRAPHICS . "design/" . $GLOBALS["gp_site_prefix"] . "_icon_bookmark-14x14.png"); ?>" width="14" height="14" alt="<?php echo (gp_display_core_text2html (_("bookmark"))); ?>" /></a>
<a href="javascript:bookmarksite('<?php echo (gp_display_core_text2html ($GLOBALS["gp_site_title"])); ?>','<?php echo (gp_display_core_text2html ("http://" . $GLOBALS["gp_session_website"])); ?>');" title="<?php echo (gp_display_core_text2html (_("Bookmark this site"))); ?>">
<?php echo (gp_display_core_text2html (_("bookmark site"))); ?></a></span>

The most important task of the function gp_display_core_text2html is to translate UTF8 strings to HTML strings using the PHP function htmlentities.

And here is how this snippet of code turns out for the site http://www.offerman.com/:

<!-- bookmark -->
<span><a href="javascript:bookmarksite('Offerman Consulting','http://www.offerman.com');" title="Bookmark this site">
<img class="icon" src="/portal/graphics/design/oc_icon_bookmark-14x14.png" width="14" height="14" alt="bookmark" /></a>
<a href="javascript:bookmarksite('Offerman Consulting','http://www.offerman.com');" title="Bookmark this site">bookmark site</a></span>

The bookmarksite function is defined in a separate JavaScript file, that we included before:

<!-- bookmarksite declarations-->
<script src="<?php echo (GP_PLATFORM_SCRIPTS); ?>bookmarksite/bookmarksite.js" type="text/javascript"></script>
<!-- bookmarksite declarations-->
<script src="/portal/scripts/bookmarksite/bookmarksite.js" type="text/javascript"></script>

The bookmarksite function is based on the bookmark link widget that can be found here:

http://www.dynamicdrive.com/dynamicindex9/addbook.htm

Permalink Button

Now we do the same for the permalink button. Since the link and title change with every page, we have to set those manually (for static pages), or have those generated automatically (for dynamic pages). Here we use the variables $GLOBALS[“gp_page_title”] . ” – ” . $GLOBALS[“gp_site_title”] and “http://” . $GLOBALS[“gp_session_website”] . $GLOBALS[“gp_page_url”], respectively. But the code for this button looks very similar to the snippet we wrote for the bookmark button:

<!-- permalink -->
<span><a href="javascript:bookmarksite('<?php echo (gp_display_core_text2html ($GLOBALS["gp_page_title"] . " - " . $GLOBALS["gp_site_title"])); ?>','<?php echo (gp_display_core_text2html ("http://" . $GLOBALS["gp_session_website"] . $GLOBALS["gp_page_url"])); ?>');" title="<?php echo (gp_display_core_text2html (_("Bookmark this page"))); ?>">
<img src="<?php echo (GP_PLATFORM_GRAPHICS . "design/" . $GLOBALS["gp_site_prefix"] . "_icon_permalink-14x14.png"); ?>" width="14" height="14" alt="<?php echo (gp_display_core_text2html (_("permalink"))); ?>" /></a>
<a href="javascript:bookmarksite('<?php echo (gp_display_core_text2html ($GLOBALS["gp_page_title"] . " - " . $GLOBALS["gp_site_title"])); ?>','<?php echo (gp_display_core_text2html ("http://" . $GLOBALS["gp_session_website"] . $GLOBALS["gp_page_url"])); ?>');" title="<?php echo (gp_display_core_text2html (_("Bookmark this page"))); ?>">
<?php echo (gp_display_core_text2html (_("permalink"))); ?></a></span>

And here is how this comes out for the page http://www.offerman.com/GPGPU/:

<!-- permalink -->
<span><a href="javascript:bookmarksite('<?php echo (gp_display_core_text2html ($GLOBALS["gp_page_title"] . " - " . $GLOBALS["gp_site_title"])); ?>','<?php echo (gp_display_core_text2html ("http://" . $GLOBALS["gp_session_website"] . $GLOBALS["gp_page_url"])); ?>');" title="<?php echo (gp_display_core_text2html (_("Bookmark this page"))); ?>">
<img src="<?php echo (GP_PLATFORM_GRAPHICS . "design/" . $GLOBALS["gp_site_prefix"] . "_icon_permalink-14x14.png"); ?>" width="14" height="14" alt="<?php echo (gp_display_core_text2html (_("permalink"))); ?>" /></a>
<a href="javascript:bookmarksite('<?php echo (gp_display_core_text2html ($GLOBALS["gp_page_title"] . " - " . $GLOBALS["gp_site_title"])); ?>','<?php echo (gp_display_core_text2html ("http://" . $GLOBALS["gp_session_website"] . $GLOBALS["gp_page_url"])); ?>');" title="<?php echo (gp_display_core_text2html (_("Bookmark this page"))); ?>">
<?php echo (gp_display_core_text2html (_("permalink"))); ?></a></span>

Do not forget to disable the permalink button for your home page, as it offers exactly the same functionality as your bookmark button there.

Mail Button

On to the mail button. Basically, this is nothing more than a mailto link starting up an editing window for a new message. Here we do some extra work to preset the subject and body of the message. As you can see, we use the same variables we did for the permalink button:

<!-- mail -->
<span><a href="mailto:?subject=<?php echo (gp_display_core_text2html (gp_display_core_text2url ($GLOBALS["gp_page_title"] . " - " . $GLOBALS["gp_site_title"]))); ?>&amp;body=<?php echo (gp_display_core_text2html (gp_display_core_text2url ("http://" . $GLOBALS["gp_session_website"] . $GLOBALS["gp_page_url"]))); ?>" title="<?php echo (gp_display_core_text2html (_("Mail this page"))); ?>">
<img src="<?php echo (GP_PLATFORM_GRAPHICS . "design/" . $GLOBALS["gp_site_prefix"] . "_icon_mail-14x14.png"); ?>" width="14" height="14" alt="<?php echo (gp_display_core_text2html (_("mail"))); ?>" /></a>
<a href="mailto:?subject=<?php echo (gp_display_core_text2html (gp_display_core_text2url ($GLOBALS["gp_page_title"] . " - " . $GLOBALS["gp_site_title"]))); ?>&amp;body=<?php echo (gp_display_core_text2html (gp_display_core_text2url ("http://" . $GLOBALS["gp_session_website"] . $GLOBALS["gp_page_url"]))); ?>" title="<?php echo (gp_display_core_text2html (_("Mail this page"))); ?>">
<?php echo (gp_display_core_text2html (_("mail"))); ?></a></span>

Note how we deploy the function gp_display_core_text2url to URL encode the link we set as a parameter in the mailto link (using the PHP function urlencode).

And here is the output for the GPGPU page we used before:

<!-- mail -->
<span><a href="mailto:?subject=GPGPU%3A+Modern+Commodity+Hardware+for+Parallel+Computing+-+Offerman+Consulting&amp;body=http%3A%2F%2Fwww.offerman.com%2FGPGPU%2F" title="Mail this page">
<img class="icon" src="/portal/graphics/design/oc_icon_mail-14x14.png" width="14" height="14" alt="mail" /></a>
<a href="mailto:?subject=GPGPU%3A+Modern+Commodity+Hardware+for+Parallel+Computing+-+Offerman+Consulting&amp;body=http%3A%2F%2Fwww.offerman.com%2FGPGPU%2F" title="Mail this page">mail</a></span>

Print Button

The print button requires a small script checking for older browser versions:

<!-- print -->
<script type="text/javascript">
var NS = (navigator.appName == "Netscape");
var VERSION = parseInt(navigator.appVersion);
if (VERSION > 3) {
  document.write('<span><a href="javascript:printit();" title="<?php echo (gp_display_core_text2html (_("Print this page"))); ?>"><img src="<?php echo (GP_PLATFORM_GRAPHICS . "design/" . $GLOBALS["gp_site_prefix"] . "_icon_print-14x14.png"); ?>" width="14" height="14" alt="<?php echo (gp_display_core_text2html (_("print"))); ?>" /></a> <a href="javascript:printit();" title="<?php echo (gp_display_core_text2html (_("Print this page"))); ?>"><?php echo (gp_display_core_text2html (_("print"))); ?></a></span><br />\n');
  }
</script>

The printit function is defined in a separate JavaScript file, that we included before:

<!-- printit declarations-->
<script src="<?php echo (GP_PLATFORM_SCRIPTS); ?>printit/printit.js" type="text/javascript"></script>
<!-- printit declarations-->
<script src="/portal/scripts/printit/printit.js" type="text/javascript"></script>

The printit function is based on the print button widget that can be found here:

http://www.dynamicdrive.com/dynamicindex9/other1.htm

Buttons at Work

That is all there is to it! You can check out these buttons at work at my personal site:

http://www.offerman.com/

  2 Responses to “Creating Bookmark, Permalink, Mail, and Print buttons (in PHP)”

  1. […] time, we created buttons for bookmarking, permalinking, mail forwarding, and printing. However, these days, your website can not be complete without some sort of social media […]

  2. sweet thanxs!

Leave a Reply