How to Create Creative About us Page with Live Stats in Blogger

We all know about us page is one of the most important pages of our website. Visitors get to know about our website and your company from the about us page.

In this tutorial, I will guide you on “How to Create a Profession About us Page” for your Blogger Website With Live Stats on Telegram and youtube channels. Even, you can use it on your WordPress website too.

About us page for blogger

What is a Perfect about us page?

Today Everyone just Writes some paragraphs about the website on a page and its link in the footer or somewhere else and called it an About us Page. 

But in Actual, your about page must leave a strong impression on your visitors.

About is a Page where visitors learn more about you and your business or website so make sure you provide all the necessary details on this page.

Your About Page Should Contain:

  • Why did you start a business or website?
  • What do you Provide?
  • Who Started and who is behind this website or business?
  • How big is your Community?
  • Call to action buttons like follow on social media, subscribe to the newsletter, etc.

How to make a perfect About Us page for Blogger

In this Post, We Shared a Full Page Source Code you just need to copy paste and do some changes according to the below steps:

1. Let’s Write Something About Your Website

First, We Need to Write About our website along with the logo and call to action button.

We Can use the Call to action button as a newsletter subscription, contact us, etc.

<!--[ About Author ]-->
<div class='aboutAuthor'>
  <div class='aboutCont'>
    <!--[ Author Profile Picture, Recommended Sizes: 1280×1280px, 720×720px below 30KB for fast loading, use transparent picture ]-->
    <img alt='alt_here' src='https://blogger.googleusercontent.com/img/a/AVvXsEjoxZtW_TZT562Uhh7gZwooADMcl56yuTdx-vblRzzWiG4FoFh7N_bgOpu3MxdU_4AeMkmazQcxq9gk542w7ecNc4aBYyVK4Og6TUjsikgS4n7fDZMThgGI4SswPMBGixd8bjErpjFApmUCgcF337XmbbMuLub11pHV4KG4misX3H5fggohZHvN2UGV1w' />
    <!--[ Author Description ]-->
    <p>Lorem ipsum dolor sit amet. Qui ratione rerum vel odit alias qui totam placeat! Aut esse sint hic possimus reprehenderit et consectetur beatae  voluptates fugit. A earum vero et quos ipsa vel voluptatum sequi vel numquam nostrum eum explicabo vero.<br/><br/>This is a sample About Us/About Author Page.</p>
    <div class='athrBtn'>
      <a class='button' href='https://www.blogger.com/profile/16542346501107515979' target='_blank'>
        <!--[ Button SVG ]-->
        <svg class='line' viewBox='0 0 24 24'><g transform='translate(5.000000, 2.400000)'><path d='M6.84454545,19.261909 C3.15272727,19.261909 -8.52651283e-14,18.6874153 -8.52651283e-14,16.3866334 C-8.52651283e-14,14.0858516 3.13272727,11.961909 6.84454545,11.961909 C10.5363636,11.961909 13.6890909,14.0652671 13.6890909,16.366049 C13.6890909,18.6658952 10.5563636,19.261909 6.84454545,19.261909 Z'/><path d='M6.83729838,8.77363636 C9.26002565,8.77363636 11.223662,6.81 11.223662,4.38727273 C11.223662,1.96454545 9.26002565,-1.0658141e-14 6.83729838,-1.0658141e-14 C4.41457111,-1.0658141e-14 2.45,1.96454545 2.45,4.38727273 C2.44184383,6.80181818 4.39184383,8.76545455 6.80638929,8.77363636 C6.81729838,8.77363636 6.82729838,8.77363636 6.83729838,8.77363636 Z'/></g></svg>
        <!--[ Button Text ]-->
        Author Profile
      </a>
    </div>
  </div>
</div>

Now, we Need to Add Blog Stats like the total posts, comments, and total website visits.

We can easily fetch and write Blog Posts and Comments Count with just a Script, but when we talk about total website visits we need a firebase database.

If You Have plus UI’s Latest Version you don’t need to do anything, because plus UI has an inbuilt feature of website views

If you are using another template please write website views manually or you can request a tutorial on firebase for total website views on your request tutorial page.

You may want to read this post :

Adding Website Stats

Copy and Paste the below HTML Codes to show Website stats;

<h3 class="statsHeading">
  <!--[ Stats Heading ]-->
  Blog Stats
</h3>

