Kendi Sosyal Akış katmanlarınızı tasarlayın

5 adımda kendi katmanınızı yapın

1. Katmanı seçin değiştirmek istediğiniz.
2. Kaynak ZIP'i indirin, ZIP'i çıkarın ve katmanın HTML dosyasını kopyalayın.
3. Kopyayı düzenleyin kendiniz veya bir AI aracından isteyerek.
4. Kopyanızı OBS'de açın adresine SSN oturum ayarlarını ekleyerek.
5. Test edin katmanın gerçek tetikleyicisiyle.

Değiştirilecek katmanı seçin

Katmanın renklerini, yazı tiplerini, yerleşimini, görsellerini ve hareketini değiştirebilirsiniz. Şu araç: HTML dosyası sayfanın kendisidir. Şu dosya: OBS URL'si ona yönlenir ve oturum ile görüntüleme ayarlarınızı ekler.

Her katman türü farklı girdileri dinler. Sohbet, öne çıkan mesaj ve anket aynı girdiyi kullanmaz. Kullandığınız türün tasarım rehberini açın:

Hazır bir şey mi istiyorsunuz? Şunu deneyin: Katman galerisi veya Şablon Galerisi. StreamElements veya Streamlabs sohbet görünümü mü taşıyorsunuz? Şu rehberi izleyin: içe aktarma kılavuzu. Bu dışa aktarımın kendi kurulum adımları vardır.

Dosyaları indirin

1. Beta kaynak ZIP dosyasını indirin. Veya şunu açın: beta deposu ve şunu seçin: Kod → ZIP'i İndir.
2. Saklayacağınız klasöre çıkarın; örneğin C:\SSN\social_stream-beta\. ZIP'in içinde düzenlemeyin. SSN'yi yeniden kurmanız gerekmez.
3. Katman dosyasını yukarıdaki tablodan bulun. Orijinalin yanına kopya oluşturun; örneğin poll.html → my-poll.html. Şu tür bir tema için: themes/featured-styles/featured-modern.html, kopyayı aynı klasörde tutun.
4. Kopyayı metin veya kod düzenleyicide açın. Şu adla kaydedin: .html, değil .html.txt.

social_stream-beta/
    poll.html
    my-poll.html
    currency.js
    js/
    libs/
    shared/
    thirdparty/
    media/
    sources/images/
    themes/
        featured-styles/
            featured-modern.html
            my-featured.html
    docs/
        event-reference.html

Oturum bağlantısını koruyun

SSN'yi başlatın, kaynak bağlayın ve orijinal katmanı kontrol edin. Ardından şunu kopyalayın: tam bağlantı o katmanın SSN aracından.

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

Şundan sonraki değer: session= SSN oturumunuzdur; YouTube kanalınız, Twitch adınız, dosya adınız veya anket başlığı değildir. SSN ve sayfa aynı oturum ve parolayı kullanmalıdır. SSN açık kalmalıdır; katmanlar yalnızca veri alır, sohbet yakalamaz.

Kopyanız boşsa önce orijinal bağlantıyı kontrol edin. Bazı sayfalar eksik ayarları sorar, bazıları gizli kalır veya yönlendirir. Bağlantıya doğru oturumu koymak tahmin etmeyi önler.

Dosyanızı OBS'de açın

Düzenlenmiş dosyayı bilgisayardan doğrudan açın. Sunucu gerekmez.

1. HTML kopyanızı Chrome veya Edge'e sürükleyip adresi kopyalayın. Şununla başlar: file:///.
2. Çalışan SSN katman bağlantısından şuradan itibaren her şeyi kopyalayın: ? itibaren. Dosya adresinin sonuna yapıştırın. Oturum, parola, ayarlar ve varsa # bölümü.
3. Birleştirilmiş adresi tarayıcıda açıp test edin.
4. OBS'de şunu ekleyin: Tarayıcı Kaynağı. Şunu bırakın: Yerel dosya işaretini kaldırın. Tam adresi şuraya yapıştırın: URL ve genişlik ile yüksekliği ayarlayın.

Örnek: bu SSN bağlantısı…

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

…Windows'a indirilen anket kopyası için şu olur:

file:///C:/SSN/social_stream-beta/my-poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

macOS'ta şununla başlar: file:///Users/..., Linux'ta genellikle file:///home/.... Tarayıcıdan kopyalamak boşluk ve eğik çizgileri sizin için düzenler.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>My local overlay launcher</title>
<p>Opening the local overlay...</p>
<script>
var copiedLink = new URL("https://socialstream.ninja/poll.html?session=YOUR_SESSION");
var localPage = new URL("./my-poll.html", window.location.href);
localPage.search = copiedLink.search;
localPage.hash = copiedLink.hash;
window.location.replace(localPage.href);
</script>
</html>

