Creating your own personal bookmark site like Delicious in Drupal 7

This guide will show you how to make a bookmarking site similar to Delicious where you can add a URL with an optional description and tags which can then be searched on using the internal search or browse using tags.

Contrib modules required:

Place these in your sites/all/modules directory.

Install the modules

There are lots of core modules that are installed by default (if you chose the standard install profile) which aren't needed which we can get rid of as well as requiring some additional contrib modules which are listed above.

Below is a list of all the required modules and some optional modules (from top to bottom of the modules list), everything else can be disabled and uninstalled:

  • Block (optional)
  • Contextual links (optional)
  • Database logging (optional)
  • Field
  • Field SQL storage
  • Field UI
  • Filter
  • Help (optional)
  • Node
  • Options
  • Overlay (optional)
  • Search (optional)
  • System
  • Taxonomy
  • Text
  • Toolbar (optional) - The tutorial will have instructions for navigating using the toolbar
  • Update manager (optional)
  • User
  • Chaos tools
  • Page manager
  • Views content panes
  • Link
  • Automatic nodetitles
  • Prepopulate
  • QuickPost Bookmarklet
  • Token
  • Panels
  • Views
  • Views UI

If you have installed the Drupal using the standard install profile then you can skip to Creating the content type + fields as the taxonomy is already set up for you.

Creating the taxonomy vocabulary

If you have the Toolbar module installed go to Structure > Taxonomy otherwise go to admin/structure/taxonomy.

Click the + Add vocabulary button.

Enter a name for your taxonomy, I am just going to use Tags, the same as the Drupal standard install profile. Optionally enter a description and press Save.

Creating the content type + fields

If you have the Toolbar module installed go to Structure > Content types otherwise go to admin/structure/types.

Click the + Add content type button.

For the Name enter Bookmark and optionally add a description.

Automatic title generation

Set to Automatically generate the title and hide the title field and for the time being leave the field empty, we will populate this with the plain text URL for the bookmark but we need to create the field first.

Submission form settings and Publishing options

You can leave both of these on their defaults, but you may as well set Preview before submitting to Disabled.

Display settings

If you have a sole user adding bookmarks or don't want to show the author and creation date by default, uncheck this box.

Click Save and add fields.

Fields

Manage fields

First thing to do is to delete the standard body field as this is overkill for a basic description field.

Now we will create three new fields, these are:

URL
This will be a Link field and needs to be set to required.
Description
Just a simple Long text field with 2 or 3 rows and isn't a required field.
Tags
Set this to Term reference and the Widget to Autocomplete term widget (tagging), set the Vocabulary to the Tags vocabulary that already exists or that you created above.

Manage display

Under Custom Display Settings uncheck all the boxes and press Save.

Order and configure the fields as below:

URL
Set Label to >Hidden< and Format to URL, as link.
Description
Set Label to >Hidden< and Format to Default or Plain text.
Tags
Set Label to Inline and Format to Link.

Press Save.

Creating the views to display the bookmarks

Create some dummy bookmarks so you can use the live preview functionality in Views to make sure they are working correctly.

If you have the Toolbar module installed go to Structure > Views otherwise go to admin/structure/views.

Click the + Add new view button.

For the view name, call it whatever you want, I will call it Bookmarks listing, optionally add a description.

Set the type to Bookmark and give the page a title and a path. Under Display format set it to an Unformatted list of fields. You may also change the Items to display.

Press the Continue & edit button.

Fields

First, delete the Content: Title field which will be there by default by clicking it and pressing the Remove button.

Now we will add the new fields which we want to display which will be the Content: URL, Content: Description and Content: All taxonomy terms. So check all of those boxes and press the Add and configure fields button.

Content: All taxonomy terms

Leave the Create a label option checked and rename the Label to Tags. Leave the rest as they are.

Under Style settings, check the box for Customize field HTML and set it to EM and check the box for Customize label HTML and set to STRONG.

Under No results behavior, check the Hide if empty box. Press the Apply (all displays) button.

Content: Description

Uncheck the Create a label box and set the Formatter to Plain text. Under No results behavior check the Hide if empty box and press the Apply (all displays) button.

Content: URL

Again, uncheck the Create a label box and set the Formatter to URL, as link. Under Style settings, check the box for Customize field HTML and set the HTML element to H2. Press the Apply (all displays) button.

Save the view by pressing the Save button at the top right.

Navigate to the page you defined when setting up your view. If your bookmarks that you created before are appearing, you have done everything right.

Configure homepage

Now we will set this to be our new homepage. On the toolbar go to Configuration > Site information or directly to admin/config/system/site-information.

For Default front page, change this to the URL of your view.

Configure the taxonomy pages

If you have the Toolbar module installed go to Structure > Views otherwise go to admin/structure/views.

Next to the bookmarks_listing view we created before, from the menu on the right, click the arrow and choose clone.

Set the View name to something like bookmark_terms.

Where it says Display name: Page on the right hand side where it says View page click the down arrow and chose delete page then press Save to save the view. The displays list should now just say Master.

Expand the Advanced section on the right hand side and click add next to Contextual filters.

Check Content: Has taxonomy term ID and click the Add and configure contextual filters button.

Set When the filter value is not available to Provide default value and set the Type to Taxonomy term ID from URL.

Press the Apply button. Then save the view.

If you have the Toolbar module installed go to Structure > Panels otherwise go to admin/structure/panels.

Under Manage pages, enable Taxonomy term template. Then when the page reloads, click Edit next to Taxonomy term template.

Add a new variant and call it what you want. Leave Variant type set to Panel.

If you have multiple vocabularies, read the following otherwise click Create variant and skip below the indented text.

If you have multiple vocabularies we only want to show our view on the right terms, so check the Selection rules and press Create variant.

In the drop down select Taxonomy: vocabulary and click Add. Check the vocabulary that is set for you tags field and press Save.

Click Continue.

Under Category select Columns: 1 and select the Single column layout. Then click Continue.

Under Panel settings we can leave everything set to the defaults and press Continue.

On the Panel content section, click on the cog at the top left of the Middle column panel and select the Add content option.

On the left hand side select Views, then select bookmark_terms. Click Continue for Select display then on the next screen under Content: Has taxonomy term ID set this to Term ID and press Finish.

Click Create variant then on page load click Update and save.

Now if you visit one of taxonomy/term/xx pages, the view should appear and show the bookmarks in the same format.

Comments

I like this idea. Apologies for newbie question - is it simple to extract the stored bookmarks in some portable format that standard bookmarking sites understand?

With Views you can do pretty much anything, or write a custom module to export the data in to whatever format you required.

do you have an example of a site that has this so I can see the result?

No. It would be very similar to Delicious in functionality but obviously the look of the site would come down to how you theme it. I don't think an example would really add much.