How one configure his web site to let users search only on his domain using omnibox?
Example:
type youtube.com then press tab
or type yahoo.com then press
trying with vimeo wouldn't work
I didn't find anyhing in the source code.
Yes it's possible.
I did this for my blog.
<link rel="search" type="application/opensearchdescription+xml" title="The Sheng Blog" href="/resources/opensearch.php"/>
opensearch.php looks likes this:
<?xml version="1.0"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>The Sheng Blog (Beta)</ShortName>
<Description>The Sheng Blog Search</Description>
<Developer>Sheng Slogar</Developer>
<LongName>Search the entire Sheng Blog</LongName>
<InputEncoding>UTF-8</InputEncoding>
<OutputEncoding>UTF-8</OutputEncoding>
<Query role="example" searchTerms="code"/>
<SyndicationRight>open</SyndicationRight>
<AdultContent>false</AdultContent>
<Language>en-us</Language>
<Contact>contact#theshengblogg.comule.com</Contact>
<Tags>code posts tutorials ideas playground</Tags>
<Image width="16" height="16" type="image/x-icon">data:/ico;base64,AAABA...(Icon in base64)</Image>
<Url type="text/html" template="http://theshengblogg.comule.com/search.php?s={searchTerms}"></Url>
<Url type="application/x-suggestions+json" method="GET" template="http://theshengblogg.comule.com/autocomplete.php?search={searchTerms}&json=true"/>
</OpenSearchDescription>
I learned this from http://www.opensearch.org/Specifications/OpenSearch/1.1. The autocomplete part is optional. Return it in JSON format.
For example, if you search "a", return ["a","about","across","all","and"]. (Notice I put your query in the array as item 0.)
My autocomplete only seems to work in Firefox. This might be something with my sub domain.
I also couldn't get it to work in IE or Chrome.
http://dev.chromium.org/tab-to-search has the information on how to do it, potentially you could use a chrome addon to force the page to have the needed code for this to function, but I'm not sure how well such would work.
Related
I created a Coming Soon page with a "Share on Facebook" button but when it's clicked it'll open up Facebook on the "Say something about this" page but the actual content it's shows is nothing but a 403: Forbidden. When I end up sharing it anyway it still appears on my wall as the 403: Forbidden but the link as it should works though, i.e. by clicking on it on my wall it'll take me to my site just fine. Also when I go to my site normally it also works. I'm using Nginx as my server and from what I've seen 403s are quite common for Nginx and I've found multiple articles dealing with 403s but none of them talk about solving it for FB share buttons (only for when you get a 403 trying to access the site normally).
In my HTML I have the following meta tags in the head, the following script and the following share button:
<!-- Meta Tags: -->
<meta property="og:url" content="http://www.example.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="exampleName" />
<meta property="og:description" content="exampleSlogan" />
<!-- FB Script -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/i/suspect/i/should/maybe/keep/this/part/secret';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Share button -->
<div class="social-btn btn-fb" data-href="http://example.com" data-layout="button" data-mobile-iframe="false">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=example.com;src=sdkpreparse"><i class="fa fa-facebook"></i></a>
</div>
I'm sure you'll be able to tell where I censored urls, values, etc. but if you're not sure whether or not something is wrong or if it's censored, feel free to ask
As far as Nginx goes my skills are still pretty limited so I don't really know what to include here to help solve the issue so If you want me to post something Nginx related let me know and I'll do it. Also let me know if I need to supply any other information.
Edit I don't know if this is relevant to my issue but when I open the my web page it gives my js error: FB.NativeExtensions.onready only works when the page is rendered in a WebView of the native Facebook app. Test if this is the case calling FB.UA.nativeApp()
To figure out what goes wrong in such a case, re-scrape the URL using the Facebook debug tool, and then check the server logs around this time.
If scraping alone solved the issue, then your server for some reason blocked the request the last time the Facebook scraper did try to gather data, but doesn't any more now. If this wasn't a one-off occurrence, but turns out to be a more systematic issue with new articles, then check if you maybe have a like button embedded in a preview of the URL that is only available to the logged-in admin, or something like that, that could trigger a scrape by Facebook before your system is willing to answer the request "properly" to outsiders.
If you need to correct this issue for more than a few URLs now, you can also trigger a re-scrape via the API.
I want to add <link rel="alternate" href="https://www.example.com" hreflang="en-us" /> this kinda of link tag in my bigcommerce site using jQuery or anything else...
Tried code:
1:
if ($("body#home").length > 0) {
$('head').add($('<link rel="alternate" href="https://www.example.com" hreflang="en-us" />'));
}
2:
var page = window.location.pathname;
if (page == '/' || page == '/index.html') {
$('head').add($('<link rel="alternate" href="https://www.example.com" hreflang="en-us" />'));
}
3:
if ($("html").hasClass("home")) {
$("head").append("<link rel=alternate href=https://www.example.com hreflang=en-us>");
}
But nothing worked for me....
Let's first give some background on hreflang and the three valid ways that Google will read it..
HTML link element in header. In the HTML section of http://www.example.com/, add a link element pointing to the Spanish version of that webpage at http://es.example.com/, like this:
<link rel="alternate" hreflang="es" href="http://es.example.com/" />
HTTP header. If you publish non-HTML files (like PDFs), you can use an HTTP header to indicate a different language version of a URL:
Link: <http://es.example.com/>; rel="alternate"; hreflang="es"
To specify multiple hreflang values in a Link HTTP header, separate the values with commas like so:
Link: <http://es.example.com/>; rel="alternate"; hreflang="es",<http://de.example.com/>; rel="alternate"; hreflang="de"
Sitemap. Instead of using markup, you can submit language version information in a Sitemap.
Source: Google 'hreflang' Usage
So Method 2 isn't possible since you can't modify or control the headers from your BigCommerce store.
This leaves us with Method 1 or Method 3.
The big question here though is..
"Will Google index & process a dynamically inserted JavaScript hreflang link tag"?
Unfortunately at the time of writing this, I need to wait several days for the Google Webmaster Tool to become active on my test site so I can be certain; while all the 3rd party hreflang test sites I used failed. My gut feeling is that I would not trust it. However, if you have an active Google Webmaster / Search Console account, you can test this by going to: Dashboard > Search Traffic > International Targeting.
But for the sake of argument, let's assume that it will work, and so to answer your specific question, you would go about this method like so...
Within the <head>...</head> block, create an empty link tag like so: <link id="lang1" /> This will have the link element physically in the DOM awaiting its attributes to be dynamically added.
Next, immediately below the link element created above, let's create the JavaScript that will turn this empty link tag into a complete hreflang reference depending on the current page:
<script>
// If current page is homepage, then append the neccessary attributes to the link tag. Else, do nothing.
// If on homepage, the link tag would become: "<link id="lang1" rel="alternate" href="https://www.example.com" hreflang="en-us" />"
window.location.pathname == '/' ? $("#lang1").attr({"rel": "alternate", "href": "https://www.example.com", "hreflang": "en-us"}) : false;
</script>
And that's about it from the coding side. If you run this and inspect the DOM (it won't be viewable in page source), you can confirm that your link tag now reads as: <link id="lang1" rel="alternate" href="https://www.example.com" hreflang="en-us" />
Again, whether or not Google will process this, I don't know.
But here's an alternative I do know will work...
We can follow Method 3 listed above, and submit language version information via your site's sitemap, which can specify which individual and specific pages have alternative language versions.
Now, you do not have access to directly modify your BigCommerce generated Sitemap. But what you do have access to, is to:
Create your own custom sitemap file, and upload it to your store.
Tell Google to use the URL of this custom sitemap, rather than the default BigCommerce one.
There are plenty of resources online on how to create a sitemap, and there are many tools that can help automate this process. Although beware, if you use a custom sitemap, then you will need to maintain it and manually update it whenever you add new pages or products to your store.
I've taken the time to point you to some specific documentation resources that should help you with this task. I will eventually come back to this post to transcribe the content from these links into this post as I do recognize posting links is bad SO practice. A hardass might say "well why are you doing it then", and well my time is limited and I'm trying to be as helpful as I can now upfront.
Here is a link from the Google Docs with information on creating a sitemap with page specific language versions.
Here is a link from the BigCommerce Docs with information on uploading a custom file to your store which can then be accessible via your domain/URL.
Finally, here is a link from the BigCommerce Docs with information on how to direct Google to use a specific/alternate file as your store's sitemap.
Please attempt the code suggestion I wrote for Method #1 and test it using your Google Webmaster's tool to let us know if the hreflang link tag is successfully crawled by Google when dynamically inserted via JavaScript - you would be doing the community a great service as there is no definite answer around this.
Remember, you can officially test this by logging into your Google Webmaster Console and navigating to Dashboard > Search Traffic > International Targeting
I've added a button to print a SSRS report to one of my CRM ribbons. The only issue is that every time it calls the URL the path is removed from the url parameters. For example the URL I have in the XML is:
<CommandDefinition Id="Company.Form.quote.MainTab.Actions.PrintQuote.Command">
<EnableRules />
<DisplayRules />
<Actions>
<Url Address="http://<Server>/ReportServer/Pages/ReportViewer.aspx?/Test/ReportName">
<CrmParameter Name="QuoteId" Value="FirstPrimaryItemId" />
<StringParameter Value="Render" Name="rs:Command" />
<StringParameter Name="rs:Format" Value="PDF" />
</Url>
</Actions>
</CommandDefinition>
And the URL it navigates to is:
http://<server>/ReportServer?QuoteId=%7bE6D8DC8B-6381-E411-80BC-00155D18D500%7d&rs%3aCommand=Render&rs%3aFormat=PDF
It seems that I need a name for the ItemPath, but ReportServer doesn't accept one I know of, is there a way around this?
Any help is appreciated.
Found a workaround,
I did the same thing, just instead of putting the URL in the CommandDefinition I used javascript to redirect.
Google Chrome has a feature where you can hit tab to search a site. Chrome then navigates to the site's own search engine and runs the inputted query. The Chrome documentation indicates that this is only available if Google has detected a search engine on the site you are trying to search.
This indeed seams to be the case, because writing stackoverflow.com<Tab>test<Enter> makes Chrome navigate here while facebook.com<Tab>test<Enter> does nothing because the tab-key tabbes out of the address line.
What I'm wondering is then how to indicate to Google that my site has a search engine and how Google needs to format a query in order to redirect a Chrome user correctly to my site when the tab-search feature is utilised. Is it a Meta tag? Is it in robots.txt?
After a little digging I found this page that describes this. Also you can read in Stackoverflow's source code and find this line of code:
<link rel="search" type="application/opensearchdescription+xml" title="Stack Overflow" href="/opensearch.xml">
What it does is indicate to Google that the description for how to use your search engine in the file /opensearch.xml which contains this:
<?xml version="1.0" encoding="UTF-8" ?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
<ShortName>Stack Overflow</ShortName>
<Description>Search Stack Overflow: Q&A for professional and enthusiast programmers</Description>
<InputEncoding>UTF-8</InputEncoding>
<Image width="16" height="16" type="image/x-icon">http://sstatic.net/stackoverflow/img/favicon.ico</Image>
<Url type="text/html" method="get" template="http://stackoverflow.com/search?q={searchTerms}"></Url>
</OpenSearchDescription>
When I implemented a search function for my online Klingon dictionary, I found that I didn't need an OpenSearch description for Chrome to autodetect it as a search engine.
NOTE: While this is a simpler method, it does not allow for advanced features like specifying a search template, a custom favicon (Chrome automatically uses the favicon of the site) etc. It also might not work for other browsers than Chrome.
I started off with the instructions here Search Engine Autodiscovery: Google Chrome Autodiscovery, which say:
Interestingly the auto discovery only works if the search engine is at the homepage. You have to have either an input field of the type search or of the type text with the name s:
<form>
<input type="search" name="s" />
</form>
or
<form>
<input type="text" name="s" />
</form>
I got Chrome to autodetect the search engine on my website klingonska.org without using an OpenSearch description.
However I deviated from the above description, as I found I didn't need have to have field called s nor use type="search". My final <form> look something like this (in reduced form).
<form method=get action="dict/">
<input name=q placeholder="Search dictionary…">
<button type=submit>Search</button>
</form>
The cruicial factors seemed to be that the form was located on the root page http://<domain>/ page (not a subpage like http://<domain>/<dir>/<something>.html). And, IIRC, that the search form contain only a single field.
It works if the html file is local (on my C drive), but not if the html file is on a server and the image file is local. Why is that?
Any possible workarounds?
It would be a security vulnerability if the client could request local file system files and then use JavaScript to figure out what's in them.
The only way around this is to build an extension in a browser. Firefox extensions and IE extensions can access local resources. Chrome is much more restrictive.
shouldn't you use "file://C:/localfile.jpg" instead of "C:/localfile.jpg"?
Browsers aren't allowed to access the local file system unless you're accessing a local html page. You have to upload the image somewhere. If it's in the same directory as the html file, then you can use <img src="localfile.jpg"/>
C: is not a recognized URI scheme. Try file://c|/... instead.
Honestly the easiest way was to add file hosting to the server.
Open IIS
Add a Virtual Directory under Default Web Site
virtual path will be what you want to browse to in the browser. So if you choose "serverName/images you will be able to browse to it by going to http://serverName/images
Then add the physical path on the C: drive
Add the appropriate permissions to the folder on the C: drive for "NETWORK SERVICE" and "IIS AppPool\DefaultAppPool"
Refresh Default Web Site
And you're done. You can now browse to any image in that folder by navigating to http://yourServerName/whateverYourFolderNameIs/yourImage.jpg and use that url in your img src
Hope this helps someone
we can use javascript's FileReader() and it's readAsDataURL(fileContent) function to show local drive/folder file.
Bind change event to image then call javascript's showpreview function.
Try this -
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;'>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function showpreview(e) {
var reader = new FileReader();
reader.onload = function (e) {
$("#previewImage").attr("src", e.target.result);
}
//Imagepath.files[0] is blob type
reader.readAsDataURL(e.files[0]);
}
</script>
</head>
<body >
<div>
<input type="file" name="fileupload" value="fileupload" id="fileupload" onchange='showpreview(this)'>
</div>
<div>
</div>
<div>
<img width="50%" id="previewImage">
</div>
</body>
</html>
IE 9 : If you want that the user takes a look at image before he posts it to the server :
The user should ADD the website to "trusted Website list".
Newtang's observation about the security rules aside, how are you going to know that anyone who views your page will have the correct images at c:\localfile.jpg? You can't. Even if you think you can, you can't. It presupposes a windows environment, for one thing.
if you use Google chrome browser you can use like this
<img src="E://bulbpro/pic_bulboff.gif" width="150px" height="200px">
But if you use Mozila Firefox the you need to add "file " ex.
<img src="file:E://bulbpro/pic_bulboff.gif" width="150px" height="200px">
starts with file:/// and ends with filename should work:
<img src="file:///C:/Users/91860/Desktop/snow.jpg" alt="Snow" style="width:100%;">
I see two possibilities for what you are trying to do:
You want your webpage, running on a server, to find the file on the computer that you originally designed it?
You want it to fetch it from the pc that is viewing at the page?
Option 1 just doesn't make sense :)
Option 2 would be a security hole, the browser prohibits a web page (served from the web) from loading content on the viewer's machine.
Kyle Hudson told you what you need to do, but that is so basic that I find it hard to believe this is all you want to do.
If you're deploying a local website just for yourself or certain clients, you can get around this by running mklink /D MyImages "C:/MyImages" in the website root directory as an admin in cmd. Then in the html, do <img src="MyImages/whatever.jpg"> and the symbolic link established by mklink will connect the relative src link with the link on your C drive. It solved this issue for me, so it may help others who come to this question.
(Obviously this won't work for public websites since you can't run cmd commands on people's computers easily)
I have tried a lot of techniques and finally found one in C# side and JS Side.
You cannot give a physical path to src attribute but you can give the base64 string as a src to Img tag.
Lets look into the below C# code example.
<asp:Image ID="imgEvid" src="#" runat="server" Height="99px"/>
C# code
if (File.Exists(filepath)
{
byte[] imageArray = System.IO.File.ReadAllBytes(filepath);
string base64ImageRepresentation = Convert.ToBase64String(imageArray);
var val = $"data: image/png; base64,{base64ImageRepresentation}";
imgEvid.Attributes.Add("src", val);
}
Hope this will help
background-image: url(${localImage});
If you want to add a file as background to your website locally.
You need to upload the image aswell, then link to the image on the server.
what about having the image be something selected by the user? Use a input:file tag and then after they select the image, show it on the clientside webpage? That is doable for most things. Right now i am trying to get it working for IE, but as with all microsoft products, it is a cluster fork().