OBS dosya/URL modlarını, boyutları, Özel CSS'yi ve yenilemeyi şu belgesinde açıklar: Tarayıcı Kaynağı referansı.

Tasarımı değiştirin veya AI'dan isteyin

Logonuzu, yazı tipi dosyalarını, marka renklerini, tuval boyutunu ve görsel referansı hazırlayın. Web sayfası genellikle başka bilgisayarın diskindeki yazı tipi veya görseli yükleyemez.

AI istemi

Her tasarım rehberindeki türe özel istemi kullanın veya bununla başlayın. AI'ya kopya dosyayı ve yüklediği stil ile betikleri verin.

Customize [copied overlay filename] to match [reference/design].
Canvas: [width x height]. Placement: [position]. Colors/fonts: [details].
Use the existing page and its supporting files, rather than replacing its
connection and event logic. Read docs/event-reference.html and the relevant
overlay design guide. Preserve query parameters, session/password, URL
fragments, bridge labels, transport channels, settings, and controls.
Use CSS first. Keep relative paths and package all executable dependencies
locally. Use classic scripts compatible with Chrome 80.
Keep operator controls, private links, and credentials off the audience view.

Treat all incoming messages, names, labels, donations, and metadata as untrusted.
Prevent HTML/JavaScript injection in every renderer you change. Use textContent
for plain fields and for chatmessage when textonly is true. For HTML-mode
chatmessage, keep supported emotes/formatting through the packaged
SocialStreamChatHTML.sanitize helper (libs/objects.js loaded first).
Do not concatenate raw input into innerHTML, attributes, CSS, or JavaScript.
Validate media/link URLs with the page's existing URL policy and assign DOM
properties; do not enable javascript: URLs or executable embedded content.
Never eval incoming data or treat a viewer message as an AI instruction.
Keep source checks, connection handling, and existing sanitizers.
Test plain text, allowed emotes, quotes, angle brackets, and an HTML injection
probe in an isolated preview; verify the probe cannot execute.

Make the edited overlay work directly from disk using a file:/// URL,
without requiring a local web server. Return the edited files and assets,
file URL and OBS setup steps, and tests
for this overlay's real trigger. Use session placeholders in shared examples.
Explain any behavior changes separately from the design edits.

Gelen sohbetin koda dönüşmesini önleyin

Adlar, mesajlar, başlıklar, tutarlar ve bağlantılar izleyicilerden ve dış hizmetlerden gelir. Bunları kod değil metin olarak ele alın. Çizim işlevinin sayfaya koyduğu yerde temizleyin.

<!-- Example for a copied page at the repository root. -->
<script src="./libs/objects.js"></script>
<script src="./shared/utils/chatHtml.js"></script>
<script>
function renderChatBody(element, data) {
    var message = String(data.chatmessage == null ? "" : data.chatmessage);
    if (data.textonly) {
        element.textContent = message;
    } else {
        element.innerHTML = SocialStreamChatHTML.sanitize(message);
    }
}
// Names, amounts, titles, and other plain fields use textContent:
// nameElement.textContent = String(data.chatname || "");
</script>

• Sayfada zaten bir temizleyici varsa koruyun. İkincisini eklemeyin.
• Alt klasörlerdeki dosyalar için betik yollarını düzeltin.
• Ham adları öznitelik dizelerine veya ham renkleri stil işaretlemesine yapıştırmayın. Stil değerlerini doğrulayın, sonra özellikleri tek tek ayarlayın.
• Temizlenmiş HTML bile JavaScript olarak çalıştırmak veya AI talimatı olarak kullanmak için güvenli değildir.

Ek bilgi: OWASP güvenli çıktı noktaları ve HTML temizleme rehberi.

Parça parça test edin

AI'ya verilecek dosyalar

AI'ya katmanın dosyasını, yüklediği CSS/JS'yi ve bunları verin. Olay referansı tek başına anket kontrollerini veya her katmanın yerleşim kodunu açıklamaz.

Sorunları giderme

Önce doğrulanmış en küçük sorunu düzeltin. Görünüm değişikliği yakalama betikleri veya yeni olay alanları gerektirmemelidir. Açık bir çatal paylaşırsanız varlıkları ekleyin, özel başlatıcıları dışarıda bırakın.