<!--[ Website Statistics ]-->
<div class="statsWebsite">
  <!--[ Page Views Count ]-->
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <!--[ Change SVG Icon ]-->
        <svg class="line" viewbox="0 0 24 24"><g transform="translate(2.000000, 4.000000)"><path d="M13.1643,8.0521 C13.1643,9.7981 11.7483,11.2141 10.0023,11.2141 C8.2563,11.2141 6.8403,9.7981 6.8403,8.0521 C6.8403,6.3051 8.2563,4.8901 10.0023,4.8901 C11.7483,4.8901 13.1643,6.3051 13.1643,8.0521 Z"></path><path d="M0.7503,8.0521 C0.7503,11.3321 4.8923,15.3541 10.0023,15.3541 C15.1113,15.3541 19.2543,11.3351 19.2543,8.0521 C19.2543,4.7691 15.1113,0.7501 10.0023,0.7501 C4.8923,0.7501 0.7503,4.7721 0.7503,8.0521 Z"></path></g></svg>
        <!--[ Stats Name ]-->
        Total Visits
      </div>
      <div class="statsNumber v">
        <!--[ Website Views]-->
        <span class="pu-views" data-id="WebsiteStats" data-text="100K"></span>
      </div>
    </div>
  </div>
  
  <!--[ Posts Number ]-->
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <!--[ Change SVG Icon ]-->
        <svg class="line" viewbox="0 0 24 24"><g transform="translate(2.000000, 2.000000)"><path d="M10.0002,0.7501 C3.0632,0.7501 0.7502,3.0631 0.7502,10.0001 C0.7502,16.9371 3.0632,19.2501 10.0002,19.2501 C16.9372,19.2501 19.2502,16.9371 19.2502,10.0001"><path d="M17.5285,2.3038 L17.5285,2.3038 C16.5355,1.4248 15.0185,1.5168 14.1395,2.5098 C14.1395,2.5098 9.7705,7.4448 8.2555,9.1578 C6.7385,10.8698 7.8505,13.2348 7.8505,13.2348 C7.8505,13.2348 10.3545,14.0278 11.8485,12.3398 C13.3435,10.6518 17.7345,5.6928 17.7345,5.6928 C18.6135,4.6998 18.5205,3.1828 17.5285,2.3038 Z"><line x1="13.009" x2="16.604" y1="3.8008" y2="6.9838"></line></path></path></g></svg>
        <!--[ Stats Name ]-->
        Posts
      </div>
      <div class="statsNumber odometer" id="postCount">0</div>
    </div>
  </div>
  
  <!--[ Comments Number ]-->
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <!--[ Change SVG Icon ]-->
        <svg class="line" viewbox="0 0 24 24"><g transform="translate(2.000000, 2.000000)"><line x1="13.9394" x2="13.9484" y1="10.413" y2="10.413"></line><line x1="9.9304" x2="9.9394" y1="10.413" y2="10.413"></line><line x1="5.9214" x2="5.9304" y1="10.413" y2="10.413"><path d="M17.0710351,17.0698449 C14.0159481,20.1263505 9.48959549,20.7867004 5.78630747,19.074012 C5.23960769,18.8538953 1.70113357,19.8338667 0.933341969,19.0669763 C0.165550368,18.2990808 1.14639409,14.7601278 0.926307229,14.213354 C-0.787154393,10.5105699 -0.125888852,5.98259958 2.93020311,2.9270991 C6.83146881,-0.9756997 13.1697694,-0.9756997 17.0710351,2.9270991 C20.9803405,6.8359285 20.9723008,13.1680512 17.0710351,17.0698449 Z"></path></line></g></svg>
        <!--[ Stats Name ]-->
        Comments
      </div>
      <div class="statsNumber odometer" id="commentCount">0</div>
    </div>
  </div>
    <!--[ Since ]-->
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <!--[ Change SVG Icon ]-->
        <svg class="line" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(2.000000, 2.000000)"><path d="M19.2498,10.0001 C19.2498,15.1081 15.1088,19.2501 9.9998,19.2501 C4.8918,19.2501 0.7498,15.1081 0.7498,10.0001 C0.7498,4.8911 4.8918,0.7501 9.9998,0.7501 C15.1088,0.7501 19.2498,4.8911 19.2498,10.0001 Z"></path><polyline points="14.1907 10.7672 9.6607 10.6932 9.6607 5.8462"></polyline></g></svg>
        <!--[ Stats Name ]-->
       Since
      </div>
      <div class="statsNumber">Dec 2022</div>
    </div>
  </div>
</div>

Adding Youtube Channel Stats

Now We Will Add a Youtube channel and Telegram Channel/Group Live Stats.

