XFN Relationship Testing Page

This page contains various types of links with XFN relationships applied. Use browser DevTools to inspect each link and verify the rel attributes.

1. Inline Paragraph Links

Here is a link to my friend John who I met at a conference. I also work with Sarah, my colleague, and here is a link to my personal website.

2. Button Block with XFN

This button has friend + met + colleague relationships:

Visit My Coworker

3. Image Block with Link and XFN

Image linked to a friend's portfolio:

Portfolio

4. Multiple Buttons with Different XFN Relationships

My Spouse
Team Member
My Profile

5. Embed Block with XFN

YouTube embed from a friend's channel (XFN stored in metadata):

https://www.youtube.com/watch?v=dQw4w9WgXcQ

6. List with Inline Links

How to Verify XFN Attributes

  1. Right-click any link above and select Inspect
  2. Look for the rel attribute in the HTML
  3. You should see XFN values like rel="friend met"
  4. Note: Embed blocks store XFN in metadata but may not display in frontend HTML

Quick Console Test

Open your browser console (F12) and paste this code to find all XFN links:

const xfnValues = ['contact', 'acquaintance', 'friend', 'met', 'co-worker', 'colleague', 'co-resident', 'neighbor', 'child', 'parent', 'sibling', 'spouse', 'kin', 'muse', 'crush', 'date', 'sweetheart', 'me'];
document.querySelectorAll('a[rel]').forEach(link => {
  const relValues = link.rel.split(' ');
  const xfnFound = relValues.filter(val => xfnValues.includes(val));
  if (xfnFound.length > 0) {
    console.log('✓ XFN Link:', link.textContent.trim());
    console.log('  XFN:', xfnFound.join(', '));
    console.log('  Full rel:', link.rel);
    console.log('---');
  }
});

Expected Results

When you inspect the links on this page, you should see: