Drupal Howto: Adding a nifty metadata box to your nodes

In this tutorial, we will be adding a container with metadata about your node to our node template. To see what I mean, look at the bottom of this node page. Code snippet is plug-and-play, so you can plug it right into your custom theme, or one of my own Drupal themes.

The box in question can contain any node information we want, such as link information, to ensure the blogosphere can link to us effortlessly, or statistical data about our node (hits etc.).

For starters, we're going to add a simple container to our node that contains a html link, a BBcode link, and the trackback url of our node. Open up your node.tpl.php file, and add a new div element at the end:

<?php if ($page != 0) { ?>
<div class="metadata">
</div>
<?php } ?>

This is going to be our container, we only want to display it at full-node-view, hence the $page!=0 test.

Now we're ready to put stuff in our metadata container, the following code outputs the aforementioned link goodies:

<h5>BB code link for this article</h5>
<input onclick="this.focus();this.select()" type="text" value="[url=<?php print $base_url.drupal_get_path_alias($_GET['q']); ?>]<?php print $title ?>[/url]" />
<h5>HTML link code for this article</h5>
<input onclick="this.focus();this.select()" type="text" value="<a href=&quot;<?php print $base_url.drupal_get_path_alias($_GET['q']); ?>&quot;><?php print $title ?></a>" />
<h5>Trackback URL for this article</h5>
<input onclick="this.focus();this.select()" type="text" value="<?php print url('trackback/'. $node->nid, NULL, NULL, TRUE); ?>" />

The onlick parts make sure that it the effort required to copy and paste a link is truly minimal, upon clicking the input element all link code is immediately selected, ready for you to control-c it {or macbutton-c it ;)}. The other part that is important is what is in the value attributes, these code snippets are subsequently a bulletin board link, a html link, and a trackback url. The url that is linked to is derived by sticking the Drupal path to the base url. The link text is plain and simple our node title, but if you feel like SEOing it up, you can sneak some keywords in the link title part... for instance by replacing ‘<?php print $title ?></a>' with ‘free<?php print $title ?></a>'

To wrap it up, you might want to add some simple styles to your metadata box, something like this for example:

div.metadata {
background:#eee;
padding:5px;
width:60%;
margin:1em 0;
}
div.metadata input {
width:97%;
}
div.metadata h5 {
margin:0.5em 0;
}

For a next tutorial I will think of some other cool data to put in our metadata box, if you have any suggestions, feel free to post it in the comments here.