Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 24
        • Thủ thuật Blogspot 69
          • Tiện ích Blogspot 31
            Máy tính
            • Phần mềm 45
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 41

                    Hướng dẫn thiết kế Blog YouTube video sử dụng API key

                    Bài này mình chỉ viết khái quát cách nhúng video và sử dụng id của video cùng API key để lấy thông tin của video đó trên YouTube. Còn cách thiết kế bố cục như thế nào bạn có thể tham khảo thêm trên mạng hoặc trong chuyên mục Thiết kế Blogspot của Blog mình. Blog video mình làm mẫu các bạn tham khảo: https://viettubenet.blogspot.com/

                    Hướng dẫn thiết kế Blog YouTube video sử dụng API key

                    Đã là thiết kế bạn phải thiết kế tối ưu làm sao cho nó đơn giản nhất với người sử dụng khi đăng bài viết. Bài viết mình chia làm 4 phần như sau:
                    1. Nhúng video
                    2. Get API key
                    3. Tạo Script lấy thông tin
                    4. Lấy ảnh bài viết ra trang index
                    Phần 1: Nhúng video

                    Có 4 vấn đề bạn cần quan tâm

                    - Trong bài đăng bắt buộc phải có iframe chứa link nhúng video để khi xuất bản có thể lấy được ảnh video ngoài trang index, link ảnh meta và link ảnh trong feed sử dụng làm bài viết liên quan, bài viết mới theo nhãn.

                    - Video phải tự động play khi tải trang

                    - id của video sử dụng trong script để lấy thông tin video, id này có thể sử dụng thẻ data gọi dữ liệu nếu widget Blog1 version 1 sử dụng thẻ data <data:post.snippet/> còn nếu trong widget Blog1 version 2 sử dụng thẻ data <b:eval expr='data:post.body snippet { length: 100, links: false, linebreaks: false, ellipsis: false }'/>

                    Tổng hợp lại khi đăng bài viết sử dụng đoạn code bắt buộc như sau:

                    <div class='snippet'>id video</div>
                    <iframe id="player" allow="autoplay" src="https://www.youtube.com/embed/id video"></iframe>

                    Đoạn id video mình đánh dấu màu đỏ được lấy từ link video trên YouTube ví dụ link xem video có dạng https://www.youtube.com/watch?v=x-UEksXSLGs thì x-UEksXSLGs là id video thay vào đoạn mã trên ta được:

                    <div class='snippet'>x-UEksXSLGs</div>
                    <iframe id="player" allow="autoplay" src="https://www.youtube.com/embed/x-UEksXSLGs"></iframe>

                    Hướng dẫn thiết kế Blog YouTube video sử dụng API key
                    Hình minh họa khi đăng bài viết chèn mã bên khung HTML

                    - Video phải reponsive với tất cả kích thước màn hình điều đó bạn có thể thiết kế css như sau:

                    Copy
                     .video-container {
                        position: relative;
                        padding-bottom: 56.25%;
                    }
                    .video-container iframe {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                    }
                    . snippet {
                        display:none!important;
                    }

                    Sau đó bạn đặt class video-container trước thẻ data <data:post.body/> như sau:

                    Copy
                    <div class='video-container'>
                      <data:post.body/>
                    </div>

                    Phần 2: Get API key

                    Đầu tiên bạn truy cập link https://console.developers.google.com/ có giao diện như hình sau:


                    Bạn tích vào các ô Yes sau đó chọn ACCEPT chấp thuận điều khoản sử dụng. Tiếp theo bạn cần tạo Project trên góc phải

                    Hướng dẫn thiết kế Blog YouTube video sử dụng API key
                    Khi tạo xong bạn cần kích hoạt thư viện API tên YouTube Data API v3

                    Hướng dẫn thiết kế Blog YouTube video sử dụng API key

                    Khi kích hoạt xong ở bước cuối tạo API key

                    Hướng dẫn thiết kế Blog YouTube video sử dụng API key

                    API key được tạo tự động và có thể thay đổi được bằng RESTRICT KEY

                    Hướng dẫn thiết kế Blog YouTube video sử dụng API key

                    Ví dụ khi tạo xong ta có key là AIzaSyCd7NXRblaJiHEhj8TXzRmZxr3gkpNCBZ8 và key này có thể sử dụng get cho nhiều tài khoản và nhiều Blog khác nhau nhưng bạn phải quản lý key này không được xóa vì nếu xóa tất cả các Blog sử dụng key này đều không thề get video được.

                    Phần 3: Tạo Script lấy thông tin

                    Đầu tiên bạn đăng ký một thẻ tag b:includable chứa script trong widget Blog 1 để sau này thuận tiện cho việc chỉnh sửa, với widget Blog1 v1 chèn ngay sau thẻ tag <b:includable id='main' var='top'>...</b:includable> còn nếu widget Blog1 v2 chèn ngay sau thẻ tag <b:includable id='main'>...</b:includable>

                    Copy
                    <b:includable id='YouTube'>
                      <b:if cond='data:view.isPost'>
                        <script>
                        // Viết script trong này
                        </script>
                      </b:if>
                    </b:includable>

                    Tiếp tục đặt thẻ tag <b:include name='YouTube'/> dưới cùng trong thẻ tag <b:includable id='post' var='post'>...</b:includable>

                    Copy
                    <b:includable id='post' var='post'>
                      ...
                      <b:include name='YouTube'/>
                    </b:includable>

                    Bây giờ chúng ta bắt đầu viết script nhưng trước hết mình giới thiệu qua về cách get của một id video sử dụng API key, mẫu tham khảo như sau:

                    https://www.googleapis.com/youtube/v3/videos?id=x-UEksXSLGs&key=AIzaSyCd7NXRblaJiHEhj8TXzRmZxr3gkpNCBZ8&part=snippet,statistics

                    Với x-UEksXSLGs là id video và AIzaSyCd7NXRblaJiHEhj8TXzRmZxr3gkpNCBZ8 là API key mà mình vừa mới tạo ở phần 2.

                    Khi sử dụng link này trên trình duyệt ta được hình mô tả như dưới:

                    Hướng dẫn thiết kế Blog YouTube video sử dụng API key

                    Như vậy từ link get này ta có thể lấy được thông tin như: Ngày xuất bản (publishedAt), id của kênh (channelId), Tiều đề video (title), mô tả video (description), link ảnh, tên kênh (channelTitle), lượt xem (viewCount), lượt thích (likeCount), không thích (dislikeCount), tồng số nhận xét (commentCount)...

                    Bây giờ chúng ta sẽ tạo script như sau:

                    + Tạo script để video tự động play khi tải trang

                    Copy
                    var id = '<b:eval expr='data: post.body snippet { length: 100, links: false, linebreaks: false, ellipsis: false }'/>'; // Lấy id video từ bài đăng trong Phần 1
                    var iframe = 'https://www.youtube.com/embed/' + id + '?loop=1&amp;rel=0&amp;fs=1&amp;showinfo=0&amp;cc_load_policy=1&amp;iv_load_policy=3&amp;modestbranding=1&enablejsapi=1';
                    $('#player').attr('frameborder', '0').attr('allowfullscreen', '1').attr('allow', 'autoplay').attr('src', (iframe));
                    var tag = document.createElement('script');
                    tag.src = "https://www.youtube.com/iframe_api";
                    var firstScriptTag = document.getElementsByTagName('script')[0];
                    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
                    var player;
                    function onYouTubeIframeAPIReady() {
                        player = new YT.Player('player', {
                            events: {
                                'onReady': onPlayerReady
                            }
                        });
                    }
                    function onPlayerReady(event) {
                        event.target.playVideo();
                    }

                    + Tạo script lấy thông tin

                    Copy
                    var key = 'AIzaSyCd7NXRblaJiHEhj8TXzRmZxr3gkpNCBZ8'; // lấy trong Phần 2
                    $.ajax({
                        url: 'https://www.googleapis.com/youtube/v3/videos?id=' + id + '&amp;key=' + key + '&amp;part=snippet,statistics',
                        type: 'get',
                        dataType: 'json',
                        success: function(data) {
                            var w = ' thag ';
                            var x = ', ';
                            var t = data.items[0].snippet.publishedAt;
                            var publishedAt = t.substring(8, 10) + w + t.substring(5, 7) + x + t.substring(0, 4); // ngày xuất bản
                            var channelId = data.items[0].snippet.channelId; // id kênh
                            var channel = 'https://www.youtube.com/channel/' + channelId; // link kênh
                            var subscribe = 'https://www.youtube.com/channel/' + channelId + '?sub_confirmation=1'; // link đăng ký kênh
                            var title = data.items[0].snippet.title; // tiêu đề video
                            var description = data.items[0].snippet.description; // mô tả video
                            var channelTitle = data.items[0].snippet.channelTitle; // tên kênh
                            var viewCount = data.items[0].statistics.viewCount; // lượt xem video
                            var numviewCount = parseInt(viewCount).toLocaleString(); // định dạng lượt xem video
                            var likeCount = data.items[0].statistics.likeCount; // số lượt thích video
                            var dislikeCount = data.items[0].statistics.dislikeCount; // số lượt không thích video
                            function nFormatter(likeCount) { // định dạng lượt thích video
                                if (likeCount >= 1000000000) {
                                    return (likeCount / 1000000000).toFixed(1).replace(/\.0$/, '') + ' T';
                                }
                                if (likeCount >= 1000000) {
                                    return (likeCount / 1000000).toFixed(1).replace(/\.0$/, '') + ' TR';
                                }
                                if (likeCount >= 1000) {
                                    return (likeCount / 1000).toFixed(1).replace(/\.0$/, '') + ' N';
                                }
                                return likeCount;
                            }
                            function nFormatter(dislikeCount) { // định dạng lượt không thích video
                                if (dislikeCount >= 1000000000) {
                                    return (dislikeCount / 1000000000).toFixed(1).replace(/\.0$/, '') + ' T';
                                }
                                if (dislikeCount >= 1000000) {
                                    return (dislikeCount / 1000000).toFixed(1).replace(/\.0$/, '') + ' TR';
                                }
                                if (dislikeCount >= 1000) {
                                    return (dislikeCount / 1000).toFixed(1).replace(/\.0$/, '') + ' N';
                                }
                                return dislikeCount;
                            }
                            $('.video_published').html(publishedAt); // hiển thị ngày xuất bản
                            $('.video_title').html(title); // hiển thị tiêu đề video
                            $('.video_description').html(description); // hiển thị mô tả video
                            $('.channel_Title').html(channelTitle); // hiển thị tên kênh
                            $('.channel').attr('href', (channel)).attr('title', (channelTitle)); // Add link kênh vào tên kênh
                            $('.subscribe').attr('href', (subscribe)); // Add link đăng ký vào nút Đăng ký kênh   
                            $('.view_count').html(numviewCount); // hiển thị lượt xem video
                            $('.like_count').html(nFormatter(likeCount)); // hiển thị lượt thích video
                            $('.dislike_count').html(nFormatter(dislikeCount)); // hiển thị lượt không thích video
                            $.ajax({
                                url: 'https://www.googleapis.com/youtube/v3/channels?id=' + channelId + '&amp;key=' + key + '&amp;part=snippet,statistics', // link sử dụng get lấy thông tin kênh
                                type: 'get',
                                dataType: 'json',
                                success: function(data) {
                                    var userphoto = data.items[0].snippet.thumbnails.default.url; // link ảnh của kênh
                                    var subscriberCount = data.items[0].statistics.subscriberCount; // số lượt đăng ký kênh
                                    function nFormatter(subscriberCount) { // định dạng số lượt đăng ký kênh
                                        if (subscriberCount >= 1000000000) {
                                            return (subscriberCount / 1000000000).toFixed(1).replace(/\.0$/, '') + ' T';
                                        }
                                        if (subscriberCount >= 1000000) {
                                            return (subscriberCount / 1000000).toFixed(1).replace(/\.0$/, '') + ' TR';
                                        }
                                        if (subscriberCount >= 1000) {
                                            return (subscriberCount / 1000).toFixed(1).replace(/\.0$/, '') + ' N';
                                        }
                                        return subscriberCount;
                                    }
                                    $('#img').attr('src', (userphoto)).attr('title', (channelTitle)); // hiển thị ảnh của kênh
                                    $('.subscriber_Count').html(nFormatter(subscriberCount)); // hiển thị lượt đăng ký
                                }
                            });
                        }
                    });

                    + Đặt Html hiển thị ngay dưới post-body thường là trong post-footer

                    Copy
                    <h1 class="video_title"></h1> // tiêu đề video
                    <span class="view_count"></span> // lượt xem
                    <span class="view_count"></span> // lượt thích
                    <span class="dislike_count"></span> // không thích
                    <span class="post-author">
                    <img id="img"> // ảnh kênh
                    <a class="channel" target="_blank"> // link kênh
                    <span class="channel_Title"></span> // tên kênh
                    </a>
                    </span>
                    <span class="video_published"></span> // ngày xuất bản
                    <div class="subscribe_button">
                    <a class="subscribe" target="_blank" > // link đăng ký kênh
                    <span class="subscriber_Count"></span> // lượt theo dõi kênh
                    </a>
                    </div>
                    <div class="video_description"></div> // mô tả video

                    Phần 4: Lấy ảnh bài viết ra trang index

                    Đặt tag img như sau:

                    Copy
                    <img expr:alt='data:post.title' expr:src='resizeImage(data:post.featuredImage,500,&quot;2:1&quot;)'/>

                    Chấm hết bài!!!
                    Nội dung chính