{"id":28089240,"url":"https://github.com/gianmattus-programmer/youtube-floating-button","last_synced_at":"2025-08-17T12:32:46.360Z","repository":{"id":287303710,"uuid":"964292237","full_name":"gianmattus-programmer/Youtube-Floating-Button","owner":"gianmattus-programmer","description":"Botón Flotante de Suscripción a YouTube","archived":false,"fork":false,"pushed_at":"2025-04-19T09:10:44.000Z","size":20,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-19T15:24:19.189Z","etag":null,"topics":["jsdelivr","youtube"],"latest_commit_sha":null,"homepage":"https://gianmattus-programmer.github.io/Youtube-Floating-Button/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gianmattus-programmer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-11T01:41:07.000Z","updated_at":"2025-04-19T09:12:06.000Z","dependencies_parsed_at":"2025-04-11T02:46:36.435Z","dependency_job_id":"0218b5e6-d3a8-430b-b155-dca1269ea4f1","html_url":"https://github.com/gianmattus-programmer/Youtube-Floating-Button","commit_stats":null,"previous_names":["gianmattus-programmer/youtube-floating-button"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gianmattus-programmer%2FYoutube-Floating-Button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gianmattus-programmer%2FYoutube-Floating-Button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gianmattus-programmer%2FYoutube-Floating-Button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gianmattus-programmer%2FYoutube-Floating-Button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gianmattus-programmer","download_url":"https://codeload.github.com/gianmattus-programmer/Youtube-Floating-Button/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253948333,"owners_count":21988953,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jsdelivr","youtube"],"created_at":"2025-05-13T12:55:25.754Z","updated_at":"2025-05-13T12:55:26.663Z","avatar_url":"https://github.com/gianmattus-programmer.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Botón Flotante de Suscripción a YouTube (Implementación con GitHub y jsDelivr)\n\nEste repositorio contiene el código necesario para generar un botón flotante de suscripción a tu canal de YouTube que puedes integrar fácilmente en cualquier página web con una única línea de código HTML. Funciona utilizando GitHub para almacenar el código y jsDelivr como una Content Delivery Network (CDN) gratuita para servir el script de manera pública.\n\n## 🧩 ¿Cómo Funciona?\n\nLa magia detrás de este botón flotante reside en la combinación de GitHub y jsDelivr:\n\n1.  **GitHub: Tu Almacén de Código (`script.js`)**\n    * Dentro de este repositorio, el archivo [`dist/script.js`](./dist/script.js) contiene todo el código JavaScript necesario para crear y gestionar el botón de suscripción flotante en tu página web.\n    * Actualmente, el script está configurado para redirigir a: `https://www.youtube.com/@gianmattus-programmer`. **Recuerda modificar esta URL en tu archivo `script.js` para que apunte a tu propio canal de YouTube.**\n    * **Ejemplo simple dentro de `dist/script.js`:**\n        ```javascript\n        const button = document.createElement(\"a\");\n        button.href = \"[https://www.youtube.com/@gianmattus-programmer](https://www.youtube.com/@gianmattus-programmer)\"; // ¡CAMBIA ESTA URL!\n        button.innerText = \"Suscríbete\"; // Puedes personalizar el texto\n        // ... Aquí se agregan estilos (CSS en JS) y comportamiento (event listeners)\n        document.body.appendChild(button);\n        ```\n\n2.  **jsDelivr: Tu CDN Gratuita**\n    * [jsDelivr](https://www.jsdelivr.com/) es una CDN de código abierto que permite servir archivos alojados en repositorios públicos de GitHub (y npm) de forma rápida y confiable a través de una red global de servidores.\n    * jsDelivr interpreta la estructura de tu repositorio y te proporciona una URL pública para acceder directamente a tus archivos.\n    * **URL de jsDelivr para este script:**\n        ```bash\n        [https://cdn.jsdelivr.net/gh/gianmattus-programmer/Youtube-Floating-Button/dist/script.js](https://cdn.jsdelivr.net/gh/gianmattus-programmer/Youtube-Floating-Button/dist/script.js)\n        ```\n    * En esta URL:\n        * `cdn.jsdelivr.net`: Es el dominio de jsDelivr.\n        * `/gh/`: Indica que se está sirviendo contenido desde GitHub.\n        * `gianmattus-programmer`: Es el nombre de usuario de GitHub del propietario del repositorio.\n        * `Youtube-Floating-Button`: Es el nombre de este repositorio.\n        * `/dist/script.js`: Es la ruta al archivo JavaScript dentro del repositorio.\n\n3.  **Integración en tu HTML**\n    * Para utilizar este botón flotante en tu página web, simplemente necesitas incluir la siguiente etiqueta `\u003cscript\u003e` en cualquier lugar dentro de las etiquetas `\u003cbody\u003e` de tu archivo HTML:\n        ```html\n        \u003cscript src=\"[https://cdn.jsdelivr.net/gh/gianmattus-programmer/Youtube-Floating-Button/dist/script.js](https://cdn.jsdelivr.net/gh/gianmattus-programmer/Youtube-Floating-Button/dist/script.js)\"\u003e\u003c/script\u003e\n        ```\n    * **¿Qué sucede al incluir esta línea?**\n        1.  El navegador del visitante de tu web descarga automáticamente el archivo `script.js` desde la CDN de jsDelivr.\n        2.  El navegador ejecuta el código JavaScript contenido en `script.js`.\n        3.  Este código dinámicamente crea el botón flotante de suscripción y lo añade a tu página web, sin necesidad de que copies y pegues el código JS directamente en tu HTML.\n\n## 🧠 ¿Por Qué es Útil Esta Aproximación?\n\n* **Reutilización de Código:** Implementa el botón en múltiples páginas web simplemente añadiendo la etiqueta `\u003cscript\u003e`. No necesitas duplicar el código en cada página.\n* **Actualizaciones Sencillas:** Si realizas cambios o mejoras en el archivo `script.js` dentro de este repositorio en GitHub, todas las páginas web que estén utilizando esta URL de jsDelivr se actualizarán automáticamente con la nueva versión del botón.\n* **Profesionalismo:** Utilizar una CDN para servir tu script es una práctica común y profesional, similar a cómo se utilizan librerías de terceros como jQuery o Bootstrap.\n* **Rendimiento:** Las CDNs como jsDelivr están optimizadas para entregar contenido rápidamente a usuarios de todo el mundo, mejorando potencialmente el tiempo de carga de tu página.\n\n## 💡 Extras y Posibles Mejoras\n\n* **Minificación del Script:** Para reducir el tamaño del archivo y mejorar aún más el tiempo de carga, puedes minificar el archivo `script.js` y renombrarlo a `script.min.js`. Luego, actualizarías la URL en tu etiqueta `\u003cscript\u003e`.\n* **Control de Versiones:** Puedes utilizar las etiquetas de Git para crear versiones de tu script (ej., `v1.0.0`). Luego, puedes referirte a una versión específica en la URL de jsDelivr para evitar cambios inesperados en tus sitios web:\n    ```html\n    \u003cscript src=\"[https://cdn.jsdelivr.net/gh/gianmattus-programmer/Youtube-Floating-Button@v1.0.0/dist/script.js](https://cdn.jsdelivr.net/gh/gianmattus-programmer/Youtube-Floating-Button@v1.0.0/dist/script.js)\"\u003e\u003c/script\u003e\n    ```\n* **Personalización Avanzada:**\n    * **Temas:** Permite a los usuarios elegir entre diferentes estilos visuales para el botón.\n    * **Animaciones:** Agrega animaciones sutiles al aparecer o al hacer hover sobre el botón.\n    * **Iconos Personalizados:** Utiliza diferentes iconos para el botón (por ejemplo, iconos de Font Awesome).\n    * **Posicionamiento:** Ofrece opciones para cambiar la posición del botón (arriba, izquierda, etc.).\n    * **Texto Personalizable:** Permite a los usuarios definir el texto del botón.\n* **Configuración a través de Atributos:** Podrías extender el script para leer atributos directamente desde la etiqueta `\u003cscript\u003e` para personalizar el comportamiento (ej., la URL del canal).\n\n¡Empieza a utilizar este botón flotante y facilita la suscripción a tu canal de YouTube! Recuerda modificar la URL del canal en el archivo `script.js` para que apunte al tuyo.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgianmattus-programmer%2Fyoutube-floating-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgianmattus-programmer%2Fyoutube-floating-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgianmattus-programmer%2Fyoutube-floating-button/lists"}