Coder Social home page Coder Social logo

mallikarjunh-youtube-badge-generator's Introduction

Youtube-Channel-Badge

A shields.io API for your youtube channel to protect your api key.

Table of contents

Why

You can't publicly access the google/youtube api without an api key. That's why there is no shields.io badge for youtube channels. This repo aims to be the solution to this, because you deploy your own public api which only fetches your channel.

Features

  • Cache time to prevent rate limiting
  • Secure api key due env variable

Examples

Urls

Name Example Description URL
Subscriber count Custom badge Shows the amount of subscribers /subscriber
View count Custom badge Shows the amount of views of all videos of the channel /views
Video count Custom badge Shows the amount of videos on the channel /videos
Comment count Custom badge Shows the amount of youtube comments of the channel /comments

Styles

Name Examples
plastic Custom badge
flat Custom badge
flat-square Custom badge
for-the-badge Custom badge
social Custom badge

All examples are live and based on my youtube channel: ntec.io

Configuration

Variable Name Description Required
API_KEY Your google api key. See section below on how to get one TRUE
CHANNEL_ID The youtube channel id of which the stats should be processed TRUE
CACHE_TIME Time in seconds on how long the last result is cached. Default is 300. FALSE

Getting a google api key & activate youtube api

  1. Go to google developer console

  2. Log In to your google account

  3. Click on Select a project (Looks like a dropdown button)

    url image

  4. Create a new project by clicking on the New Project button

    url image

  5. Give your project a name (or leave it to the generated one) and create your project by pressing on CREATE

    url image

  6. On the next window, click on + ENABLE APIS AND SERVICES in the top

    url image

  7. Search for Youtube in the search bar and click on YoTube Data API v3

    url image

  8. Enable the API by clicking on ENABLE

    url image

  9. Click on the 3 lines in the top left corner to open the side menu and hover over APIs & Services and then click on Credentials

    url image

  10. Click on CREATE CREDENTIALS and then on API key

    url image

  11. Copy your API key

    url image

Find your youtube channel id

  1. Goto your advanced account settings

  2. Copy your channel id

    url image

Deployment

It is neccessary to deploy this repo by yourself to get a domain for the desired youtube channel. An easy and free way to deploy this repo is by using vercel. Just use the button below.

Deploy with Vercel

Step by step

  1. Click on the deploy button above or click here

  2. Click on Continue

    url image

  3. Click on no

    url image

  4. Select your user account and click on continue

    url image

  5. Fork the repo with a click on continue

    url image

  6. Click again on Continue

    url image

  7. Enter your API_KEY, CHANNEL_ID and CACHE_TIME. Check Configuration if you need help getting those things.

    url image

  8. Click on Deploy and your deployment should finish after a short time

    url image

Usage

  1. Deploy the repo and get your url from domains

    Example in vercel:

    url image

  2. Go to shields.io/endpoint and scroll down

    url image

  3. Add your vercel url to the url field

  4. Add your wanted url suffix:

    • to get the subscriber count: add api/subscriber

    • to get the view count: add api/views

    • to get the comment count: add api/comments

    • to get the video count: add api/videos

    It should look like this:

    url image

  5. Override the labels/colors/logo if you want (optional)

  6. Click on the button to copy the badge url

    url image

  7. Enjoy! :)

mallikarjunh-youtube-badge-generator's People

Contributors

mallikarjunh avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.