🇰🇷 한국어 🇺🇸 English
Loopback Social Logo

Loopback Social

Loopback Social is a platform for connections between communities.

Through this website, community administrators can obtain a black banner that can be attached to the top of each community. This banner displays the names of other communities participating in the campaign.

Though it's a loose connection, we started this project with the idea of appealing that communities are connected to each other, and sometimes incorporating various means such as event promotion banners or pop-ups.

Through this project, we aim to symbolize connections between communities and operate as a collaborative campaign.

Step 1. Installation

To add a banner to the top of your website or forum, add the following line of code just before the </body> tag (closing body tag) in your HTML file or skin body.

<script src="https://loopback.social/banner.js" defer></script>

Customizing the Banner Color (Optional)

Use the data-color attribute to change the banner background color, and data-textcolor to change the text/link color. Defaults are black background (#000000) with white text (#ffffff). Use a hex color code; the leading # is optional.

<script src="https://loopback.social/banner.js" data-color="#005a9c" data-textcolor="#ffffff" defer></script>

Customizing the Banner Language (Optional)

You can set the banner display language using the data-lang attribute. The default is auto, which detects the language from the page's lang attribute or URL. To force a specific language, set it to ko or en.

<script src="https://loopback.social/banner.js" data-lang="ko" defer></script>

You can combine both color and language options.

<script src="https://loopback.social/banner.js" data-color="#005a9c" data-textcolor="#ffffff" data-lang="en" defer></script>

Step 2. Get Your Name Out There

There are two main ways to participate in loopback.social:

Step 3. Submit News

If you have news to show in the news ticker at the bottom of the banner, you can edit docs/news.json or submit reports through the News Submission issue template on GitHub.

news.json Item Format

{
  "start": "YYYY-MM-DD HH:mm:ss",
  "end": "YYYY-MM-DD HH:mm:ss",
  "timezone": "+09:00",
  "message": {
    "ko": "Korean message",
    "en": "English message"
  },
  "link": "https://example.com",
  "display": true
}

Field Reference

Field Required Description
start✅Banner display start (YYYY-MM-DD HH:mm:ss)
end✅Banner display end (YYYY-MM-DD HH:mm:ss)
timezone❌Timezone. Defaults to UTC if omitted. Accepts both UTC offsets ("+09:00") and IANA names ("Asia/Seoul", case-insensitive)
event_start❌Actual event start datetime, used by news.ics and the Schema.org Event payload. Falls back to start
event_end❌Actual event end datetime. Falls back to end
category❌One of event / campaign / release / recruit / announcement. Setting event (or providing event_start) ensures the item appears in the calendar feed
location❌Human-readable venue name. Used as the calendar LOCATION and Schema.org Event.location.name
message✅Message to display. Either a plain string or a localized object {"ko": "...", "en": "..."}
link❌URL to navigate on click. Either a plain string or a localized object {"ko": "...", "en": "..."}
display✅Whether to show the item. Accepts true, "true", "yes", or "1" as enabled
id❌Stable identifier used as the RSS GUID / iCalendar UID. Derived from message+start when omitted

Example 1 — Simple announcement (banner only)

{
  "start": "2026-03-01 00:00:00",
  "end": "2026-03-31 23:59:59",
  "timezone": "Asia/Seoul",
  "message": {
    "ko": "3월 밋업에 참여하세요!",
    "en": "Join our March meetup!"
  },
  "link": {
    "ko": "https://example.com/ko",
    "en": "https://example.com/en"
  },
  "display": true
}

Example 2 — Event (correctly surfaced in the calendar feed)

The entry below appears in the banner from March 1 through March 14, but the actual event runs March 14, 14:00–17:00. Setting category, event_start, event_end, and location together ensures news.ics and events.jsonld reflect the exact event time and venue.

{
  "start": "2026-03-01 00:00:00",
  "end": "2026-03-14 17:00:00",
  "timezone": "Asia/Seoul",
  "event_start": "2026-03-14 14:00:00",
  "event_end": "2026-03-14 17:00:00",
  "category": "event",
  "location": "Seoul Gangnam",
  "message": {
    "ko": "3월 정기 밋업",
    "en": "March Regular Meetup"
  },
  "link": "https://example.com/march-meetup",
  "display": true
}

Note: link, message, and location can also be set as a single string, in which case the same value is used for all languages.

Feeds & APIs (for external integrations)

So participating communities can surface each other's events and announcements in their own tools, the following endpoints are published. They are rebuilt automatically by GitHub Actions whenever news.json or communities.json changes, and again daily at 00:00 UTC (09:00 KST). AI agents can also use these paths to fetch the latest information.

How It Works

The banner.js script dynamically creates and inserts a black banner at the top of the page when included in a website. This banner includes the project title loopback.social and a dropdown menu containing a list of participating communities. The community list is managed in the communities.json file, and the news ticker content is managed in the news.json file.

Solving Cache Issues

If you don't see the updated content, try the following methods: