Agrega caja de comentarios a tu sitio web con GitHub

Transcripción automática:

hola chicos que tal bienvenidos el día

de hoy les voy a mostrar cómo pueden

integrar en su sitio web un sistema de

comentarios y dicho sistema va a estar

enlazado con GitHub de modo que para

poder comentar número uno se requiere

una cuenta en guinea y número dos todos

estos comentarios que se generen en en

sus entradas de blog lo cual tiene una

tienda de e-commerce

volvemos aquí en alguna portafolio en

línea todos tus comentarios van a ser

organizados y guardados dentro de un

repositorio en github de modo que

ustedes van a tener total y absoluto

control y posesión de los comentarios ya

les muestro cómo funciona por ejemplo

ahora mismo estoy en mi sitio web estoy

en una entrada que se llama cómo

utilizar flag bueno cómo usar flash de

esta es la url y vamos a dejar un

comentario que vamos a ponerlo como

probando sistema de comentarios

yo le doy comentar

me añade el comentario y si yo vengo

aquí alguien este es el repositorio

donde yo estoy guardando los comentarios

se llama víctor me voy a jesús y aquí

inicio por cada enlace o por cada url

distinta se vaya generando un issue de

modo que aquí vamos a encontrar todos

los comentarios aquí tengo el último que

acaba de añadir cómo usar arreglar si yo

entro puedo ver que él ha escrito

comentó probando sistemas de comentarios

y esto se genera de manera automática de

hecho todo esto lo gestiona un pequeño

open source que se llama en francés aquí

está aquí pueden encontrar el vínculo

que puede encontrar la documentación

pero si quiere aprender cómo hacerlo de

la mano de la cita acompañen en este

vídeo

[Música]

vale lo primero que se requiere

configurar kit de modo que esté listo

para ir recibiendo todos estos

comentarios que vayamos generando en el

sitio web para ello deben tener

naturalmente una cuenta en caja accedan

a ella y hay que instalar la aplicación

de otro francés está la onza encontrar

aquí en marketplace el mercado que puede

encontrar aplicaciones código un poquito

de de ayuda para su día a día y aquí en

el buscador de apps nada no hace falta

irse muy lejos vamos a escribir observan

cesc y aquí está esta es la aplicación

que nos va a permitir conectar y

gestionar este sistema de comentarios en

sitio web de modo que se han lanzado con

su cuenta y algún repositorio de equipo

para el equipo de echar un vistazo de

qué es lo que trata como ser clic aquí

en instalar gratis nos dice que es

gratis le damos que si completar orden y

comenzar instalación

aquí nos va a pedir que aceptemos todos

estos permisos le decimos que sí

instalar y esto nos va a llevar o nos va

a redirigir a la página de documentación

de otro gran cese y lo pueden ver es

autor and c punto s ayer en todos los

pasos para instalar y toda la

información requerida pero bueno una vez

que hayamos dado en instalar en github

lo que sigue es lo siguiente lo primero

es crear un repositorio en el cual vamos

a ir guardando todos esos comentarios y

todas las entradas del blog de artículos

en los cuales queramos tener la

posibilidad de crear comentarios más

visión de queramos tener la caja de

comentarios pero llevamos aquí voy a

crear un repositorio y vamos a llamarlo

no nos en gestión comentarios muy

importante asegúrense de que sea público

y esté aquí nos va a preguntar si

queremos darle acceso a esta aplicación

que acabamos de instalar decimos

naturalmente que si creamos el

repositorio y ahora vamos echar un

vistazo a los ajustes del repositorio

vayamos a settings settings y aquí en el

panel izquierdo

la sección se llama integraciones

notarán que aquí ya aparece por defecto

la aplicación de trances le damos en

configurar y aquí estamos configurando

todo lo referente esta aplicación

fíjense que aquí nos nos habla acerca de

el acceso que tiene esta aplicación a

nuestros repositorios piense que por

defecto aparece todos los repositorios

lo cual no es malo pero si sólo vamos a

ocupar un repositorio para comentarios

lo ideal es que aquí escojamos dicho

repositorio entonces que le hicimos a la

aplicación sabes que quiero que

únicamente tengas acceso a este aquí que

acabamos de crear gestión comentarios le

damos guardar y con esto ya ya estamos

del otro lado ya le dimos acceso ya la

instalamos y podemos regresar aquí a la

documentación y desde aquí lo único que

hay que hacer es seguir paso a paso lo

que otro anses nos pide por ejemplo lo

primero es configurar el repositorio ya

lo hicimos creamos un repositorio

público e instalamos la aplicación y la

aplicación tiene acceso a dicho

repositorio nuestro repositorio no es un

fork entonces no pasa nada aquí nos pide

que coloquemos el nombre del repositorio

con el cual vamos a estar trabajando en

caso si me regreso para acá

podemos confirmar que es gestión con

comentarios entonces pueden acceder y

siempre sencillamente copian esta parte

de aquí lo voy a copiar lo voy a pegar

las filias una de gestión comentarios

luego aquí nos pide como queremos estar

trabajando con con la aplicación fíjense

que hay distintas maneras de de que otro

francés esté revisando los comentarios

en su sitio web aquí la idea es que otro

francés va a crear un issue por cada

página que tengan en su sitio que reciba

comentarios y eso es lo que viene por

defecto aquí viene contiene el plan la

parte de la url o puede ser que quieran

llevarlo por título de la página puedes

que quieran llevarlo por término yo les

