Giter Club home page Giter Club logo

denvercoder1 / github-readme-youtube-stats Goto Github PK

View Code? Open in Web Editor NEW
51.0 4.0 53.0 69 KB

Youtube stats badges for your Github profile README. Displays the total number of subscribers or the view count for your channel.

License: MIT License

PHP 86.87% CSS 6.10% HTML 7.03%
github readme profile badge badge-generator youtube youtube-api api profile-readme shieldsio shields readme-md readme-generator readme-badges readme-profile hacktoberfest youtube-channel subscribers-badge

github-readme-youtube-stats's Introduction

Github README YouTube Stats

Youtube stats badges for your Github profile README

youtube subscribers youtube views

Archived

This project is now archived since the YouTube API is now officially supported by Shields.io

Table of Contents

Subscribers badge

youtube subscribers

Quick set up:

Use this URL to get the number of subscribers for your channel as shown above

https://github-readme-youtube-stats.herokuapp.com/subscribers/index.php?id=[YOUR CHANNEL ID]&key=[YOUR API KEY]

Markup for creating the badge as a link to your YouTube channel

<a href="https://www.youtube.com/channel/[YOUR CHANNEL ID]">
 <img alt="youtube subscribers" src="https://github-readme-youtube-stats.herokuapp.com/subscribers/index.php?id=[YOUR CHANNEL ID]&key=[YOUR API KEY]"/>
</a>

See below for info on how to get a YouTube API key and your channel's ID.

View count badge

youtube views

Quick set up:

https://github-readme-youtube-stats.herokuapp.com/views/index.php?id=[YOUR CHANNEL ID]&key=[YOUR API KEY]

Markup for creating the badge as a link to your YouTube channel

<a href="https://www.youtube.com/channel/[YOUR CHANNEL ID]">
 <img alt="youtube views" src="https://github-readme-youtube-stats.herokuapp.com/views/index.php?id=[YOUR CHANNEL ID]&key=[YOUR API KEY]"/>
</a>

See below for info on how to get a YouTube API key and your channel's ID.

Additional parameters

color

Color of the right side of the badge (css named color or hex digits)

Default: blue for subscribers, brightgreen for views

Parameter Appearance
?color=red youtube subscribers
?color=0a8b9d youtube views

logo

Company logo supported by shields.io

Default: youtube

Parameter Appearance
?logo=none youtube subscribers
?logo=plex youtube views

logoColor

Color of the logo

Default: white

Parameter Appearance
?logoColor=gold youtube subscribers
?logoColor=brightgreen youtube views

style

Style of the badge

Default: flat-square

Parameter Appearance
?style=plastic youtube subscribers
?style=flat youtube subscribers
?style=flat-square youtube subscribers
?style=for-the-badge youtube subscribers
?style=social youtube subscribers

label

Label for the badge

Default: Youtube subscribers for subscribers, YouTube view count for views

Parameter Appearance
?label=Subscribe youtube subscribers
?label=View+count youtube views

labelColor

Color for the left part of the badge

Default: gray

Parameter Appearance
?labelColor=magenta youtube subscribers
?labelColor=33ab06 youtube views

format

Display format of the number in the badge

Default: short

Parameter Appearance
?format=none youtube views
?format=commas youtube views
?format=short youtube views

Mixing styles

Parameter Appearance
?style=social&logoColor=black&label=Subscribe youtube subscribers
?label=View+count&style=for-the-badge&color=3d3d3d&format=commas youtube views
?label=Views&style=for-the-badge&color=red&labelColor=ce4630 youtube views

See shields.io for more info on parameters

How to get a Youtube API key

  1. Go to https://console.developers.google.com/project and sign in
  2. Click "Create Project"
  3. Name your project and click "Create"
  4. Click the "Google APIs" link in the top left corner and select your project
  5. Click "Enable APIs and Services"
  6. Search for "YouTube Data API"
  7. Enable "YouTube Data API v3"
  8. In the left panel select "Credentials"
  9. Click "Create Credentials", then "API key"
  10. Copy your API key

How to find your YouTube channel ID

  1. Make sure you are signed into your YouTube channel
  2. Go to https://www.youtube.com/account_advanced
  3. You will find your channel ID below your user ID
  4. Click "Copy" to copy your channel ID

channel_id

Finding a channel ID when not signed in

  1. Go to the channel page for the user you want the ID of
  2. Press Ctrl+U to open the source code of the page
  3. Press Ctrl+F on the source code and search for itemprop="channelId"
  4. In the meta tag, the content attribute will have the channel ID.

method2

