Статьи

Учебник по настройке пользовательского API Google Search

Январь 2, 2019

googlesearchapi

Итак, сегодня я сделал небольшое руководство о том, как настроить Google Search API для вашего блога / веб-сайта. Это можно использовать вместо стандартных средств поиска, обычно предоставляемых в темах WordPress. Это действительно легко настроить! Вы можете настроить поиск так, чтобы показывать результаты только с вашего блога / веб-сайта и других поисков, таких как изображения, видео, новости и другие (полный список см. Ниже).

Live Demo
Скачать источник

Как это сделать

  1. Получите ключ Google API
  2. Введите свой ключ в коде ниже
  3. Настройте поиск (добавьте свое собственное доменное имя!)
  4. Настройте стили в соответствии с вашим сайтом
  5. Наслаждайтесь!

JavaScript 

google.load("search", "1", {"language" : "en"}); // Call this function when the page has been loaded function initialize() { var searchControl = new google.search.SearchControl(); // site restricted web search var siteSearch = new google.search.WebSearch(); siteSearch.setUserDefinedLabel("jquery4u.com"); siteSearch.setUserDefinedClassSuffix("siteSearch"); siteSearch.setSiteRestriction("jquery4u.com"); searchControl.addSearcher(siteSearch); //Search API Topics searchControl.addSearcher(new google.search.WebSearch()); searchControl.addSearcher(new google.search.NewsSearch()); searchControl.addSearcher(new google.search.BlogSearch()); searchControl.addSearcher(new google.search.ImageSearch()); searchControl.addSearcher(new google.search.BookSearch()); searchControl.addSearcher(new google.search.VideoSearch()); //others //searchControl.addSearcher(new google.search.LocalSearch()); //searchControl.addSearcher(new google.search.PatentSearch()); // create a drawOptions object var drawOptions = new google.search.DrawOptions(); // tell the searcher to draw itself in tabbed mode drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED); searchControl.draw(document.getElementById("searchcontrol"), drawOptions); } google.setOnLoadCallback(initialize);

HTML 

  Введите поисковый запрос ниже!

CSS 

 /* the width of the controls (keep same as gsc-results for flush look) */ #searchcontrol { width:600px; } .gsc-control { width:600px; } /* the width of the search results box; no height value = nice auto look */ .gsc-results { width:600px; } /* the width of the search input */ .gsc-input { width:20px; } /* hide "powered by google" (optional) */ .gsc-branding { display:none; } /* custom colors */ .gs-title a { color:orange; font-weight:bold; } #searchcontrol a { color:orange; }

Руководство для разработчиков

37
Share: