Thêm bài viết liên quan bằng Google Custom Search Engine

POSTED ON 11/11/2016

Thêm bài viết liên quan cho Blogspot và WordPress bằng Google Custom Search Engine.

Chào các bạn,

hư các bạn thường thấy, sau mỗi bài viết trên các Blog hay website chúng ta thường sẽ thấy một danh sách các bài viết liên quan. Và chúng ta cũng có khá nhiều cách để thêm bài viết liên quan cho Blogspot hay WordPress.

Tuy nhiên, hôm nay mình sẽ chia sẻ tới các bạn một cách khá hay nữa đó là dùng công cụ Google Custom Search Engine.

Xem thêm:

Hướng dẫn tạo bài viết liên quan cho Blogspot – Không Thumbnail
Thêm bài viết liên quan theo Tag cho WordPress không cần Plugin

Các bước thực hiện

Bước 1: Đăng nhập vào gmail và truy cập vào địa chỉ sau: cse.google.com

Bước 2: Click vào Tạo công cụ tìm kiếm tùy chỉnh.

Bước 3: Các bạn điền tên địa chỉ web của mình vào phần Trang web để tìm kiếm. Nếu có nhiều hơn 1 tên miền thì cứ điền mỗi tên miền vào 1 dòng là được. Sau đó là chọn tên cho công cụ tìm kiếm, cái này thì nó tự động rồi, nhưng nếu bạn muốn sửa lại thì cũng không sao. Sau khi nhập xong thì click vào Tạo.

Bước 4: Click vào Nhận mã.

Bước 5: Bây giờ, các bạn sẽ nhận được một đoạn mã tương tự như sau:

<script>
  (function() {
    var cx = '004032395659677657430:ekrwef_0m7c';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

view raw 4759-1 hosted with ❤ by GitHub

Các bạn hãy chú ý đến đoạn 004032395659677657430:ekrwef_0m7c.

Bước 6: Bây giờ, các bạn hãy copy dòng trên và thay vào phần xxxxxxxxxxx đoạn code dưới đây.

<div class="quan-tam">
<h3 class="heading">Bạn nên xem</h3>
<div id='cse-search-form' style='width: 100%;height:300px;overflow-y: scroll;'>Đang tải...</div>
<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('search', '1', {language: 'vi'});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl("xxxxxxxxxxx");
customSearchControl.setResultSetSize(google.search .Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw('cse-search-form');
customSearchControl.execute("yyyyyyyyyyy");
}, true);
</script>
</div>

view raw 4759-2 hosted with ❤ by GitHub

Đối với Blogspot

Bước 7: Các bạn tiếp tục thay phần yyyyyyyyyyy thành <data:blog.title/>. Sau đó copy đoạn code đã hoàn thiện và dán vào vị trí muốn hiển thị. Ví dụ dưới đây là đoạn code đã hoàn thiện của mình:

<div class="quan-tam">
<h3 class="heading">Bạn nên xem</h3>
<div id='cse-search-form' style='width: 100%;height:300px;overflow-y: scroll;'>Đang tải...</div>
<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('search', '1', {language: 'vi'});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl("004032395659677657430:ekrwef_0m7c");
customSearchControl.setResultSetSize(google.search .Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw('cse-search-form');
customSearchControl.execute("<data:blog.title/>");
}, true);
</script>
</div>

view raw 4759-3 hosted with ❤ by GitHub

Đối với WordPress

Bước 7: Các bạn tiếp tục thay phần yyyyyyyyyyy thành <?php the_title(); ?>. Sau đó copy đoạn code đã hoàn thiện và dán vào vị trí muốn hiển thị. Thường thì các bạn nên chèn vào file single.php. Ví dụ dưới đây là đoạn code đã hoàn thiện của mình:

<div class="quan-tam">
<h3 class="heading">Bạn nên xem</h3>
<div id='cse-search-form' style='width: 100%;height:300px;overflow-y: scroll;'>Đang tải...</div>
<script src='https://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('search', '1', {language: 'vi'});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl("004032395659677657430:ekrwef_0m7c");
customSearchControl.setResultSetSize(google.search .Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw('cse-search-form');
customSearchControl.execute("<?php the_title(); ?>");
}, true);
</script>
</div>

view raw 4759-4 hosted with ❤ by GitHub

Bước 8: Các bạn chèn đoạn CSS sau vào blog cho đẹp xíu nhé 🙂

.quan-tam{height:346px;margin-bottom:20px;border:1px solid #e6e6e6}
.quan-tam h3.heading{font-size:24px;margin-bottom:0}
.quan-tam table td,table th{border-width:0;padding:5px 10px}
.quan-tam .gsc-webResult .gsc-result{padding:0!important}
.quan-tam .gsc-cursor{width:100%;text-align:center;float:left;font-size:20px;margin-top:15px}
.quan-tam .gs-result .gs-title,.quan-tam .gs-result .gs-title *{text-decoration:none!important;color:#FF9800!important}
.quan-tam .gs-result .gs-title a{text-decoration:none!important;color:#FF9800!important}
.quan-tam .gs-result a.gs-visibleUrl,.quan-tam .gs-result .gs-visibleUrl{font-weight:700}
.quan-tam .gs-bidi-start-align.gs-snippet{line-height:20px;margin:5px 0 0}
.quan-tam .gsc-results.gsc-webResult{width:100%}
.quan-tam .gsc-search-box,.quan-tam .gsc-above-wrapper-area,.quan-tam .gsc-resultsHeader,.quan-tam .gcsc-branding{display:none}

view raw 4759-5 hosted with ❤ by GitHub

Tổng kết

Như vậy là mình đã hướng dẫn các bạn cách thêm bài viết liên quan cho Blogspot / WordPress bằng Google Custom Search Engine rồi. Với cách này, nó sẽ lấy tên bài viết của các bạn làm từ khóa tìm kiếm và sau đó đưa ra các bài viết có tựa đề tương tự hoặc có chứa các từ khóa trong tên bài viết của bạn.
DEMO: https://doiguocmoc.com

Mocgin.com

.