recomiendo que no se compliquen y lo más

sencillo es que pongan oeste o este es

la diferencia es mínima yo voy a colocar

este aquí luego aquí nos pregunta si

queremos que en los sitios que se

generen aquí para darle seguimiento a

los comentarios nos pregunta si queremos

añadirle alguna etiqueta si queremos

distinguirlos de algún hecho este que se

lleven a cabo en la vida real esto como

pueden ver es opcional

y en su cuenta que no lleva nada

profesional no llevan nada de equipos

pueden saltarse esta parte de aquí lo

siguiente nos pregunta qué tema quieren

utilizar para la caja de comentarios si

bien cierto que pueden modificar el

estilo con estos electores aquí ya nos

da por defecto nos facilita un poquito

el estilo con todos estos temas que son

varios de hecho

aquí si lo cambian pueden ver que en

tiempo real les muestran cómo se vería

esto se ve bien tenemos este de aquí

o tenemos el país dark le voy a dejar

este para esta prueba y por último nos

genera el script que tienen que insertar

en su sitio web y a todo esto trae la

configuración mínima necesaria para que

su sistema de comentarios

funcione entonces lo que haré es copiar

este script voy a abrir mi editor voy a

simular un sitio web y voy a pegar

school para que vean cómo es que ya

estaría funcionando vale pues vayamos

aquí al escritorio voy a tener una

carpeta está llamar el tutorial

comentarios

voy a abrir be scout arrastró la carpeta

para abrirla y desde aquí vamos a crear

un index

y vamos a crear un voyeur plate y hasta

aquí vamos a llamarlo inicio este es el

título de la página en español vamos a

hacer esto por cierto

y la idea es que aquí tengamos un

poquito de contenido vamos a simular un

sitio web no puedo poner un bienvenido

ponemos un pe y un lord en 50 y cuando

ya con suficiente simulación aquí vamos

a pegar nuestro script para comentarios

y aquí está otro francés la digestión

comentarios va a crear un iso por paz

name el tema browser jim ya zinc bueno

con esto ya es simulado abramos una

terminal recuerden que pueden

previsualizar su contenido del sitio web

siguen instalado un out y si desde la

terminal escriben live server

ok aquí está mi sitio web simulado por

cierto aquí está mi caja de comentarios

fíjense que si yo quiero escribir un

comentario

no me deja porque me pide que inicie

sesión con cuidado y es lo que hay ahora

mismo tengo acción iniciada en una

cuenta del respaldo que se llama la asf

y voy a iniciar sesión aquí me pide este

autorización

le doy que si me trae de vuelta que

fíjense que ya puedo escribir con mi

cuenta de flash aquí vamos a hacerlo

pero vamos a crear un comentario que sea

primero el comentario

a comentar

aquí me añade el comentario y se me

vengo para acá a la gestión ahora mismo

estoy en y si os vamos a actualizar y

fíjense que ya me creó mi primer

registro o seguimiento de comentarios en

este caso detectó que la url el path

name es index y efectivamente sin export

que es la página de inicio que puede ser

clic acá

aquí en el enlace otro francés lo crea

automáticamente x que la hace comentó

primer comentario en modo pero ahora si

yo tuviera otros otras este páginas con

otros nombres aquí me los iría agregando

y otro lance se encarga de absolutamente

todo y bueno para terminar hagamos la

prueba de terminemos de simular que

tenemos más páginas para regresar aquí

el editor vamos a crear una carpeta que

se llame no los esté encima de la

publicación de un 25 qué sé yo y aquí al

interior vamos a crear otro index

y vamos a copiar lo mismo que está acá

en la página de inicio vamos a ponerlo

aquí en publicación 25 pero hoy ante

aquí vamos a ponerle publicación y

publicación 25

publicación 25

guardamos y guardamos regresamos a

nuestra vista previa de acá y vayamos a

la dirección publicación 25 ok aquí

estamos simulando que estas otra página

de nuestro sitio web tenemos la página

de inicio el bienvenido con el

comentario aquí de bienvenido y tenemos

esta página se llama publicación físico

luego venir aquí y colocar un segundo

comentario vamos a ponerle segundo

comentario en página distinta comentamos

otro francés nos agrega el comentario y

si me vengo para acá a los sitios y

actualizo piense que aquí ya me creó el

seguimiento de publicación 25 y aquí lo

pueden ver entonces eso está por demás

genial aquí tenemos reacciones vamos a

añadir unas cuantas regiones puestos en

tiempo real si no vengo para acá aquí

está el trabajo ojos y lo mejor lo que

más me encanta es que número uno es

gratuito y número dos les lleva todo

este seguimiento sin que ustedes tengan

que hacer absolutamente nada entonces en

algún sistema de blog en alguna tienda

en línea con artículos eventos que se

pueden utilizar otro francés y llevar a

cabo todo este cimiento de comentarios

sin mayor problema y así como terminamos

vídeo de hoy si les gustó dejen es un me

gusta suscriban y como siempre en los

comentarios díganme

me gustaría ver por aquí nos vemos

[Música]

Acerca del autor

¡Hola! Me llamo Adrián, pero todos me conocen como Lasfito. Soy desarrollador front-end y escribo artículos y tutoriales sobre JavaScript, desarrollo web y diseño.

¿Dudas o comentarios?

Únete al Discord oficial

¿Alguna errata?

Si encuentras alguna errata en este artículo, por favor, no dudes en levantar un pull request en el repositorio de GitHub.