Βάζοντας μια κάρτα στον δικό σου ιστότοπο

Μια κάρτα μπορεί να ζει μέσα σε μια σελίδα που ήδη έχεις (μια σελίδα ομάδας, μια ανάρτηση στο intranet, έναν ιστότοπο για την περίσταση), ως πλαίσιο που κρατά την πραγματική κάρτα και όχι μια φωτογραφία της.

Τι είναι η ενσωμάτωση

Η ίδια κάρτα, χωρίς το Noya γύρω της: χωρίς κεφαλίδα ιστότοπου, χωρίς εργαλεία επεξεργασίας, χωρίς τίποτα που να ανήκει σε όποιον την έφτιαξε. Όσοι διαβάζουν τη σελίδα σου μπορούν να διαβάσουν τις κάρτες και να προσθέσουν τη δική τους, ακριβώς όπως θα μπορούσαν από τον σύνδεσμο. Η κάρτα μέσα στο πλαίσιο δεν ευρετηριάζεται από μηχανές αναζήτησης, και ό,τι μέσα της οδηγεί πίσω στο Noya ανοίγει σε νέα καρτέλα και όχι μέσα στη σελίδα σου.

Ο κώδικας

Επικόλλησέ τον όπου πρέπει να καθίσει η κάρτα και αντικατέστησε το YOUR_WALL_ID με το id της δικής σου κάρτας, το κομμάτι του συνδέσμου της που έρχεται μετά το /c/.

<iframe data-noya-src="https://noya.so/embed/YOUR_WALL_ID" width="100%" height="720" style="border:0;width:100%;" title="Noya" loading="lazy" allow="camera; microphone" referrerpolicy="no-referrer-when-downgrade"></iframe>
<script>(function(d){var w="https://noya.so/noya-embed.js",v=function(){if(window.noyaEmbed){window.noyaEmbed.load()}else{d.querySelectorAll("iframe[data-noya-src]:not([src])").forEach(function(f){f.src=f.getAttribute("data-noya-src")})}};if(window.noyaEmbed){v()}else if(!d.querySelector('script[src="'+w+'"]')){var s=d.createElement("script");s.src=w;s.async=true;s.onload=v;s.onerror=v;(d.body||d.head).appendChild(s)}})(document);</script>
Το YOUR_WALL_ID στέκεται στη θέση της κάρτας σου. Όλα τα υπόλοιπα επικολλούνται όπως είναι.

Τι μπορείς να αλλάξεις

Το πλαίσιο είναι ένα συνηθισμένο iframe, οπότε τα χαρακτηριστικά του είναι δικά σου να τα προσαρμόσεις στη σελίδα που το δέχεται.

widthΠόσο φαρδύ είναι το πλαίσιο. Αφημένο στο 100% παίρνει το πλάτος της στήλης μέσα στην οποία κάθεται.
heightΠόσο ψηλό είναι το πλαίσιο, σε pixel. Το πλαίσιο δεν μεγαλώνει όσο μεγαλώνει η κάρτα, οπότε μια ψηλότερη κάρτα κυλά μέσα του.
titleΠώς λέγεται το πλαίσιο για τους αναγνώστες οθόνης, και για όποιον περιηγείται χωρίς εικόνες.
loadingΑφημένο στο lazy, η κάρτα ζητιέται μόνο όταν κάποιος κυλήσει κοντά της.

Ένα δουλεμένο παράδειγμα

Το ίδιο απόσπασμα με συμπληρωμένο το id μιας κάρτας και ύψος διαλεγμένο για τη σελίδα που τη φιλοξενεί.

<iframe data-noya-src="https://noya.so/embed/b7Kq2mXsPnR4" width="100%" height="1000" style="border:0;width:100%;" title="Noya" loading="lazy" allow="camera; microphone" referrerpolicy="no-referrer-when-downgrade"></iframe>
<script>(function(d){var w="https://noya.so/noya-embed.js",v=function(){if(window.noyaEmbed){window.noyaEmbed.load()}else{d.querySelectorAll("iframe[data-noya-src]:not([src])").forEach(function(f){f.src=f.getAttribute("data-noya-src")})}};if(window.noyaEmbed){v()}else if(!d.querySelector('script[src="'+w+'"]')){var s=d.createElement("script");s.src=w;s.async=true;s.onload=v;s.onerror=v;(d.body||d.head).appendChild(s)}})(document);</script>

Αξίζει να κάνεις

  • Άφησε το πλάτος στο 100%, ώστε η κάρτα να ακολουθεί τη διάταξή σου αντί να βγαίνει έξω από αυτήν.
  • Διάλεξε ύψος μέσα στο οποίο σε βολεύει να κυλάς, και ανέβασέ το όταν η κάρτα γεμίσει.
  • Κράτα το lazy loading. Μια κάρτα χαμηλά σε μια σελίδα δεν πρέπει να καθυστερεί την κορυφή της.
  • Ενσωμάτωσε τον σύνδεσμο πρόσκλησης, ποτέ τον σύνδεσμο παράδοσης. Μια κάρτα σε δημοσιευμένη σελίδα είναι κάρτα στην οποία θέλεις να γράψει κόσμος, που δεν είναι αυτό για το οποίο υπάρχει ο σύνδεσμος παράδοσης.

Πού θα το βρεις μέσα στο Noya

Δεν χρειάζεται να αντιγράψεις τίποτα από αυτή τη σελίδα. Άνοιξε την «Ενσωμάτωση» στην εργαλειοθήκη της κάρτας και το απόσπασμα είναι εκεί, με το id εκείνης της κάρτας ήδη μέσα, μαζί με ένα κουμπί που τα αντιγράφει όλα.