Im facing an issue with my project, I want to control the search results, which means when a user clicks on any result, there will be an action.
I am using "Google Custom Search Engine", to display search result.
This is the search box and result code:
<html>
<head>
<script>
(function() {
var cx = '000752459719902753414:o5xzy3na1va';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
</head>
<body>
<div >
<gcse:search></gcse:search>
</div>
</body>
</html>
The results displays in this line <gcse:search></gcse:search>
I'm trying to figure out how can I control each result separately on click
thanks in advance..
Related
When I put my script code (html javascript) on my website, the page is blank and the google search bar is not there. I have set it up properly with the right website etc, but as soon as I go on the webiste it is still blank. Code:
<!DOCTYPE html>
<html>
<head>
<title>******* - ************!</title>
</head>
<body>
<div id="wrapper">
<script>
(function() {
var cx = '008901018504642689698:vb4c0smx720';
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>
<gcse:search></gcse:search>
</div>
</body>
</html>
Please Help
I want to give users a snippet to put on their own sites which loads a generic javascript file with a unique ID for that user. This is so the content which loads up is dependant on which user id is associated with it.
My best guess so far is something like this:
<script type="text/javascript">
var UID = '';
(function() {
var url = www.test.com/embed.js';
})();
</script>
<noscript>Please enable JavaScript to view this content</noscript>
content powered by <span class="logo">Test</span>
I havent had a lot of luck with this code. Can anyone explain how I should be approaching this please?
Here is the way that google does it. Let me know if you need help applying it:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
Ref. https://developers.google.com/analytics/devguides/collection/gajs/
You need to append <script> tag to the DOM.
You should put your entire script inside a single scope (function)
(function(window, uid) {
var document = window.document;
// create your <script> element
var e = document.createElement("script");
e.src = "//my.website.com/my-script.js?user-id=" + window.encodeURIComponent(uid);
// insert it before the very first <script> element already in DOM
var s = document.body.getElementsByTagName("script")[0];
s.parentNode.insertBefore(e, s);
})(window, "some-user-id");
I have a Google+ +1 button and seems to work fine since I can see the +1 in a Google search. The problem is that the count box doesn't keep the number of +1.
Am I doing something wrong? You can see on http://itransformer.es
I've added the next html tag:
<div class="g-plusone" style="display: clear" data-width="200" data-href="http://itransformer.es"></div>
and the next Javascript snippet code:
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
Well, I've found the issue. I was using http://itransformer.es URL, while I had to use http://www.itransformer.es. Now the +1's are shown.
I am using below script to get user authenticated via google, it works fine but the problem is, with out click on g+ signin button it taks the google session from browser and authenticates the user. how to make it on buttion click.
(function() {
var po = document.createElement('script');
po.type = 'text/javascript'; po.async = true;
po.src = 'https://plus.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
Is there any way to run this function on button click.?
I prefer to use Google Javascript Api.
<a id="googleLogin"> Login with Google</a>
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></>
<script type="text/javascript">
$(document).ready(function(){
$("#googleLogin").bind("click", function(){
gapi.auth.authorize({client_id: YOUR_CONSUMER_KEY,
immediate: false,
scope: "https://www.googleapis.com/auth/plus.me https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email"
}, function(authResult){
YOUR CODE HERE
});
});
});
</script>
HTML
<input id="authBtn" type="button" value="authenticate me"/>
JS
document.getElementById("authBtn").addEventListener("click", function(e) {
var po = document.createElement('script');
po.type = 'text/javascript'; po.async = true;
po.src = 'https://plus.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
});
I've been tasked with adding GCS to a website. After I followed the instructions to create my free GCS (http://www.google.com/cse/sitesearch/create), and pasted the supplied snippet into the appropriate place, the search box & button components render OK and the user is able to enter a search string, run the search and see the results. So far so good.
However, when the components render for the first time I want to be able to pass a pre-entered string into the box and programmatically have the search executed immediately. This bit is not working.
The code I currently have in place is as follows, consisting of the supplied snippet plus some extra code derived from my reading of the Custom Search Element Control API doc (https://developers.google.com/custom-search/docs/element) and intended to implement the 'execute immediate':
<div class="content-container">
<script type="text/javascript">
(function() {
var cx = '(my search id)';
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>
<gcse:search> gname="2DSearch"</gcse:search>
<script type="text/javascript">
var element = google.search.cse.element.getElement("2DSearch");
element.prefillQuery(primarySearch);
element.execute(primarySearch);
</script>
</div>
primarySearch is the string I want to automatically search on. When the components render, the string 'gname="2DSearch"' appears briefly then disappears again just before the search components appear, then nothing else happens.
There appear to be some similarities here with this question (unanswered): https://stackoverflow.com/questions/15871911/passing-optional-search-parameters-into-google-custom-search-query
I have searched the Web in vain for a number of hours for anything else relevant.
Can anybody tell me why it's not working and/or what I need to do?
My apologies, I have done alot of programmming but am virtually illiterate when it comes to HTML & javascript.
Thanks
Jim
I discovered that the Chrome console is showing the following error:
Uncaught ReferenceError: google is not defined
My code now looks like this:
<div class="content-container">
<script type="text/javascript">
(function() {
var cx = '013736134253840884188:fxsx6zqql_y';
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>
</div>
<div class="gcse-search" data-gname="2DSearch"></div>
<div class="content-container">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
var element = google.search.cse.element.getElement("2DSearch");
element.prefillQuery(primarySearch);
element.execute(primarySearch);
</script>
</div>
In the console again I'm now also seeing the following:
XMLHttpRequest cannot load (insert here the jsapi link above that I'm not allowed to post). Origin (insert here the URL for my localhost) is not allowed by Access-Control-Allow-Origin.
There are numerous references to similar errors to this all over the Net, each one slightly different, with solutions proposed referring to JSON, JQUERY, AJAX etc.etc., but nothing that I have found seems directly relevant to what I am trying to do (ie make available to my code the file or library in which 'google' is defined), and nothing that I have tried has worked.
Talk about trying to find your way through a coalmine with a candle... :)
Cheers
I've got it working with the gcse callback option (I also changed my layout in the CSE Control Panel to prevent the default overlay).
<script>
function gcseCallback() {
if (document.readyState != 'complete')
return google.setOnLoadCallback(gcseCallback, true);
google.search.cse.element.render({gname:'gsearch', div:'results', tag:'searchresults-only', attributes:{linkTarget:''}});
var element = google.search.cse.element.getElement('gsearch');
element.execute('this is my query');
};
window.__gcse = {
parsetags: 'explicit',
callback: gcseCallback
};
(function() {
var cx = 'YOUR_ENGINE_ID';
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>
<div id="results"></div>
Can you pass the search term via the URL?
<script>
(function() {
var cx = 'YOURID';
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>
<gcse:searchbox queryParameterName="term"></gcse:searchbox>
<gcse:searchresults></gcse:searchresults>
If you call your "search" page via yourdomain.com/search?term=searchword the search results appear immediately.
<gcse:search gname='abcd'></gcse:search>
And when the page loaded:
google.search.cse.element.getElement('abcd').execute(query);