First, Let’s Prepare HTML For it.

<h3 class="statsHeading">
  <!--[ Stats Heading ]-->
  Youtube Stats
</h3>

<!--[ Youtube Statistics ]-->
<div class="statsWebsite">
  <!--[ Subscribers Count ]-->
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <!--[ Change SVG Icon ]-->
       <svg class="line" viewbox="0 0 24 24"><g transform="translate(1.000000, 3.000000)"><path d="M10.9725,17.3682 C7.7335,17.3682 4.9665,16.8782 4.9665,14.9162 C4.9665,12.9542 7.7155,11.2462 10.9725,11.2462 C14.2115,11.2462 16.9785,12.9382 16.9785,14.8992 C16.9785,16.8602 14.2295,17.3682 10.9725,17.3682 Z"></path><path d="M10.9725,8.4487 C13.0985,8.4487 14.8225,6.7257 14.8225,4.5997 C14.8225,2.4737 13.0985,0.7497 10.9725,0.7497 C8.8465,0.7497 7.12248426,2.4737 7.12248426,4.5997 C7.1165,6.7177 8.8265,8.4417 10.9455,8.4487 L10.9725,8.4487 Z"></path><path d="M17.3622,7.3916 C18.5992,7.0606 19.5112,5.9326 19.5112,4.5896 C19.5112,3.1886 18.5182,2.0186 17.1962,1.7486"></path><path d="M17.9432,10.5444 C19.6972,10.5444 21.1952,11.7334 21.1952,12.7954 C21.1952,13.4204 20.6782,14.1014 19.8942,14.2854"></path><path d="M4.5838,7.3916 C3.3458,7.0606 2.4338,5.9326 2.4338,4.5896 C2.4338,3.1886 3.4278,2.0186 4.7488,1.7486"></path><path d="M4.0018,10.5444 C2.2478,10.5444 0.7498,11.7334 0.7498,12.7954 C0.7498,13.4204 1.2668,14.1014 2.0518,14.2854"></path></g></svg>
        <!--[ Stats Name ]-->
        Subscribers
      </div>
      <div class="statsNumber odometer" id="youtubeSubscriber"></div>
    </div>
  </div>
  
  <!--[ Videos Number ]-->
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <!--[ Change SVG Icon ]-->
<svg class="line" viewbox="0 0 24 24"><g transform="translate(2.514381, 5.114095)"><path d="M13.6370476,4.55866688 C15.4751429,3.10152403 17.9418095,1.69200022 18.4084762,2.19676212 C19.1799048,3.02533355 19.1132381,10.9110478 18.4084762,11.6634288 C17.9799048,12.1300955 15.4941905,10.7205716 13.6370476,9.2729526"></path><path d="M-6.21724894e-15,6.92285714 C-6.21724894e-15,1.73047619 1.7247619,-2.66453526e-15 6.90095238,-2.66453526e-15 C12.0761905,-2.66453526e-15 13.8009524,1.73047619 13.8009524,6.92285714 C13.8009524,12.1142857 12.0761905,13.8457143 6.90095238,13.8457143 C1.7247619,13.8457143 -6.21724894e-15,12.1142857 -6.21724894e-15,6.92285714 Z"></path></g></svg>
        <!--[ Stats Name ]-->
        Videos
      </div>
      <div class="statsNumber odometer" id="youtubeVideo"></div>
    </div>
  </div>
  
  <!--[ Views Number ]-->
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <!--[ Change SVG Icon ]-->
       <svg class="line" viewbox="0 0 24 24"><g transform="translate(2.000000, 4.000000)"><path d="M13.1643,8.0521 C13.1643,9.7981 11.7483,11.2141 10.0023,11.2141 C8.2563,11.2141 6.8403,9.7981 6.8403,8.0521 C6.8403,6.3051 8.2563,4.8901 10.0023,4.8901 C11.7483,4.8901 13.1643,6.3051 13.1643,8.0521 Z"></path><path d="M0.7503,8.0521 C0.7503,11.3321 4.8923,15.3541 10.0023,15.3541 C15.1113,15.3541 19.2543,11.3351 19.2543,8.0521 C19.2543,4.7691 15.1113,0.7501 10.0023,0.7501 C4.8923,0.7501 0.7503,4.7721 0.7503,8.0521 Z"></path></g></svg>
        <!--[ Stats Name ]-->
        Views
      </div>
      <div class="statsNumber odometer" id="youtubeView"></div>
    </div>
  </div>
    <!--[ Since ]-->
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <!--[ Change SVG Icon ]-->
        <svg class="line" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(2.000000, 2.000000)"><path d="M19.2498,10.0001 C19.2498,15.1081 15.1088,19.2501 9.9998,19.2501 C4.8918,19.2501 0.7498,15.1081 0.7498,10.0001 C0.7498,4.8911 4.8918,0.7501 9.9998,0.7501 C15.1088,0.7501 19.2498,4.8911 19.2498,10.0001 Z"></path><polyline points="14.1907 10.7672 9.6607 10.6932 9.6607 5.8462"></polyline></g></svg>
        <!--[ Stats Name ]-->
       Started on
      </div>
      <div class="statsNumber">Dec 2022</div>
    </div>
  </div>
