Widget ενσωμάτωσης

Το widget είναι ένα μικρό μπλοκ που δείχνει τις ανοιχτές μεταγραφικές υποθέσεις μιας ομάδας, όπως τις παρακολουθεί το metagrafes24. Μπαίνει στο site ενός συνεργάτη (π.χ. σελίδα οπαδών ή τοπικό μέσο) με μία μόνο γραμμή κώδικα. Είναι δωρεάν, ενημερώνεται μόνο του (χωρίς καμία συντήρηση από τον συνεργάτη) και κάθε γραμμή παραπέμπει πίσω στη σελίδα της υπόθεσης στο metagrafes24.

Ζωντανό παράδειγμα

Αυτό ακριβώς εμφανίζεται, για τον Ολυμπιακό:

Πώς μπαίνει, μία γραμμή

Αντίγραψε και επικόλλησε αυτό εκεί που θες να εμφανιστεί το widget:

<div data-metagrafes24-club="olympiakos"></div>
<script src="https://metagrafes24.gr/widget.js" async></script>

Το <div> είναι η θέση του widget. Το <script> μπαίνει μία φορά στη σελίδα, ακόμη κι αν έχεις πολλά widget. Μπορείς να βάλεις πολλά <div> με διαφορετικές ομάδες στην ίδια σελίδα.

Ποιο slug ομάδας

Το slug είναι το όνομα της ομάδας όπως εμφανίζεται στο δικό μας URL, π.χ. στο metagrafes24.gr/omades/olympiakos το slug είναι olympiakos. Μερικά παραδείγματα:

• olympiakos (Ολυμπιακός)
• panathinaikos (Παναθηναϊκός)
• paok (ΠΑΟΚ)
• aek (ΑΕΚ)
• aris (Άρης)
• ofi (ΟΦΗ)
• atromitos (Ατρόμητος)
• levadiakos (Λεβαδειακός)

Επιλογές

• Πλήθος υποθέσεων: πρόσθεσε data-limit="10" στο <div>. Προεπιλογή 6, μέγιστο 20.
• Έναν παίκτη αντί ομάδας: <div data-metagrafes24-player="andrija-zivkovic"></div> (το slug του παίκτη από το URL μας).
• Αρχικό ύψος: προαιρετικό data-height="300", πριν προσαρμοστεί αυτόματα.

Δεύτερος τρόπος, JSON API

Αν θες να σχεδιάσεις μόνος σου την εμφάνιση, τράβα τα ίδια δεδομένα σε JSON:

GET https://metagrafes24.gr/widget/api/omada/olympiakos?limit=6

{
  "club": { "slug": "olympiakos", "name": "Ολυμπιακός", "open_count": 2,
            "url": "https://metagrafes24.gr/omades/olympiakos" },
  "cases": [
    { "player": "Μπρούνο Ονιεμαέτσι",
      "from": { "name": "Arouca", "crest": null, "free": false },
      "to":   { "name": "Ολυμπιακός", "crest": "https://metagrafes24.gr/...", "free": false },
      "renewal": false,
      "stage": { "key": "negotiation", "label": "Σε διαπραγμάτευση", "hex": "#F59E0B" },
      "probability": 58,
      "url": "https://metagrafes24.gr/ypotheseis/bruno-onyemaechi-olympiakos",
      "updated_at": "2026-10-14T10:04:00+00:00",
      "updated_label": "πριν 2 ώρες" }
  ]
}

CORS: το JSON endpoint απαντά σε κάθε origin (Access-Control-Allow-Origin: *), μόνο με GET και χωρίς cookies, γιατί τα δεδομένα είναι δημόσια και ανώνυμα. Μπορείς να το καλέσεις με fetch() από οποιοδήποτε domain. Μόνο αυτό το endpoint έχει CORS, τίποτε άλλο στο site.

Πώς αλλάζει ύψος μόνο του

Το widget φορτώνεται μέσα σε iframe. Η σελίδα του iframe στέλνει το ύψος της στον loader με postMessage, στη φόρτωση και σε κάθε αλλαγή, και ο loader προσαρμόζει το iframe. Δεν χρειάζεται να ορίσεις ύψος, ούτε scrollbar.

Στυλ

Επειδή είναι σε iframe, το widget δεν επηρεάζει και δεν επηρεάζεται από το CSS της σελίδας σου. Δεν αλλάζει στυλ από έξω, και αυτός είναι ο σκοπός, να φαίνεται παντού το ίδιο και να μη σπάει με τα στυλ του κάθε site. Προσαρμόζεται μόνο στο πλάτος, από 300 έως 640 pixel.

Αν δεν εμφανίζεται κάτι

• Κενό ή τίποτα: λάθος slug, ή η ομάδα δεν έχει αυτή τη στιγμή ανοιχτές υποθέσεις.
• Σταθερό ύψος, δεν προσαρμόζεται: το <script> μπλοκαρίστηκε (ad blocker ή CSP). Επίτρεψε το metagrafes24.gr.
• Μήνυμα "προσωρινά ανενεργό": το widget έχει απενεργοποιηθεί από τον διαχειριστή.

Σταθερότητα

Μπορεί να αλλάξουμε την εμφάνιση ή τον κώδικα μέσα στο widget, αλλά η γραμμή ενσωμάτωσης (το <div> και το <script>) μένει σταθερή. Δεν χρειάζεται να αλλάξεις τίποτα στη σελίδα σου.

Διαχείριση (εσωτερικό)

Ρυθμίσεις > Widget: widget_enabled (ενεργό ή όχι, αλλιώς το embed και το API γυρίζουν 404), widget_default_limit (προεπιλεγμένο πλήθος), widget_footer_text (η γραμμή υποστήριξης στο footer του widget). Αυτή η σελίδα κειμένου είναι πλήρως επεξεργάσιμη από Filament > Σελίδες.