Adding google custom search to a a ready-made designed search box - google-custom-search

I have my own design of a search box in my website and was keen on keeping it rather than displaying Google's design.
<div class="search-header">
<form action="#">
<input type="search" value="" placeholder="Search.." autocomplete="off" required="required" name="s" />
<input type="submit" value="search" />
</form>
</div>
The following code is the one I have on my site. It came already with the template I bought. How do I keep the same design and add Google custom search to it?

We'll want to start by looking here for more information.
https://developers.google.com/custom-search/docs/tutorial/introduction
This will tell you how to get started with google's custom search.

Related

Using cookie authentication and POST in an iFrame (iFrame content is ASP MVC Core, parent site 3rd party)

I have read through many answers on this topic but none seem to apply to what I am trying to do (or I am misunderstanding the problem entirely). Where a lot of my confusion lies is around whether it's the parent window or the iFrame that needs settings changed.
We have a small portal that allows users of our customers (asp mvc core 6 multi tenant app) to login and view their data. So far it works great, all but 1 of our customers do not iFrame the portal, we are trying to make it so they can frame our portal. They have their own domain.
Our authentication is the regular ASP Identity using cookies that is built in to the framework.
I've recreated a similar setup, I have a simple parent site that has this (the sub domain is their own sub domain to our site and if you go there you get the regular portal).
<div class="text-center">
<iframe src="https://sub.ourdomain.com" width="525" height="800" name="b3iframe"></iframe>
So far anything I do other than link to a new page fails within the iFrame. I can't POST a form, use AJAX, etc. Another problem is even if try to log them in (without POSTING a form, just hardcoded login for testing) the cookie does not set and the portal returns to the login page.
I have tried setting 'same-site=none' on both the parent and the framed site. (like what this describes).
I have tested simple things like making a fetch request and that fails (I get a 302)
All POST calls fail (even ones that don't require authentication, just test pages fail with a 400). When I get the 400 response code it is displayed within the frame.
I am aware and have used the ability to pass messages between the parent and iFrame but I don't think that can solve the cookie/POST problem.
I have tried using the 'target' attribute on the form to point to the iFrame but it appears that is for situations where the form is not inside the frame
The iFrame code can be just a simple login form:
<form method="post" id="loginForm">
<div class="form-group">
<label>Email Address</label>
<div>
<input asp-for="UserName" class="form-control" />
</div>
</div>
<div class="form-group">
<label>Password</label>
<div>
<input asp-for="Password" type="password" class="form-control" />
</div>
</div>
<div class="mt-5">
<button type="submit" style="width:100%" class="btn btn-primary tenant-custom-button">Log in</button>
</div></form>
What's frustrating is even in a mock parent website that I made and have full control of I can't seem to set it up so that the iFrame can use cookies or POST/GET (the test parent website is also ASP MVC CORE). The only thing I can do is have links to other pages without auth or POSTS.
Thanks for your time,
Brian

Make Paypal accept variable as price

I have recently started building a custom PC website with Serif Web X8.
I was trying to make a form that outputted its value to another page where it could be payed , after a while I managed to get some code (via hours of copy paste and edit) that was a form that sent its value to another page , however I do not know how to then get the variable that is the price and set it as the price for a paypal button.
I tried this:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="custom" value="<?=$finalpriceexcvat;?>">
<input type="image"
src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_buynowCC_LG.gif" border="0"
name="submit" alt="PayPal – The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif"
width="1" height="1">
</form>
But when it redirects to paypal its says "Some required information is missing or incomplete. Please correct your entries and try again."
I have gone through the code and checked it against some other html code that does the same thing, but to no avail.
Am I missing any code?
Here is the link to a sample form.

How do I set the license for images on my site in Google Images?

Google Images has an option to filter images based on license.
Each image on my site has a details page, where I have the following link to denote the license:
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/deed.en_US" target="_blank">CC-BY</a>
It's a modified version of the sample code from Creative Commons - Choose a License.
However, I see images that Google has indexed since I added this code do not appear when I select a license filter.
You need to wrap it around a div with an about attribute. Here's an example that Google provides:
<div about="image.jpg">
<img src="image.jpg" alt="" />
<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution Share-Alike 3.0</a>
</div>
So in your case:
<div about="image.jpg">
<img src="image.jpg" alt="" />
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/deed.en_US" target="_blank">CC-BY</a>
</div>
Sources: https://www.youtube.com/watch?v=quyhasVn2jw, http://googlesystem.blogspot.com/2009/08/simple-way-to-specify-image-licenses.html

IE10 issue with form tag

I have div in html
<div id="test"></div>
If I do
$('#test').html(' <form method="GET" action="whatever"> <input type="text"/> </form>')
In IE 10 I will get
<div id="test">
<input type="text">
</div>
In Firefox or IE 8 I will get
<div id="test">
<form action="whatever" method="GET">
<input type="text">
</form>
Can you help me with IE10?
(jquery 1.7.2)
Around div test there is another form tag.
You stated in the end of your question that you are attempting to nest one form inside of another. Please have a look at the specification regarding the content model for form elements:
4.10.3 The form element
Content model:
Flow content, but with no form element descendants.
It is invalid to nest form elements. This may be why Internet Explorer 10 is trying to protect you from invalid markup that may not work properly in all browsers. The latest version of Google Chrome appears to also remove invalid child forms.
If you need to submit one form from inside another, use the form attribute on buttons instead. This will tell them which form they are to submit, and not necessarily the form they are currently in.
4.10.18.3 Association of controls and formsA form-associated element is, by default, associated with its nearest ancestor form element (as described below), but may have a form attribute specified to override this.
Note: This feature allows authors to work around the lack of support for nested form elements.
So you could have the following:
<form id="one">
<!-- This button submits #two -->
<input type="submit" form="two">
</form>
<form id="two">
<!-- This button submits #one -->
<input type="submit" form="one">
</form>
Try using .html() to append the the form with HTML functionality and after that use .append() to push every element in the form, so you have something like:
$('#test').html('<form method="GET" action="whatever"></form>');
$('form [action="whatever"]').append('<input type="text"/>'); // Note for selector will be better to use ID for the form

Doesn’t Google support Schema.org’s AggregateRating at the moment?

A rich snippet example from Schema.org http://schema.org/AggregateRating:
<html>
<div itemscope itemtype="http://schema.org/Product">
<img itemprop="image" src="dell-30in-lcd.jpg" />
<span itemprop="name">Dell UltraSharp 30" LCD Monitor</span>
<div itemprop="aggregateRating"
itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">87</span>
out of <span itemprop="bestRating">100</span>
based on <span itemprop="ratingCount">24</span> user ratings
</div>
</div>
</html>
But http://www.google.com/webmasters/tools/richsnippets won't show a preview.
So, the following words from http://support.google.com/webmasters/bin/answer.py?hl=en&answer=146645 are just lies?
New! schema.org lets you mark up a much wider range of item types on
your pages, using a vocabulary that Google, Microsoft, and Yahoo! can
all understand. Find out more. (Google still supports your existing
rich snippets markup, though.)
It is working absolutely fine.
Google is not obliged to show you preview every time, and here it shows an error when I inserted your give example from schema.org:
The following errors were found during preview generation:
This page does not contain authorship or rich snippet markup.
I have done it in my website's news pieces and it shows fine.