</div>

Adding Telegram Channel or Group Stats

Now in our last step, we will add telegram live member count on our about us page. You can add your telegram group members or channel subscribers count.

First, Let’s Add HTML For it.

<!--[ Telegram Count ]-->
<h3 class="statsHeading">
  <!--[ Stats Heading ]-->
  Telegram Stats
</h3>

<div class="statsWebsite">
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <!--[ Change SVG Icon ]-->
         <svg class="line" viewbox="0 0 24 24"><g transform="translate(1.000000, 3.000000)"><path d="M10.9725,17.3682 C7.7335,17.3682 4.9665,16.8782 4.9665,14.9162 C4.9665,12.9542 7.7155,11.2462 10.9725,11.2462 C14.2115,11.2462 16.9785,12.9382 16.9785,14.8992 C16.9785,16.8602 14.2295,17.3682 10.9725,17.3682 Z"></path><path d="M10.9725,8.4487 C13.0985,8.4487 14.8225,6.7257 14.8225,4.5997 C14.8225,2.4737 13.0985,0.7497 10.9725,0.7497 C8.8465,0.7497 7.12248426,2.4737 7.12248426,4.5997 C7.1165,6.7177 8.8265,8.4417 10.9455,8.4487 L10.9725,8.4487 Z"></path><path d="M17.3622,7.3916 C18.5992,7.0606 19.5112,5.9326 19.5112,4.5896 C19.5112,3.1886 18.5182,2.0186 17.1962,1.7486"></path><path d="M17.9432,10.5444 C19.6972,10.5444 21.1952,11.7334 21.1952,12.7954 C21.1952,13.4204 20.6782,14.1014 19.8942,14.2854"></path><path d="M4.5838,7.3916 C3.3458,7.0606 2.4338,5.9326 2.4338,4.5896 C2.4338,3.1886 3.4278,2.0186 4.7488,1.7486"></path><path d="M4.0018,10.5444 C2.2478,10.5444 0.7498,11.7334 0.7498,12.7954 C0.7498,13.4204 1.2668,14.1014 2.0518,14.2854"></path></g></svg>
        <!--[ Stats Name ]-->
        Channel Subscribers
      </div>
      <div class="statsNumber odometer" id="channelMembers"></div>
    </div>
  </div>
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <!--[ Change SVG Icon ]-->
         <svg class="line" viewbox="0 0 24 24"><g transform="translate(1.000000, 3.000000)"><path d="M10.9725,17.3682 C7.7335,17.3682 4.9665,16.8782 4.9665,14.9162 C4.9665,12.9542 7.7155,11.2462 10.9725,11.2462 C14.2115,11.2462 16.9785,12.9382 16.9785,14.8992 C16.9785,16.8602 14.2295,17.3682 10.9725,17.3682 Z"></path><path d="M10.9725,8.4487 C13.0985,8.4487 14.8225,6.7257 14.8225,4.5997 C14.8225,2.4737 13.0985,0.7497 10.9725,0.7497 C8.8465,0.7497 7.12248426,2.4737 7.12248426,4.5997 C7.1165,6.7177 8.8265,8.4417 10.9455,8.4487 L10.9725,8.4487 Z"></path><path d="M17.3622,7.3916 C18.5992,7.0606 19.5112,5.9326 19.5112,4.5896 C19.5112,3.1886 18.5182,2.0186 17.1962,1.7486"></path><path d="M17.9432,10.5444 C19.6972,10.5444 21.1952,11.7334 21.1952,12.7954 C21.1952,13.4204 20.6782,14.1014 19.8942,14.2854"></path><path d="M4.5838,7.3916 C3.3458,7.0606 2.4338,5.9326 2.4338,4.5896 C2.4338,3.1886 3.4278,2.0186 4.7488,1.7486"></path><path d="M4.0018,10.5444 C2.2478,10.5444 0.7498,11.7334 0.7498,12.7954 C0.7498,13.4204 1.2668,14.1014 2.0518,14.2854"></path></g></svg>
        <!--[ Stats Name ]-->
        Group Members
      </div>
      <div class="statsNumber odometer" id="groupMembers"></div>
    </div>
  </div>
