Tạo Trang Giới thiệu Số liệu Thống kê Trực tiếp của kênh Youtube
23 minute read
Tất cả chúng ta đều biết về chúng tôi trang là một trong những trang quan trọng nhất của trang web của chúng tôi. Khách truy cập biết về trang web của chúng tôi và công ty của bạn từ trang giới thiệu về chúng tôi.
Trong hướng dẫn này, tôi sẽ hướng dẫn bạn " Cách tạo nghề nghiệp Trang giới thiệu về chúng tôi" cho Trang web Blogger của bạn Với Số liệu thống kê Trực tiếp trên các kênh Telegram và youtube. Thậm chí, bạn cũng có thể sử dụng nó trên trang web WordPress của mình.
Trang Hoàn hảo về chúng tôi là gì?
Hôm nay Mọi người chỉ Viết một số đoạn văn về trang web trên một trang và liên kết của nó ở chân trang hoặc ở một nơi nào khác và gọi nó là Trang Giới thiệu về chúng tôi.
Nhưng trong Thực tế, trang giới thiệu của bạn phải để lại ấn tượng mạnh cho khách truy cập.
Giới thiệu là một Trang nơi khách truy cập tìm hiểu thêm về bạn và doanh nghiệp hoặc trang web của bạn, vì vậy hãy đảm bảo rằng bạn cung cấp tất cả các chi tiết cần thiết trên trang này.
Trang Giới thiệu của Bạn Nên Chứa:
- Tại sao bạn bắt đầu kinh doanh hoặc trang web?
- Bạn cung cấp những gì?
- Ai bắt đầu và ai đứng sau trang web hoặc doanh nghiệp này?
- Cộng đồng của bạn lớn đến mức nào?
- Các nút kêu gọi hành động như theo dõi trên mạng xã hội, đăng ký nhận bản tin, v.v.
Cách tạo trang Giới thiệu hoàn hảo cho Blogger
Trong bài đăng này, chúng tôi đã chia sẻ mã nguồn trang đầy đủ, bạn chỉ cần sao chép dán và thực hiện một số thay đổi theo các bước dưới đây:
1. Hãy viết gì đó về trang web của bạn
Đầu tiên, chúng ta cần viết về trang web của mình cùng với logo và nút kêu gọi hành động .
Chúng tôi có thể sử dụng nút Kêu gọi hành động làm đăng ký nhận bản tin, liên hệ với chúng tôi, v.v.
<!--[ 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>
Bây giờ, chúng tôi Cần Thêm Thống kê Blog như tổng số bài đăng, nhận xét và tổng số lượt truy cập trang web.
Chúng tôi có thể dễ dàng tìm nạp và viết Số bài đăng và nhận xét trên Blog chỉ với một Script, nhưng khi chúng tôi nói về tổng số lượt truy cập trang web, chúng tôi cần cơ sở dữ liệu firebase.
Nếu bạn có cùng với phiên bản mới nhất của giao diện người dùng, bạn không cần phải làm bất cứ điều gì, vì giao diện người dùng cộng có một tính năng có sẵn về lượt xem trang web
Nếu bạn đang sử dụng mẫu khác, vui lòng viết số lượt xem trang web theo cách thủ công hoặc bạn có thể yêu cầu hướng dẫn về firebase để biết tổng số lượt xem trang web trên trang hướng dẫn yêu cầu của bạn.
Bạn có thể muốn đọc bài đăng này:
Thêm số liệu thống kê trang web
Sao chép và Dán các Mã HTML bên dưới để hiển thị số liệu thống kê của Trang web;
<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>
Thêm số liệu thống kê kênh Youtube
Bây giờ Chúng tôi sẽ Thêm một kênh Youtube và Kênh Telegram / Số liệu thống kê Trực tiếp của Nhóm.
Đầu tiên, hãy chuẩn bị HTML cho nó.
<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>
Thêm Kênh Telegram hoặc Số liệu thống kê Nhóm
Bây giờ trong bước cuối cùng của chúng tôi, chúng tôi sẽ thêm số lượng thành viên trực tiếp telegram trên trang giới thiệu về chúng tôi của chúng tôi. Bạn có thể thêm thành viên nhóm điện tín hoặc số người đăng ký kênh của mình.
Đầu tiên, hãy thêm HTML cho nó.
<!--[ 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 và JS
<style>/*<![CDATA[*/
/* About Author CSS */ .
{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>
Hãy thêm Biểu định kiểu và Tập lệnh của Máy đo tốc độ (Đối với Hoạt ảnh Đếm)
Bây giờ thêm css dưới đây và tập lệnh cho phong cách và hoạt ảnh thứ.
<!--[ 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>
Thêm tập lệnh thống kê chính
Đây là tập lệnh chính để tìm nạp và viết Số liệu thống kê trên youtube và Telegram, chúng ta cần Khóa API để tìm nạp Số liệu thống kê từ Youtube và Telegram.
Vì vậy, hãy làm theo các Bước một cách cẩn thận để lấy khóa API và hiển thị Số liệu thống kê mà không có bất kỳ lỗi nào.
Trước tiên, hãy sao chép, dán tập lệnh bên dưới;
Thay thế các bộ phận được đánh dấu bằng thông tin chính xác.
<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>
- Thay đổi
tgbTknthành Mã thông báo API bot Telegram của bạn . - Thay đổi
gcpTknđối với API Google Cloud Platform của bạn . - Thay đổi tên người dùng nhóm Telegram
groupcủa bạn . - Thay đổi tên người dùng kênh Telegram
tgChnlcủa bạn . - Thay đổi thành URL kênh Youtube của bạn (URL
ytChnlkênh chuẩn).
Các khóa API rất nhạy cảm mà bất kỳ ai cũng có thể sử dụng sai hoặc tăng mức sử dụng, Vì vậy, hãy Hạn chế việc sử dụng, Đồng thời sử dụng bất kỳ trình hỗ trợ javascript nào để làm xáo trộn các mã JS sau khi thực hiện tất cả các thay đổi. Bạn có thể thu hồi và tạo Mã thông báo API mới cho bot của mình thông qua Bot Father bất kỳ lúc nào bạn nghĩ rằng có điều gì đó không ổn với mã thông báo bot.
Để nhận id Kênh, hãy truy cập https://www.youtube.com/account_advanced
Để nhận API nền tảng đám mây của Google, hãy làm theo các bước sau: -
- Đi đến Bảng điều khiển đám mây của Google
- Tạo một dự án
- Nhấp vào Đi tới API và Dịch vụ, sau đó đi tới Thư viện và Chọn API dữ liệu Youtube V3 và Bật nó .
- Sau đó đi đến Thông tin đăng nhập ; Nhấp vào Tạo thông tin đăng nhập và chọn Khóa API rồi Sao chép khóa.
Để nhận Mã thông báo API bot Telegram : -
- Đi đến Botfather Botvà khởi động bot .
- Trong Menu, nhấp vào Tạo một Bot mới .
- Chọn Tên Bot và Tên người dùng.
- Bây giờ sao chép Mã thông báo API Bot.
Xong!
Đăng nhận xét