Social Bookmarking on CDN

By: Yorai Aminov

Abstract: Read this to learn how to use tags on the Developer Network

    Social Bookmarking

The Developer Network supports social bookmarking internally and externally. External bookmarks are stored outside CDN, on popular social bookmarking sites. To bookmark a CDN page on another site, simply click the relevant link in the “Share This” area of the page:

Hide image

You can also use CDN’s internal social bookmarking by tagging articles.

    Article Tags

Article pages on CDN include an “Article Tags” area which shows article tags as a tag cloud:

Hide image

The tag size reflects its popularity: the more users apply the tag to the article, the bigger the tag. You can see how many users applied the tag to the article by hovering over the tag:

Hide image

Each tag is a link. Clicking on a tag displays a page listing all articles on the current site that have the specified tag.

    Adding and Removing Tags

Logged-in users can also add and remove tags. When logged-in, the “Article Tags” area contains some additional controls:

Hide image

The checkbox next to each tag indicates whether you have already applied this tag to the article. If the checkbox is checked, clicking it would remove your tag. If no other users have attached the same tag to the article, the tag would disappear. If the checkbox is clear, clicking the checkbox adds the tag to your set of tags for the article.

You can also type in new tags. Like other CDN content, tags are multi-lingual. Before typing in a new tag, select the appropriate language from the “Tag Language” drop-down. By default, CDN selects the language you use to view the site.

When you start typing, the page looks up similar tags, and displays an auto-complete drop-down:

Hide image

The auto-complete drop down only lists tags in the language selected in the “Tag Language” drop-down.

To add a tag, click on the “Add Tag” button or press Enter. Because tags are updated using AJAX, it may take the tag cloud a few seconds to update.

Note: on some browsers, pressing Enter may not work, and you’ll have to click the “Add Tag” button. We’re investigating this issue and hope to find a fix soon.

    Tagged Article Lists

Clicking on a tag in a tag cloud displays a page listing all articles with that tag applied. The list is identical to CDN’s normal article lists, except articles are filtered by the selected tag. You can even use CDN’s normal navigation hierarchy while maintaining the tag filter: clicking on any navigation link goes to the list page for that navigation area, including the current tag. The “bread crumb” links, however, do not include the tag filter, so you can simply click on any of them to remove the tag filter.

The current tag name is shown above the article list:

Hide image

    Editing and Localizing Tags

Tagging is a community process, and community members can contribute not only by adding new tags, but by maintaining existing tags. If you see a typo in a tag name, for example, or see a tag with inappropriate language, you can fix it yourself. You can also translate tags so that users using other languages can see the tag. All of this can be done directly on the tagged article list page.

If you’re logged-in, a small icon appears next to the tag name:

Hide image

Clicking on the icon shows a pop-up dialog, allowing you to change tag names in any supported language:

Hide image
Click to see full-sized image

Using the dialog, you can change, add, and remove names in all supported languages. Clicking the “Update” button updates the database, and affects all users. Of course, a name in at least one language is required for each tag.

    Tag Clouds

In addition to tags for a single article, CDN shows tag clouds on article list pages. These clouds show the most popular tags attached to content in the current area:

Hide image

Here, again, tag size indicates its popularity, but instead of reflecting the number of users who’ve used the tag, the size reflects the number of articles with that tag attached. Again, hovering over a tag shows additional information:

Hide image

Note that only tags in your selected language or English are displayed in the tag cloud.

    Viewing All Tags

To view all tags used on the site, go to the Tags on CDN page:

Hide image
Click to see full-sized image

This page shows a tag cloud with all tags used on the site. Again, only tags in English or in your selected language are shown.

By default, tags are sorted by name. You can click on the “Sort by Size” link to sort tags by size:

Hide image
Click to see full-sized image

    Localizing the Tagging User Interface

Like most page elements in the Developer Network, the tagging user interface can be localized using the CDN Strings Editor. You can help support your spoken language in the tagging user interface by translating the strings listed here.

    Article Tags

The following strings are used by the “Article Tags” module, which displays tags for a single article and allows users to add and remove tags:

String name

Sample value

Notes

StrTagsArticle

Article Tags

Article tags module title

StrTagsUsersOneTooltip

Tagged by one user

Tooltip used for tags from a single user

StrTagsUsersCountTooltip

Tagged by {0} users

Tooltip used for tags from multiple users

StrTagsTagLanguage

Tag Language

Tag language drop-down caption

StrTagsTag

Tag

Tag edit box caption

StrTagsAddTag

Add Tag

Text for the "Add Tag" button

    Tag Clouds

The following strings are used by the “Tag Cloud” module, which shows tag clouds on article list pages:

String name

Sample value

Notes

StrTagsPopular

Popular Tags

Popular tags cloud module title

StrTagsContentCountTooltip

Used in {0} articles

Tooltip used for tags with multiple articles

StrTagsContentOneTooltip

Used in one article

Tooltip used for tags with a single article

    All Tags Page

The following strings are used by the “All Tags” page, which shows a tag cloud for all tags used on the site:

String name

Sample value

Notes

StrTagsPageTitle

Tags on {0}

Page title, {0} is replaced by site name

StrTagsPageBreadCrumb

Tags

Page name for the bread crumb

StrTagsSortByName

Sort by name

Link to sort tags by name

StrTagsSortBySize

Sort by size

Link to sort tags by size

StrTagsTotalTags

Total tags listed

Label for total number of tags listed

Note: Additional strings may be added in the future. By convention, all tagging related string names will begin with “StrTags”.

Server Response from: ETNASC02