</div>

CSS Stylesheets and JS

<style>/*<![CDATA[*/
/* About Author CSS */ .aboutAuthor{padding:60px 0 20px 0} .aboutAuthor .aboutCont{justify-content:center;position:relative;display:flex;max-width:95%;margin:auto;padding:80px 30px 95px 30px;background-color:#fff;box-shadow:0 10px 40px rgba(149,157,165,.2);border-radius:20px} .aboutAuthor .aboutCont img{box-shadow:0 5px 20px rgba(0,0,0,.2);padding:0;border:7px solid #fff;width:120px;height:120px;position:absolute;border-radius:50%;top:-60px;pointer-events:none} .aboutAuthor .aboutCont p{margin:0;text-align:center;font-family:var(--fontBa)} .drK .aboutAuthor .aboutCont{background:var(--darkBs);box-shadow:0 10px 40px rgba(0,0,0,.2)} .drkM .aboutAuthor .aboutCont img{background-image:linear-gradient(to top right,#363636,#717171);border-color:#fff;box-shadow:0 10px 40px rgba(0,0,0,.2)}.drK .aboutAuthor .aboutCont img{border-color:var(--darkBs);box-shadow:0 10px 40px rgba(0,0,0,.2)}
/* About Author Button */ .aboutAuthor .aboutCont .athrBtn{text-align:center;position:absolute;bottom:0;left:0;right:0} .aboutAuthor .aboutCont .athrBtn .button{border-radius:50px;margin:0 0 30px} .aboutAuthor .aboutCont .athrBtn .button svg{stroke:var(--darkT);margin-right:5px}
/* Website Stats */ .statsHeading{text-align:center} .statsWebsite{display:flex;flex-wrap:wrap;flex-direction:column;margin:12px auto} .statsCont{background-color:#fff;display:flex;justify-content:center;padding:8px;width:95%;margin:12px auto;box-shadow:0 5px 20px rgba(149,157,165,.2);border-radius:20px} .statsCont .stats{height:80px;width:200px;display:flex;align-items:center;justify-content:center; flex-direction:column; margin:0 35px} .statsCont .statsName{display:inline-flex;align-items:center;font-size:16px;font-family:var(--fontBa)} .statsCont .statsName svg{margin-right:7px} .statsCont .statsNumber{font-family:var(--fontB);font-size:30px;margin-top:6px;font-weight:normal} .statsNumber.v >span::before{content:attr(data-text)} .drK .statsCont{background-color:var(--darkBs);box-shadow:0 5px 20px rgba(0,0,0,.2)}
@media screen and (min-width:641px){.aboutAuthor .aboutCont{max-width:97%} .statsWebsite{flex-direction:row} .statsCont{max-width:46%;margin:12px}}
/* To change Profile background */
/* Light Mode */
.aboutAuthor .aboutCont img{background-color:#ffeaef}
/* Dark Mode */
.drK .aboutAuthor .aboutCont img{background-image:linear-gradient(to top right,#363636,#717171)}
/*]]>*/</style>

Let’s Add Odometer Stylesheet and Script (For Counting Animation)

Now add the below css and the script for the style and animation.

<!--[ Odometer Stylesheet ]-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.8/themes/odometer-theme-default.min.css" rel="stylesheet">
<!--[ Odometer JS ]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.8/odometer.min.js"></script>

Adding Main Statistics Script

This is the main script to fetch and write youtube and Telegram Stats, we need API Keys to fetch Stats from Youtube and Telegram. 

So follow the Steps Carefully to get the API key and show Stats Without Any Errors.

Let’s Copy Paste Below Script First;

Replace the Below parts with correct information.

<script>
  /*<![CDATA[*/
  /* Get Ajax */
  function getAjax(t){var r=new XMLHttpRequest;try{r=new XMLHttpRequest}catch(e){try{r=new ActiveXObject("Msxml2.XMLHTTP")}catch(e){try{r=new ActiveXObject("Microsoft.XMLHTTP")}catch(e){return console.warn("Something went wrong!"),!1}}}if(r.open("GET",t.url,t.async),t.setRequestHeader)for(var e in t.setRequestHeader)r.setRequestHeader(e,t.setRequestHeader[e]);r.send(),r.onreadystatechange=function(){var e;4===r.readyState&&(200===r.status?(e=r.responseText,t.success&&t.success(e)):t.error&&t.error(r))}};
  
  document.addEventListener('DOMContentLoaded', function (){
    /* Config */
    const tgbTkn = '5323549281:AAEaH8oAEbzxTGZO3hURjAKdka5ukQaJzqU',
          gcpTkn = 'AIzaSyAR1senSnj8tWYaZyR50W_D_YX82Z7Bef8',
          group = '@Fineshop_design',
          tgChnl = '@fineshopdesign',
          ytChnl = 'UCdsDm0QmfKK1pTG7r3mrHZg';
    
    /* Posts Count */
    getAjax({
      url: '//' + window.location.hostname + '/feeds/posts/default?alt=json',
      async: true,
      success: function(data){
        data = JSON.parse(data);
        document.querySelector('#postCount').innerHTML = parseInt(data.feed.openSearch$totalResults.$t,10);
      }
    });
    
    /* Comments Count */
    getAjax({
      url: '//' + window.location.hostname + '/feeds/comments/default?alt=json',
      async: true,
      success: function(data){
        data = JSON.parse(data);
        document.querySelector('#commentCount').innerHTML = parseInt(data.feed.openSearch$totalResults.$t,10);
      }
    });
    
    /* Telegram Group Members Count */
    getAjax({
      url: 'https://api.telegram.org/bot' + tgbTkn + '/getChatMembersCount?chat_id=' + group,
      async: true,
      setRequestHeader: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      success: function(data){
        data = JSON.parse(data);
        document.querySelector('#groupMembers').innerHTML = data['result'];
      }
    });
    
    /* Telegram Channel Subscribers Count */
    getAjax({
      url: 'https://api.telegram.org/bot' + tgbTkn + '/getChatMembersCount?chat_id=' + tgChnl,
      async: true,
      setRequestHeader: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      success: function(data){
        data = JSON.parse(data);
        document.querySelector('#channelMembers').innerHTML = data['result'];
      }
    });
    
    /* YouTube Stats */
    getAjax({
      url: 'https://www.googleapis.com/youtube/v3/channels?part=statistics&id=' + ytChnl + '&key=' + gcpTkn,
      async: true,
      success: function(data){
        data = JSON.parse(data);
        document.querySelector('#youtubeSubscriber').innerHTML = data["items"][0].statistics.subscriberCount;
        document.querySelector('#youtubeVideo').innerHTML = data["items"][0].statistics.videoCount;
        document.querySelector('#youtubeView').innerHTML = data["items"][0].statistics.viewCount;
      }
    });
  });
  /*]]>*/
</script>
  • Change tgbTkn to your Telegram bot API Token.
  • Change gcpTkn to your Google Cloud Platform API.
  • Change group to your Telegram Group Username.
  • Change tgChnl to your Telegram Channel Username.
  • Change ytChnl to your Youtube Channel URL (Standard Channel URL).

The API keys are sensitive anyone can misuse or increase the usage, So please Restrict it, Also Use any javascript obfuscator to obfuscate the JS codes after making all the changes. You can revoke and generate a new API Token of your bot through Bot Father at any time you think something is going wrong with the bot token.

To get a Channel id go to https://www.youtube.com/account_advanced

To get a Google Cloud Platform API follow the below steps:-

  • Go to Google Cloud Console
  • Create a Project
  • Click on Go to API and Services and then go to Library and Select Youtube data API V3 and Enable it.
  • Then go to Credentials; Click on Create Credentials and Select API Key then Copy Key.

To get a Telegram bot API Token:-

  • Go to Botfather Bot and start the bot.
  • In the Menu, Click on Create a New Bot.
  • Choose Bot Name and Username.
  • Now Copy the Bot API Token.

Done! You Have successfully Added About us Page with all social live numbers.

If you have any questions or need further help setting up, feel free to drop a comment below.

Stay tuned for more tutorials to elevate your Blogger and WordPress sites!

Share your love
Sagar Vishnoi
Sagar Vishnoi

Sagar Vishnoi is a digital entrepreneur and blogger focused on providing solutions in blogging, WordPress, and eCommerce. Through his website, BytesAndBucks.com, he shares tutorials, resources, and tools aimed at helping individuals and businesses succeed online.

Articles: 15

Related Posts

4 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *