Harvard logowebring
back to webring

Widget Generator

Add the Harvard Webring widget to your site to connect with fellow Harvard students and navigate through the webring.

How to Join the Webring

  1. Add the widget code to your website, preferably in the footer or sidebar.
  2. Submit a pull request to theHarvard Webring GitHub repositorywith your site details.
  3. Wait for approval (we'll check that you're a Harvard student and that the widget is properly implemented).

Generate Your Widget Code

Enter your website URL to generate code that links to your site in the webring.

Widget Preview

←Harvard Webring→

Implementation Code

Choose the code snippet that matches your website's technology stack:

HTML

<div style="display: flex; align-items: center; gap: 8px;">
  <a href="https://harvardring.com/#your-site-here?nav=prev">←</a>
  <a href="https://harvardring.com/#your-site-here" target="_blank">
    <img src="https://harvardring.com/Harvard_University_shield.svg" alt="Harvard Webring" style="width: 24px; height: auto;"/>
  </a>
  <a href="https://harvardring.com/#your-site-here?nav=next">→</a>
</div>
<!-- Replace 'your-site-here' with your actual site URL -->

React (JSX)

<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
  <a href={`https://harvardring.com/#yourSiteUrl?nav=prev`}>←</a>
  <a href={`https://harvardring.com/#yourSiteUrl`} target="_blank" rel="noopener noreferrer">
    <img
      src="https://harvardring.com/Harvard_University_shield.svg"
      alt="Harvard Webring"
      style={{ width: '24px', height: 'auto' }}
    />
  </a>
  <a href={`https://harvardring.com/#yourSiteUrl?nav=next`}>→</a>
</div>

Svelte

<div style="display: flex; align-items: center; gap: 8px;">
  <a href="{baseUrl}/#{websiteUrl}?nav=prev">←</a>
  <a href="{baseUrl}/#{websiteUrl}" target="_blank" rel="noopener noreferrer">
    <img
      src="{baseUrl}/Harvard_University_shield.svg"
      alt="Harvard Webring"
      style="width: 24px; height: auto;"
    />
  </a>
  <a href="{baseUrl}/#{websiteUrl}?nav=next">→</a>
</div>

<script>
  const baseUrl = 'https://harvardring.com';
  const websiteUrl = 'your-site-url';
</script>

Vue

<template>
  <div style="display: flex; align-items: center; gap: 8px;">
    <a :href="`${baseUrl}/#${websiteUrl}?nav=prev`">←</a>
    <a :href="`${baseUrl}/#${websiteUrl}`" target="_blank" rel="noopener noreferrer">
      <img
        :src="`${baseUrl}/Harvard_University_shield.svg`"
        alt="Harvard Webring"
        style="width: 24px; height: auto;"
      />
    </a>
    <a :href="`${baseUrl}/#${websiteUrl}?nav=next`">→</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseUrl: 'https://harvardring.com',
      websiteUrl: 'your-site-url'
    }
  }
}
</script>