Iframely è sicuramente uno dei piu famosi servizi che consentono di ottenere informazioni al fine di embeddare dai vari socials a partire da un semplice url. Il progetto offre però un piano limitato a 1000hits al mese sulle proprie API. Vediamo come aggirare il problema e creare un server privato per la gestione degli embeds.
Usando molto spesso nei progetti l’editor CkEditor (che è poi lo stesso usato da WordPress) mi sono accorto che di fatto viene già integrato un endpoint del tipo ckeditor.iframely.com ma che quest’ultimo ha comunque un limite di hit oltre il quale verrà restituito un errore in console (503) non permettendo il recupero delle informazioni correttamente.
Per aggirare il problema, visto che il codice sorgente del progetto è open, ho creato un mini-server in Nodejs al fine di creare un endpoint privato senza ovviamente nessun limite.
Siccome in italia gli hosting free per NodeJS si contano sulle dita di mezza mano mi sono affidato al colosso Heroku che offre un piano free con 1 processore e 512Mb di Ram che va in ibernazione automatica nel caso non lo si utilizzi. Nel nostro caso non abbiamo bisogno di velocità bruta o feature particolari, visto che di fatto la call viene fatta solo quando l’utente vuole caricare un embed dentro l’editor CKeditor.
Come creare il server privato iframely – self hosted.
Creata l’istanza Heroku (che consiglio di utilizzare con la versione deploy GIT/BASED) andate a creare sul vostro pc locale il GIT di Heroku.
In via preliminare installate anche Heroku CLI seguendo questa guida:
Andiamo ora a scaricare questo GIT del repo ufficiale (Download):
Spostiamoci ora dentro la cartella GIT di heroku e copiamo il contenuto dello zip scaricato al suo interno.
Sempre da terminale (e dentro la cartella locale di heroku) digitiamo:
cp config.local.js.SAMPLE config.local.js vi config.local.js
Modificate il file config.local.js con un editor.
baseAppUrl: "https://tua-app.herokuapp.com",
allowedOrigins: [ "https://sito-che-utilizzerà-questo-endpoint" ],
Lasciate il resto invariato.
Da terminale, sempre dentro la cartella git di heroku, digitate:
heroku login
Vi si aprirà una finestra del browser dove effettuare il login.
git add . git commit -am "Iframely Release" git push heroku master
Noterete che facendo il push heroku andrà a compilare la vostra app in modo automatico.
A questo punto il vostro endpoint è pronto e sarà:
https://tua-app.herokuapp.com/iframely?url={url-social}
https://tua-app.herokuapp.com/oembed?url={url-social} // Consigliata!
Potete provare l’endpoint anche incollando l’url sul browser e provando a sostituire al posto di {url-social} un link di youtube o post di instagram per vedere il result.
Integrazione con CKEditor
Per integrare il nuovo endpoint al posto di quello di default all’interno di CKEditor aprite il file config.js presente nella directory principale della codebase del vostro editor ed aggiungete questa riga:
config.embed_provider = '//tua-app.herokuapp.com/oembed?url={url}&callback={callback}'; //in fondo a tutto dentro il file config.js
Ovviamente per poter “usare” l’endpoint era sottointeso che dovrete installare questa estensione “Embed” per Ckeditor che va ad aggiungere un pulsante “Embed” come vedete di seguito.
Questo articolo ti è stato utile? Leggi le altre guide oppure diffondi questo post sui tuoi social network preferiti.
Image credits “social” disponibile su Shutterstock
