I have some content I would like to share with other websites.
Currently I do this via an iframe:
<iframe width=“540”; height=“700” frameborder=“0” src=“http://www.energiekostencalculator.nl/forms/frame_tabs.php?first=yes&product=1&links=1&css=http://www.energiekostencalculator.nl/forms/susteen.css”></iframe>
This has two problems.
It is not SEO friendly. The links on the content of the iframes do not count as inbound links since they page is hosted on my server.
It is (on my server anyway) not possible to link outside css stylesheets to the content of the iframe. The objective is to allow other websites to easily link their stylesheet to my content.
Who has the solution to these issues?
Perhaps using jquery (see below), however I'm not sure Google would parse it and "see" the links...
<html>
<head>
<script src="/js/jquery.js" type="text/javascript">
</head>
<body>
<div id='include-from-outside'></div>
<script type='text/javascript'>
$('#include-from-outside').load('http://example.com/included.html');
</script>
</body>
</html>
Have a look at how TripAdvisor does it - a static link and then javascript to replace it once the page has loaded.
<div id="TA_rated459" class="TA_rated">
<ul id="JRrkXsd6H" class="TA_links GYO6Zcd">
<li id="IN1Gc4AMw8T" class="zQkgIs4xdv"><a href=http://www.tripadvisor.com/Hotel_Review-g294207-d501440-Reviews-Ngong_House-Nairobi.html>Ngong House</a></li>
</ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=rated&uniq=459&locationId=501440&lang=en_US"></script>
There are some better alternatives to iframe but its really up to the "other websites" to make it crawlable by creating HTML snapshots, Making AJAX Applications Crawlable.
As for your code example, Its not possible to load content from external domains, due to the Same origin policy.
Other iframe alternatives maybe a script tag, which most widgets use, where you tell your content users to embed your widget (script tag) into a parent div which will hold the content, and when your script loads it will automatically fill its parent element, with content.
There is a more "advanced" way of doing this but it might be limited by certain shared servers. Any other way I don't think you could solve your issues either by AJAX or iFrames. Since it looks like it's all html and javascript other than what gets parsed via php prior to the displaying of the page you should be able to load the actual contents of the site directly from server to server via fsocketopen and then do anything with that content from the other server. You could pregenerate code that could be used by your clients or customers on their servers.
A collection of links with no context isn't going to be SEO friendly, period. Spreading a chunk of HTML that just has some links in it around the web is just going to trash the PR of people who embed them. If you want SEO benefits, then you need unique (relevant!) content containing the links on each site linking in (otherwise welcome to duplicate content penalties).
Given that, you might as well just continue to use an iframe (assuming there is a benefit to showing the links to visitors to the other sites).
I think you could probably have a DIV with overflow: auto; (and specify dimensions). Then the HTML can be inside the DIV (and so part of the page) rather than in a separate file.
Maybe you should create an API. This will definitely solve issue #2 - allowing publishers to style up your content any way they like.
And about issue #1 - SEO - I'm not sure. Don't understand the language of the site, but to my understanding you allow people to embed some kind of useful calculator to their own pages, while the content of their pages would generally stay unique, so this may or may not be SEO benefitial, I'd also like to know if any SEO experts read this.
Related
Let's say, that I want to demonstrate a widget (or some HTML in a frame) that would be "injected" into another page.
For example: I want to show the people in Amazon.com that I can put let's say a ball image underneath every price tag they put on their web page. That is - I want to build a web server (or indeed a server less html web page) that would show their page and put some stuff of mine inside theirs. So it looks as if the client (Amazon.com here) has my software already installed on their server.
I am a web-dev total newbie, so if this is the simplest thing in the world please, ..
Thanks
There's TONS of special cases that can cause this to fail, but I'll present a simple way that will work for you on a decent amount of webpages(but not all).
save the webpages html source into a local html file.
edit the html source, adding a <base href="http://www.amazon.com/"> tag into the <head> element.
make any other modifcations to the page you want, such as adding new <script> tags to support your new functionality. Make sure your modifications use absolute urls.
If they navigate away from the page, your enhancements will obviously not carry onto the next page. ALso, you will have more success if you upload the file onto a web server. While a user can view the page by double clicking on the html file if they were to save it locally, differences in javascript security permissions will likely make some webpages not function correctly.
The reason you need to add the <base> tag is because the browser resolves relative urls by looking at the url in its address bar. So, if the amazon page had an image like this
<img src="logo.png">
and you saved the html and put it on you webserver at www.example.com, the browser would look for the image at www.example.com/logo.png, which clearly doesn't exist. The base tag tells it what base url to use.
If you need more automation, having them install a browser addon would be a good way to do this if your users are somewhat technical. Greasemonkey is a popular addon, and you can tell it to inject stuff into certain webpages. The benefit of an addon is that it can inject the new functionality into any page on the web, without you having to individually save and modify them. Also, it has the potential to work on all web pages, leaving their functionality perfectly in tact, opposed to the other suggestion. This is far more complicated though.
Example in code:
No page navigation:
<body>
<nav>
// Navigation links to the parts of the site.
// Clicking a link calls a javascript function to display the relevant <div>
</nav>
<section id="page1">
// Page 1 content
</section>
<section id="page2">
// Page 2 content
</section>
</body>
Page navigation:
// Page1.php:
<body>
<nav>
// Navigation links to parts of the site.
// Act as normal <a> tags, redirecting the browser to the new page
</nav>
<section>
// Page1 content
</section>
</body>
// Page2.php:
<body>
<nav>
// Navigation links to parts of the site.
// Act as normal <a> tags, redirecting the browser to the new page
</nav>
<section>
// Page2 content
</section>
</body>
Pros for link navigation:
The browser doesn't need to load the entire site all at once
No javascript needed to use the site
Provides direct URLs for easy navigation
Seems like the standard thing to do
Pros for javascript navigation:
For sites with heavy server-side scripting (like mine), minimizes page requests
No need for the same code in different places (the <nav> element, for example). Creating a echo_nav_html() function in PHP is not a good solution, as it makes coding in an IDE environment annoying
After initial load, site is superfast, as barely any new requests are sent to the server
Oh wise internets, any thoughts on this?
Or maybe more elegant solutions that provide the pros listed for javascript navigation?
The best solution is to do both.
Have valid links on the HREFs on your anchors, but include onClick actions that load the div and disable the progress to the HREF.
Read about graceful degradation and progressive enhancement.
There are lots of reasons to provide non-JavaScript code. Not all browsers support JavaScript. Lots of corporate networks still use ancient versions of IE that may behave unpredictably, or they may force configuration that disables JS entirely.
You want your site to be usable by everyone, but provide the best possible experience to those users who have the technology to support it.
If you are using a heavy dose of server side code (assuming that means dynamic content generation/population), I would probably use links to other pages as I can't imagine that loading all the content you could possibly access on the site on initial load is real resource efficient, especially assuming not every user will access ever section of the site.
You can still use javascript, but I'd only generate the content when it's actually requested; whether that be through an AJAX call (so the URL's being called there) or loading a new page. Seems kind of wasteful to me to load everything at run time...that's just me though.
What has been known for a while, is that a "fast navigation" works easily for http://example.com/#1 --> http://example.com/#2.
However, there is a new technique out there. It enables fast navigation between http://example.com/1 --> http://example.com/2.
EXAMPLE: http://rageslide.com/
As you can see in the example, the navigation between http://rageslide.com/1 and http://rageslide.com/2 etc. via swiping apparantly DOES NOT FORCE THE ENTIRE SITE TO RELOAD.
I'd like to do the same for my site, but I have no idea how to do this. All pages served by my site are dynamic (via PHP and MYSQL).
I have this idea:
Cache the generated output of a page (http://example.com/2) for 60 seconds.
When the user is on http://example.com/1 preload (http://example.com/2) via Javascript.
The user navigates from http://example.com/1 to http://example.com/2. Since the content is preloaded and cached, the content will be served to the user instantly.
Different idea:
Somehow, http://example.com/1 is being interpreted as http://example.com/content.php#1 through a .htaccess. But I have no idea if this is possible or not.
Will this work? Or what would be the best way to solve this problem?
No, the url you see there is not used to load another page. There are AJAX requests in the javascript code contained in the website, that load the new content to display and update the URL bar.
You can read more about it in this article and in the following questions asked in the past:
Modify the URL without reloading the page
Updating address bar with new URL without hash or reloading the page
i can think of two possible thing you can try out.
first is simply use iframes to load the next and previous page of each page, and when someone swipes to the next page load the next page to a new iframe or a div with ajax or any other html element for that matter.
the other is to use the rel attribute, here is an explanation about it.
hope this helps you out
you can get pretty close without scripting anything or degrading the site by letting the browser cache the expected navigation point resources
for caching images, put dummies at the end of the body
<img .... height="0" width="0">
and for pages
<link rel=”prefetch” href=”url” /> there is also a rel attribute for next and previous for slide viewer type pages
Note: the url can be a javascript resource
Note2: the transition may be slightly less clean than dynamically populating from javascript especially on larger complex pages, but will still work with noscript or javascript turned off, so maybe a good fallback
I want to add google analytics to our website and have read some conflicting info about where to put the script tag.
Google says to put it before the closing </ head> tag: http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html
The way our site is designed, this would mean making an edit to every page. It's not that big of a deal if I need to do this, however, our site also uses header and footer include files.
These header & footer files have html code in them and fall just inside the <body> and </body> tags once the page is loaded.
It would be so much easier to just add the script to the header or the footer file. I'd just paste it in there once and it would be serving up the code on every page.
My question is: Can I do this? Can I move the script snippet inside footer include file even though it's not before the </head> tag as google suggests?
Am I asking for problems if i do it this way?
Thanks!!
You can.
The only difference is that if you put in the "footer" (i.e. just before the </body> tag), the browser will first load the DOM (i.e. everything up to the script tag) and then start to load the script. If you put it in the header, it will try to load the script either before it loads the rest of the DOM or while it is loading it (depending on the browser).
You might feel a difference only if you have a huge page with a lot of elements, but the only difference really would be that the script would be loaded later, so if someone aborts a load of the page, the script might not get executed.
Thus, Google recommends to place it in the <head> and if you can, you should, however you also can put it somewhere else if that makes life easier.
I would recommend saving the analytics code in a file and including it in your footer or header - Example: . I've recently run into some issues with Firefox and IE regarding the page load and analytics. It loads the page to the point where the analytics code is present and then the page hangs indefinitely. I can refresh the page and it loads fine, but for some reason it's happening and there's very little info out there regarding solutions. So, in my case I've included the code in the Footer or of the page at the bottom. This way, in regards to your site visitors, they'll likely not even notice because the rest of your page will load and once they click on a link it shouldn't hang again.
I'd say you can - but easier than that. Just place it in the footer and check if the Live-tracking finds visitors if it does you have the answer.
It's possible and is in fact the way many plugins do it (especially most WordPress plugins I've seen). In fact, putting all your JS at the end of the html (just before < /body>) is recommended if those are not required during the load of the page.
I have seen people put it pretty much anywhere on the page. You can put script tags anywhere on the page; many prefer to keep them in the <head> tag, while others put them at the bottom to avoid using document.ready. The point is that putting scripts there still works. Therefore, I see no problem in putting it at the bottom of the page.
Yes, I believe that it would work - it's not recommended though.
f you have a header and footer file, why not just append your Analytics code to it? Unless every page has unique footer/header page, of course. Then I'd recommend you to take a look at MVC.
Observations have already been made here regarding the scripts placement which can be taken on a site by site basis. We run Google Analytics using Google Tag Manager and use the header code placement in the footer and have no problems with that. Google is currently rolling out Core Web Vitals which places website performance as a must have, and so optimising code delivery is really important. Just wanted to add this here as it was pertinant.
Not sure the best way to describe what I mean, the best way is to look at Facebook whilst I explain.
The bar at the bottom of Facebook will always stay the same, with all chat windows open, and no flicking when you change a page, however, the webpage and the address bar will all change to the new page that you requested, to me that seems like the webpage doesn't actually change at all, and instead, the address bars' URL changes as well as the page content.
I am working on a music player for a bands website, that I want to keep static across all the pages on the site, without reloading and starting again every new page.
The bottom bar is positioned with position: fixed which makes it relative to the viewport, not the document.
The other pages are loaded with XHR, or AJAX.
The changing URL is probably the fragment identifier, unless you have a cutting edge browser, which appears to be using the HTML5 history API (GitHub currently is too).
Zach Rait, an engineer on our infrastructure team, implemented the History API to enable selective loading of page content via AJAX while preserving readable URLs. Previously, current application state was stored in the URL fragment which resulted in unseemly URLs like “profile.php?id=1586010043#!/pages/Haskell/401573824771”. Now, because HTML5 allows us to decouple the currently displayed URL from the actual state of the application, we’re able to display pages more quickly, save bandwidth, and avoid polluting users’ location bars.
Source.
sounds like you want a template and using JQuery or a similar language to dynamically load new content on a portion of the site?
In this way, JQuery will use ajax to load new content in part of the main window without you ever experiencing much of the main page reloading.
You can use css to style a bar at the bottom
#somelink{
position:absolute;
bottom:0px;
}
HTML
click me
<div id="news">Replace me with new content</div>
JQuery
$("#somelink").click(function(){
$("#news").get("album.html",function(data){$(this).html(data);});
});