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)
You can change the banner background color using the data-color attribute. The default is black (#000000). Use a hex color code; the leading # is optional.
<script src="https://loopback.social/banner.js" data-color="#005a9c" defer></script>Step 2. Get Your Name Out There
There are two main ways to participate in loopback.social:
- To add your community to be displayed on the banner together, submit a community listing issue to the GitHub repository after installing the banner.
- To share news in the news ticker, submit a news submission issue to the GitHub repository after installing the banner.
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 | β | Display start date/time (YYYY-MM-DD HH:mm:ss) |
end | β | Display end date/time (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) |
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 |
Example
{
"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
}Note: link and message can also be set as a single string, in which case the same value is used for all languages.
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:
- Hard refresh: Ctrl+F5 (Windows) or Cmd+Shift+R (Mac)
- Clear browser cache: Developer tools (F12) β Network tab β Check "Disable cache"
- Check in incognito/private mode