Examples for Javascript

Just add the following line before you close your "</body>": 

<script async 
        src="https://guteurls.de/guteurls.js"  
        selector="<JQuery Selector String>"
        [allow="<URLPart>[,<URLPart>[,...]]"]
        [ignore="<URLPart>[,<URLPart>[,...]]"]
        [gif="<URL of GIF image, displayed during loading>"]
        [multiple="1"]
        [callback-a="(function(jqueryElement,url,$){<YourJS>})"]
        [callback="(function($){<YourJS>})"]
        [init="(function($){<YourJS>})"]
        [maxLines="<maximal rows of text>"]
        [hideimages="1"]
        [maxImgHeight="<in pixel, eg. 200>"]
        [bgcolor="<background color, eg. #ffffaa>"]
        [zoom="<box display size. Value between 0.21 and 2.99>"]
        [email="<email|token|api-key|base64-encoded-email|base64-encoded-token>"]
        >
</script>

  • [...] lines are optional! You do not have to use them.
  • Set multible only if you want to display the box for the same link url a second time on the same page.
  • Set gif with an "empty.gif" (transparent pixel) or an loading animation gif.
  • callback-a will be called directly, after an URL was found in the element <jqueryElement>
  • callback will be called directly, after all HTML-DOM manipulation are done.
  • init will be called before HTML-DOM manipulation starts.
  • Execute document.guteUrls.execute(); if you added new posts via ajax to your page. In that case this function can generate new URL previews for URLs found in the new posts.

Examples values

<script async
        src="https://guteurls.de/guteurls.js"
        selector=".content div.singlePost"
        allow="facebook, nytimes.com, youtube.com"
        ignore="facebook*/events, youtube.com/playlist"
        gif="http://loading.io/assets/img/default-loader.gif"
        email="MYAPIKEY-OR-MY-EMAIL"
        callback-a="(function(jqueryElement,url,$){console.log('url:'+url)})"
        callback="(function($){console.log('finished')})"
        init="(function($){console.log('JS will start to search URLs now')})"
        >
</script>



Five examples

  1. Example 1
    The simplest one.

  2. Example 2
    Show the usage of callback-a

  3. Example 3
    Show the usage of callback-a and callback

  4. Example 4
    By using init I add a style to the html page, date sets a shadow, max-width and round borders.

  5. Example 5
    By using callback-a I change a link outside the posting text, and link to the found URL.

  6. Example 6
    Endless scrolling? You load posts via ajax, when user scrolls down? In that case you have to execute document.guteUrls.execute() afterwards.

Your Responsibility

If you use our service, you are responsible.
We are like an tool / html tag, which fetches data by a given URL, like the IMG SRC="URL" html tag.
You are responsible for displaying the data (text + images).
Note foreign copyright!

Example:

<html>
<head>
  <styles>
     .myP {}
  </styles>
</head>
<body>
   Bla:
  <div class="myP">
	My first text block. https://www.youtube.com/watch?v=IZ_SFbaysHk End.
  </div> 

  <div class="myP">
      This is my
      <a href="http://www.nytimes.com/2016/08/28/opinion/sunday/even-roger-federer-gets-old.html">
	  Second text</a> block
  </div> 

  <script async src="https://guteurls.de/guteurls.js" selector=".myP"></script>
</html>
Open this example in your browser

Example 2:
This example shows the usage of callback-a.
callback-a will be executed when an url is found. (Maximal one per chapter!).
I put the found URLs into the "divOUTPUT" element.

Open this example in your browser

Example 3:
This example shows the usage of callback-a and callback.
callback writes into the browser console, when everything is done.
callback-a adds a green border to each URL previewbox.

Open this example in your browser

Example 4:
This example shows the usage of init.
Before the searching for URLs, init will be exected.
By using init I add a style to the html page, which sets a shadow, max-width and round borders to all preview boxes by setting one CSS class.

Open this example in your browser

Example 5:
This example changes the link of the headlines ("h2").
The link will be the found URL.

Open this example in your browser

Example 6:
Endless scrolling? You load posts via ajax, when user scrolls down?
In that case you have to execute document.guteUrls.execute() afterwards.

Open this example in your browser