I would like to add a google custom search box in my site, which is created by using ReactJS. So the user can search content both within the site and on web.
The Google generated code is something like:
<script>
(function() {
var cx = '013626029679071:ze3ta4';
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>
Is there a way to add this into the React component? It keeps saying SyntaxError. I tried to create a component for the above code and use it in the React Component, but nothings shows up. Is this the right way to add a searchbar on React site? Any hints?
Thanks!
I think I have a solution for you without using dangerouslySetInnerHTML. Put your code in the componentDidMount block and append to the element with jQuery like so:
componentDidMount(){
const embedcode = `<script>
(function() {
var cx = '013626029654558379071:ze3tw4csia4';
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>`
$('#gsearch').html(embedcode)
}
And your DOM element:
<div id='gsearch'>
</div>
Still debugging some styling stuff, but this works!
Best,
Patrick
This perfectly works for me. Add a form element in your react and modify the snippet as shown below. react return. Add a form element tag try it. it works for me.
<form method = "get" title = "Search Form" action="https://cse.google.com/cse/publicurl">
<div>
<input type="text" id="q" name="q" title="Search this site" alt="Search Text" maxlength="256" />
<input type="hidden" id="cx" name="cx" value="013626029654558379071:ze3tw4csia4" />
<input type="image" id="searchSubmit" name="submit" src="https://www.flaticon.com/free-icon/active-search-symbol_34148" alt="Go" title="Submit Search Query" />
</div>
</form>
Related
Is there a way to open the Google+ interactive post dialog without the need of clicking the button first?
I would like to have it displayed in a website directly.
Below is the related code from the G+ examples.
JavaScript:
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
HTML:
<button
class="g-interactivepost"
data-contenturl="https://plus.google.com/pages/"
data-contentdeeplinkid="/pages"
data-clientid="xxxxx.apps.googleusercontent.com"
data-cookiepolicy="single_host_origin"
data-prefilltext="Engage your users today, create a Google+ page for your business."
data-calltoactionlabel="CREATE"
data-calltoactionurl="http://plus.google.com/pages/create"
data-calltoactiondeeplinkid="/pages/create">
Tell your friends
</button>
Add an id to that button element (You can possibly use a different element entirely as long as you include all the supplied attributes -- can't be sure without testing) and style it to be hidden.
From there, just trigger a click on it on whatever event you want.
I.E.
HTML:
<button
id="thisdumbbutton"
class="g-interactivepost"
data-contenturl="https://plus.google.com/pages/"
data-contentdeeplinkid="/pages"
data-clientid="xxxxx.apps.googleusercontent.com"
data-cookiepolicy="single_host_origin"
data-prefilltext="Engage your users today, create a Google+ page for your business."
data-calltoactionlabel="CREATE"
data-calltoactionurl="http://plus.google.com/pages/create"
data-calltoactiondeeplinkid="/pages/create">
Tell your friends
</button>
CSS:
#thisdumbbutton{ display: none; }
JS:
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
$('#something').hover(function(){
$('#thisdumbbutton').click();
});
})();
</script>
Since i'm using Google CSE, the main idea is to show the "Top Search Terms" under the CSE Search box. But in the CSE panel, Google is saying:
No queries were sufficiently popular to be listed
So anyway (i don't want to wait it to be sufficient enough and) .. i want to implement it on my own.
What is the best way to capture the submit of the search string (to Google) ?
Or
What is the best way to capture the returning results (back from Google) so i can assume the Search Term has been used. So i can mark/save the current search term.
.
As a reference, this is all i've done so far:
<!-- Goolge CSE -->
<script language="JavaScript">
(function() {
var cx = 'xxxx3941849086xxxxx:xxxxmtk5xxxxxx';
var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>
<body>
<!-- GCSE Search Box -->
<div class="global-search">
<gcse:searchbox-only linktarget="http://www.example.com/search" queryParameterName="query"></gcse:searchbox-only>
</div>
<!-- GCSE Result Div -->
<div id="googlecse-result">
<gcse:search linktarget="_parent" queryParameterName="query"></gcse:search>
</div>
</body>
I find the value of the search term here and save in my own db:
google.search.cse.element.getElement('standard0').getInputQuery()
I wouldn't advise you hardcoding 'standard0'.
If you give your gcse elements a name using gname="SomeName" then you can use this as a reference.
google.search.cse.element.getElement('SomeName').getInputQuery()
I used Google Plusone button in my web page and it appears with problem.
Please tell me what do I have to do ? The text is out of the box, and the left side of the box is not normal.
This is what I put in my code:
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="medium"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
I have 3 google +1 buttons in the same wordpress page. But one of them fails when is clicked (in then float lateral widget) showing an exclamation mark.
When click again the following page is opened:
+1 button is unavailable or has stopped working. I am pretty sure that none of the described possible reasons occur.
The code for both is practically the same:
// float code (malfunction)
<div id="float_plusone">
<g:plusone size="tall" href="<?php echo urlencode(get_permalink()); ?>" count="true"></g:plusone>
</div>
<script type="text/javascript">
(function() {
var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
})();
</script>
// above/below posts code (works)
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<g:plusone size="medium" callback="googleplus_click"></g:plusone>
Any suggestion about is very welcome.
This is the URL the button is sending to the server to +1.
"id":"http://bestpushchairs.net/qc21/disclosure-policy/http%3A%2F%2Fbestpushchairs.net%2Fqc21%2Fdisclosure-policy%2F"
It looks like the button is taking the href value and assuming it is relative to the current path. Try not using urlencode.
I am struck with my language translation tool .
Here is the code that google translate API has .
I have to modify this code to receive input from the user in a text box and then identify the language it is typed in. Currently the code is picking up the values from id="sourceText" .
I need to put in a text box there to make it a simple dynamic tool . Please tell me what modifications should be made to add a text box and receive its input and detect the language ? Thanks...
<html>
<head>
<title>Translate API Example</title>
</head>
<body>
<div id="sourceText">Hello world</div>
<div id="translation"></div>
<script>
function translateText(response) {
document.getElementById("translation").innerHTML += "<br>" + response.data.translations[0].translatedText;
}
</script>
<script>
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
var sourceText = escape(document.getElementById("sourceText").innerHTML);
var source = 'https://www.googleapis.com/language/translate/v2/detect?key=INSERT-YOUR-KEY&source=en&target=de&callback=translateText&q=' + sourceText;
newScript.src = source;
// When we add this script to the head, the request is sent off.
document.getElementsByTagName('head')[0].appendChild(newScript);
</script>
</body>
</html>
Change
<div id="sourceText">Hello world</div>
to
<textarea id="sourceText">Hello World</textarea>
Also update this line:
var sourceText = escape(document.getElementById("sourceText").value);
<html>
<head>
<title>Translate API Example</title>
</head>
<body>
<textarea id="sourceText">Hello world</textarea>
<input type="button" value="Translate" onclick="submit()" />
<div id="translation"></div>
<script>
function translateText(response) {
document.getElementById("translation").innerHTML += "<br>" + response.data.translations[0].translatedText;
}
function submit() {
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
var sourceText = escape(document.getElementById("sourceText").innerHTML);
var source = 'https://www.googleapis.com/language/translate/v2/detect?key=INSERT-YOUR-KEY&source=en&target=de&callback=translateText&q=' + sourceText;
newScript.src = source;
// When we add this script to the head, the request is sent off.
document.getElementsByTagName('head')[0].appendChild(newScript);
}
</script>
</body>
</html>
How about changing
<div id='mySource'>
into
<textarea id='mySource'>
and put the code responsible for translation into function, and add a button "trasnalte", which onclick event would launch translating function?