Deploying it on your own

If you can, it is preferable to host the files on your own server.

Doing this can lead to better uptime and more control over customization (you can modify the code for your usage).

Also, deploying it on your own means you can place your API key directly into the PHP code so it will not be visible in the URL. This makes it so that your API key cannot get used by other people without your knowledge.

You can deploy the PHP files on any website server with PHP installed or as a Heroku app.

Contact me

Twitter

Support

๐Ÿ’™ If you like this project, give it a โญ and share it with friends!

Youtube Patreon

โ˜• Buy me a coffee

Made with โค๏ธ and PHP

Powered by Heroku

github-readme-youtube-stats's People

Contributors

adi-mohan avatar bofalke avatar denvercoder1 avatar imaginezero0 avatar ish-u avatar jlolzzz avatar tim-richter avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

github-readme-youtube-stats's Issues

Allow hyphens and underscores in Channel ID

Issue

When validating the ID parameter, hyphens and underscores are considered not valid making it give the wrong channel info.

Some channel IDs, such as UC-lHJZR3Gqxm24_Vd_AJ5Yw, contain hyphens and underscores and should be allowed.

You will need to modify the regex for validating the ID to allow underscores and hyphens.


Leave a comment if you plan on fixing this

Add commas to the badge output

Issue

The YouTube Data API stores numbers without commas. When creating the badge, Shields.io handles the creation of the badge from the point of passing the URL onward. The task of this issue is to ensure that commas will get added to the badge that is generated.

Two different approaches

One way you could approach this problem is by implementing the YouTube Data API calls within the PHP code, add commas to the resulting number (for example, using number_format()). Use the retrieved information to make a "static" Shields.io badge.

The second approach would be to run a replacement on the string returned by the curl_get_contents() function.

Whichever method of implementing the feature you choose is fine.

Expected outcome

Before implementing the change:

image

After implementing the change:

image

Uppercase letters when using for-the-badge style

Issue

The for-the-badge style should use uppercase letters for the label and message.

What it currently does

The k is lowercase:

image

What it should do

The k should be capitalized:

image

Other styles should continue to use lowercase letters:

image


Please comment on the issue before making a pull request.

This issue is for first-timers only! Since this a simple issue to fix, I am offering this issue specifically to those who have submitted fewer than 4 pull requests

Add documentation for the format parameter

Issue

With #4 and #5, a new url parameter was introduced call format.

See the relevant issues for the details of what this parameter does and what the options are.

There is not yet a section in the README explaining how to use it.

Following the style of other parameter explanations, the documentation for this new parameter should be added.


Please comment on the issue before making a pull request.

This issue is for first-timers only! Since this a simple issue to fix, I am offering this issue specifically to those who have submitted fewer than 4 pull requests

Short number formatted labels appear stretched for large numbers

Issue

Currently, the number is updated with a regex replacement on the response from Shields.io. The rectangle width and text length don't get updated, causing the text to occasionally appear stretched like shown here:

image

Potential fixes

The easiest fix might be to be to fetch the YouTube statistics before creating the shields.io URL and use the static shields.io API instead of dynamic. Doing it this way will allow shields.io to determine what the rectangle size and text length should be.

The format for the static shields.io URLs is like this:

https://img.shields.io/static/v1?label=<LABEL>&message=<MESSAGE>&color=<COLOR>

Other query parameters such as labelColor, style, and others will still work.

Steps

  • Fetch the data from the YouTube API with curl_get_contents and json_decode
  • Locate the view count and subscriber count numbers using array indexing
  • Set the message parameter to the number, but make sure the number is in the right format first
  • Remove unused code

If you are able to accurately resize the input another way, feel free to do it as you choose.

If you have any questions, don't hesitate to ask!


Please comment on the issue before making a pull request.

This issue is for first-timers only! Since this a simple issue to fix, I am offering this issue specifically to those who have submitted fewer than 4 pull requests

Add new display option: short numbers

Add an optional url parameter called format which will allow users to select between 3 formats of numbers:

  • format=none

image

  • format=commas

image

  • format=short

image

Commas is already implemented by #2.

Issues

  • Implement a short numbers function to convert numbers to a rounded form (ex. 3.5k, 6.8m, 9.1b)

Suggested reference: https://stackoverflow.com/a/52490452/11608064

  • Implement a url parameter to allow choosing between different number formats (ex. format=commas, format=short)

  • If the parameter is not specified, the default value that should be used is short


This issue is for first-timers only! Since this a simple issue to fix, I am offering this issue specifically to those who have submitted fewer than 4 pull requests

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.