0

I'm using Google Custom Search API to fetch and publish JSON callback results. I've been tinkering around with the json results callback variables as per Google recommend documentation here:

https://github.com/googleapis/google-api-java-client-services/blob/master/clients/google-api-services-customsearch/v1/1.30.1/resources/customsearch.v1.json

Wondering how I can use either Javascript variable or other to add CSS/styling to HTML elements that I'm using to produce styled titles, desctiptions & links for Google custom search results on the page?

Here's the code I'm using now:

<div>
<script>
  function hndlr(response) {
  for (var i = 0; i < response.items.length; i++) {
    var item = response.items[i];
    // in production code, item.htmlTitle should have the HTML entities escaped.
    document.getElementById("content").innerHTML += "<span>" + item.title;
    document.getElementById("content").innerHTML += "<p>" + item.snippet +"<u><a href='"+item.link+"'>(continue reading)</a>";
  }
}
</script>
<script src="https://www.googleapis.com/customsearch/v1?key=API_KEY&cx=GOOGLE_CUSTOM_SEARCH_ID&q=MY+QUERY+WORDSS&callback=hndlr">
</script>
</div>

How should I add styling to the HTML elements in my code for span, p, etc?

Also, is there a more simple method to just fetch the top ten search results with HTML styling same as it appears Google.com search results page? This would be nice!

Thanks for your help!

max
  • 83
  • 1
  • 11
  • Does this answer your question? [How can I set multiple CSS styles in JavaScript?](https://stackoverflow.com/questions/3968593/how-can-i-set-multiple-css-styles-in-javascript) – Richard May 03 '20 at 05:23

1 Answers1

1

For a simpler method, consider using the Search Element -- you can do custom rending of results using the Callbacks API. Plus, it's free

Andy
  • 507
  • 3
  • 5
  • Thank you! This looks promising. I wonder how to go about programmatically creating the query in the API code to make the query terms = the wordpress post title? https://wordpress.stackexchange.com/questions/314457/how-to-get-current-page-title-inside-a-page-itself-in-a-shortcode-and-in-page-co – max May 05 '20 at 20:09