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
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:
<html>
<head>
<style>
.myP {}
</style>
</head>
<body>
<pre id="divOUTPUT">
<br />DEBUG - OUTPUT - callback-a:<br />=====
</pre>
<h1> Title: </h1>
<div class="myP" id="divA">
My first text block. https://www.youtube.com/watch?v=IZ_SFbaysHk End.
</div>
<div class="myP" id="divB">
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"
callback-a="(function(jqueryElement,url,$){ $('#divOUTPUT').append( '<br /> In ' + jqueryElement.attr('id') + ' ' + url); })"
selector=".myP"></script>
</body>
</html>
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:
<html>
<head>
<style>
body > div {
width: 80%;
max-width: 700px;
border: 3px solid #000;
margin: 20px auto 20px auto;
padding: 20px
}
</style>
</head>
<body>
<div><h1 style="text-align: center">Title</h1></div>
<div>
My first text block. https://www.youtube.com/watch?v=IZ_SFbaysHk End.
</div>
<div>
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"
callback-a="(function(jqueryElement, url,$) { jqueryElement.css( 'border', '10px dotted #0F0' );})"
callback="console.log( 'Everything is done :-)' )"
selector="body > div"></script>
</body>
</html>
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:
<html>
<head></head>
<style>
div#divSecond .guteUrls .guteurlsBox {background-color: #aaeeff !important}
</style>
<body>
<div><h1 style="text-align: center">Title</h1></div>
<div>
My first text block. https://www.youtube.com/watch?v=IZ_SFbaysHk End.
</div>
<div id="divSecond">
My second text block. https://sync.com/ End.
</div>
<div>
This is my
<a href="http://www.nytimes.com/2016/08/28/opinion/sunday/even-roger-federer-gets-old.html">
Third text</a> block
</div>
<script async
src="https://guteurls.de/guteurls.js"
init="(function($){$('head').append('<style>.guteUrls>div {box-shadow: 2px 1px 10px #111; max-width: 400px; padding: 1px 10px 10px 10px; border-radius: 8px}</style>');})"
selector="body > div"></script>
</body>
</html>
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:
<html>
<head>
<style>
.myPost {}
body > div {
width: 80%;
max-width: 700px;
border: 3px solid #000;
margin: 20px auto 20px auto;
padding: 20px
}
</style>
</head>
<body>
<h1>My Blog</h1>
<hr />
<div class="myP">
<h2><a href="javascript:alert('Full text of first post.')">
Title of first post
</a></h2>
<br />
<span>
My first text block. https://www.youtube.com/watch?v=IZ_SFbaysHk End.
</span>
</div>
<hr />
<div class="myP">
<h2><a href="javascript:alert('Full text of second post.')">
Title of second post
</a></h2>
<br />
<span>
This is my
<a href="http://www.nytimes.com/2016/08/28/opinion/sunday/even-roger-federer-gets-old.html">
Second text</a> block
</span>
</div>
<script>
document.changePostTitleLink = function ( jqueryElement, url, $ ) {
// The jqueryElement is the preview box.
// This box is in the "span", beacause we definded selector=".myP > span"
// We go up to the parent div.myP,
// and then we search inside the div for <a href=...
// and then we change the href
jqueryElement.closest('div.myP').each(function(element) {
$(this).find('a').attr('href', url);
});
}
</script>
<script async
src="https://guteurls.de/guteurls.js"
callback-a="document.changePostTitleLink"
selector=".myP > span"></script>
</body>
</html>
This example changes the link of the headlines ("h2").The link will be the found URL.
Open this example in your browser
Example 6:
<html>
<head>
<style>
.myP {}
.divManyPosts>div { border-top: 1px solid #888; padding: 20px; }
.aLoadMore { font-size: 30px; line-height: 40px; margin-bottom: 50px;}
</style>
</head>
<body>
<h1>My Blog</h1>
<div class="divManyPosts">
<!--
<div class="myP">
My first text block. https://www.youtube.com/watch?v=IZ_SFbaysHk End.
</div>
-->
<div class="myP">
My first text block. https://www.youtube.com/watch?v=QZCdmrP8ATg 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>
-->
</div>
<a href="javascript:loadMore()" class="aLoadMore">Load and show more posts</a>
<br />
<br />
<br />
<div id="divMorePosts" style="display:none">
This is my
<a href=https://www.youtube.com/watch?v=IBEg-jygXrE">
third text</a> block
</div>
<div id="xxxxxxdivMorePosts" style="display:none">
This is the third text block in this html.
This DIV is hidden.
If you want to programm, then you could add ajax script,
which load the DIV HTML via Ajax, when user scrolls down.
<br />
URL for the URL Preview Box:<br />
https://hypnose54321.de/frankfurt/ is a great website!
</div>
<script async
src="https://test.guteurls.de/guteurls.max.js"
Xsrc="https://test.guteurls.de/guteurls.min.js"
selector=".myP"
local="1"
nocache="1"
hideIFrames="1"
></script>
<script>
function loadMore() {
var $ = document.guteUrls.jQuery;
$('div.divManyPosts').append(
'<div class="myP">a' + $('#divMorePosts').html() + '</div>'
);
alert($('#divMorePosts').text());
document.guteUrls.execute();
}
</script>
</body>
</html>
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