Static API Documentation with embedded API key - javascript

I'm setting up the API documentation for a project, and wanted to know what the best tool for the job is..
The site is completely static EXCEPT for the API keys, which I'd like to include in the code examples depending on the user (the user gets their own API key if they're logged in).
How can I achieve this, while maintaining a static site (I'm using a static-site generator, middleman).

I would suggest you to include small ajax script on all pages, which will perform search-and-replace through the page.
On the static page you will have code like this:
<!-- EMPTY SPAN IN PAGE TEMPLATE -->
<span class='api-key'></span>
everywhere you want to have api keys embedded. The script will perform the simple task of search-and-replace (pseudocode follows, assuming you have jQuery on the page):
$(document).ready(function () {
$.get( "/api/key", function( data ) { /* supply credentials if needed */
$('.api-key').html( data );
}
});
Hope it helps.

Related

How to use JS to retreive API data

I have written a basic API in PHP on my site (domain1.com). I need to load a simple form on another site (domain2.com) by placing a simple JS file on the other site. JS needs to access my API and format the form based on returned data.
Question: should I keep my JS file on initial site, with all the JS code in it and just let the other site include it like this
<script src="https://domain1.com/api.js?form=domain2"></script>
or shall I let the other site place a JS code, something like this:
<script>
var form = ... // send request to https://domain1.com/api/form
</script>
I'm sure it's a common knowledge, but I really never had to deal with this sort of issues, so, if you don't wish to answer, please don't mark for "close".

Render html (or html output) to Google Drive Docs(word) using javascript

I have an project where I have to render the html form output to an new google docs(word and NOT THE SPREADSHEET !) The only thing what I can find on the internet is about spreadsheet.
The project.
I have an html with form.
I need to get all the data in a new file in google docs when i click on submit.
Can someone show me a way how to solve this.
Hint Links etc etc.
Try following this code:
function myFunction() {
// Create and open a document.
// Replace with your own document name
var doc = DocumentApp.create('Document Name');
var pages = doc.getBody();
pages.appendPageBreak();
pages.appendParagraph("A paragraph.");
pages.appendPageBreak();//push additional data to the next page
pages.appendParagraph("A paragraph 2.");
}
This code will let you create a document and write in the pages. Also read Document Service, this service allows scripts to create, access, and modify Google Docs files. There are alot of features you can use to make your document more presentable.
Now, you connect your form to apps script. Just follow the steps done in this tutorial. Publish your code as web app, then use the web app URL to pass the variable to your script and save the data to the document.
Hope this helps.

PHP HttpRequest to create a web page - how to handle long response times?

I am currently using javascript and XMLHttpRequest on a static html page to create a view of a record in Zotero. This works nicely except for one thing: The page html title.
I can of course also change the <title>...</title> tag, but if someone wants to post the view to for example facebook the static title on the web page will be shown there.
I can't think of any way to fix this with just a static page with javascript. I believe I need a dynamically created page from a server that does something similar to XMLHttpRequest.
For PHP there is HTTPRequest. Now to the problem. In the javascript version I can use asynchronous calls. With PHP I think I need synchronous calls. Is that something to worry about?
Is there perhaps some other way to handle this that I am not aware of?
UPDATE: It looks like those trying to answer are not at all familiar with Zotero. I should have been more clear. Zotero is a reference db located at http://zotero.org/. It has an API that can be used through XMLHttpRequest (which is what I said above).
Now I can not use that in my scenario which I described above. So I want to call the Zotero server from my server instead. (Through PHP or something else.)
(If you are not familiar with the concepts it might be hard to understand and answer the question. Of course.)
UPDATE 2: For those interested in how Facebook scraps an URL you post there, please test here: https://developers.facebook.com/tools/debug
As you can see by testing there no javascript is run.
Sorry, im not sure if i understand what you are trying to ask, are you just wanting to change the pages title?
Why not use javascript?
document.title = newTitle
Facebook expects the title (or opengraph :title tags) to be present when it fetches the page. It won't execyte any JavaScript for you to fill in the blanks.
A cool workaround would be to detect the Facebook scraper with PHP by parsing the User Agent string, and serving a version of the page with the information already filled in by PHP instead of JavaScript.
As far as I know, the Facebook scraper uses this header for User Agent: "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)"
You can check to see if part of that string is present in the header and load the page accordingly.
if (strpos($_SERVER['HTTP_USER_AGENT'], 'facebookexternalhit') !== false)
{
//synchronously load the title and opengraph tags here.
}
else
{
//load the page normally
}

Why don't other sites/services see my hash URLs?

My site has all dynamically loaded content.
I have written a few JS functions that change the content based on the URL received. If someone goes to www.mysite.com/#1056, the content for that will be loaded.
function getLocationHash() {
//check if there is a location hash in the address bar, get that URL
if (window.location.hash != '') {
processURL()
}
}
Then it calls the processURL function
function processURL() {
if (window.location.hash != '') {
urlHash = window.location.hash;
//if it's a catalog item, it has a number above #1000
if (urlHash > 10000) {
getDetail(urlHash);
}
This works fine for history or jumping right to a URL on the site - however, other sites cannot follow this. For instance, if I enter www.mysite.com/#1056 into Facebook status, FB scrapes only www.mysite.com index page. It does not follow through to the end of the JS. Is this because the JS is looking for the 'window' property?
Same thing with Google crawling. I set up a sitemap with all of the hashed URLs but Google only crawls the index page.
So the question is: How do I take what I have here and properly format a URL that other services like Facebook and Google can "see"?
Any tips would be much appreciated.
The # indicates the start of the fragment identifier. It is how you link to part of a page.
It is frequently abused to be read by JavaScript to load different content via Ajax, but that only works if the client runs the JS.
The scrapers used by Google and Facebook don't run JS.
Stop using fragment identifiers to load content
Use real URLs instead
Have the server deliver complete pages for those URLs
Apply your Ajax changes using the history API to update the URI to match the one that would load the page you are creating with JS directly
These are the solutions i discovered when i researched this.
For crawling there is the 'hashbang' , as described in the google pages.https://developers.google.com/webmasters/ajax-crawling/docs/learn-more?hl=nl
And for the linking on facebook you can for example use html5 pushstate.
http://badassjs.com/post/840846392/location-hash-is-dead-long-live-html5-pushstate

Creating a custom widget using django for use on external sites

I have a new site that I am putting together and part of it has statistics for the site's users. I would like to create a widget that others can use on another website by invoking javascript that reads data from my server and shows that statistics for a given user, but I am having a hard time finding specific tutorials that covers this in django.
I have seen the link at Alex Maradon's site [0], but it looks to me like that is passing html back to the widget and I am having a hard time figuring out how to do this using something like xml.
Are there any django apps for doing this or does anyone know of good how-tos?
[0] http://alexmarandon.com/articles/web_widget_jquery/
This is not matter of Django, you can solve this by using the most common solution. Javascript.
Give your users this to put on their websites.
<script type="text/javascript" src="http://mysite.com/widget/user/124546465"></script>
On a django view, render the next template:
(function(){
document.write('<div class="mysite-userprofile">');
document.write('My visits are {{total_visits}}<br />')
document.write('</div>') })()
)
So on your view, you may have something like this, the mimetype is important
def total_visits(request, user_id):
user = get_object_or_404(User, id = user_id)
total_visits = Visits.objects.filter(user:user).total_visits() #this is a method to count, you may have to write your own logic
context = {'total_visits': total_visits}
render_to_response('widget_total_visits.html', context, mimetype='text/javascript')
What can you do next?
User settings, like this.
<script type="text/javascript">
mysite_options = {
'just_friends': True,
'theme': 'bluemarine,
'realtime': True
}
</script>
<script type="text/javascript" src="http://mysite.com/widget/user/124546465"></script>
So on your template, you can use the variables set before include the script on the web site of your user, a simple stuff.
Later, you can use POST method, to gather information from the user clients. For stats.
And of course make it Ajax!
I hope this give you a path to follow
Obey the one rule: Keep It Simple Silly!
I know it may be very web 1.0 but an iframe really is your best friend in this situation. A simple piece of code such as <script>document.write("<iframe src='yoursite.com/userwidget/" + username + "' height='30' width='150' />");</script> to inject an iframe at load time will save you a crapload of time writing jsonp async code and dom manipulators and making sure that all the elements you inject onto their page will be styled correctly on every different website and worrying about origin policies.
if you have your code plug in an iframe pointed at you page then:
The origin is you! you don't have to worry about it.
You can use django templates instead of js to construct the widget being shown.
their CSS won't mess with your presentation.
their js can't easily manipulate your stats ;)
This is exactly what iframes were designed to do.

Categories

Resources