Does anyone have idea about how to implement something like "PIN IT" button in pinterest.com?
From a high-level, I understand what it does but not in detail. You click on "pin it" bookmark, and then you scrape the site source code to find out images with width and height greater than some threshold. The scraping of the page source to find images can happen on the client side or on the server side. What's the best way to achieve something similar?
Could some one throw insight into their implementation?
Actually this kind of bookmarks usually do this:
When you click on Bookmark, then it will run an JavaScript code by redirecting to following URL:
javascript: void((function () { SOME_CODE })());
Then SOME_CODE will execute. In this case Pin it button will run following:
javascript: void((function () {
var e = document.createElement('script');
e.setAttribute('type', 'text/javascript');
e.setAttribute('charset', 'UTF-8');
e.setAttribute('src', 'http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random() * 99999999);
document.body.appendChild(e)
})());
Which will end up adding new tag to your document body. Pin It will add "pinmarklet.js" file. Note that "?r=' + Math.random() * 99999999" part is only for get by passing cache from client side by generating new number every time randomly.
If you want to find out exactly what happened next, then you need to take a look at their JavaScript source code. But it's easy to look into DOM and grab what ever you want to grab (Images, Video Links, ...) and apply your logic.
I hope this helps :-)
I create a function on javacript to share custom images with pinterest passing the source of the images that you would like to share.
Code: https://github.com/mustaine/Pinmarklet
I hope that it helps.
Related
Is it possible to call a javascript function from the URL? I am basically trying to leverage JS methods in a page I don't have access to the source.
Something like: http://www.example.com/mypage.aspx?javascript:printHelloWorld()
I know if you put javascript:alert("Hello World"); into the address bar it will work.
I suspect the answer to this is no but, just wondered if there was a way to do it.
There isn't from a hyperlink, no. Not unless the page has script inside specifically for this and it's checking for some parameter....but for your question, no, there's no built-in support in browsers for this.
There are however bookmarklets you can bookmark to quickly run JavaScript functions from your address bar; not sure if that meets your needs, but it's as close as it gets.
You can use Data URIs.
For example:
data:text/html,<script>alert('hi');</script>
For more information visit: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
Write in address bar
javascript:alert("hi");
Make sure you write in the beginning: javascript:
/test.html#alert('heello')
test.html
<button onClick="eval(document.location.hash.substring(1))">do it</button>
you may also place the followinng
<a href='javascript:alert("hello world!");'>Click me</a>
to your html-code, and when you click on 'Click me' hyperlink, javascript will appear in url-bar and Alert dialog will show
About the window.location.hash property:
Return the anchor part of a URL.
Example 1:
//Assume that the current URL is
var URL = "http://www.example.com/test.htm#part2";
var x = window.location.hash;
//The result of x will be:
x = "#part2"
Exmaple 2:
$(function(){
setTimeout(function(){
var id = document.location.hash;
$(id).click().blur();
}, 200);
})
Example 3:
var hash = "#search" || window.location.hash;
window.location.hash = hash;
switch(hash){
case "#search":
selectPanel("pnlSearch");
break;
case "#advsearch":
case "#admin":
}
Using Eddy's answer worked very well as I had kind of the same problem.
Just call your url with the parameters : "www.mypage.html#myAnchor"
Then, in mypage.html :
$(document).ready(function(){
var hash = window.location.hash;
if(hash.length > 0){
// your action with the hash
}
});
you can use like this situation:
for example, you have a page: http://www.example.com/page.php
then in that page.php, insert this code:
if (!empty($_GET['doaction']) && $_GET['doaction'] == blabla ){
echo '<script>alert("hello");</script>';
}
then, whenever you visit this url: http://www.example.com/page.php?doaction=blabla
then the alert will be automatically called.
Just use:
(function() {
var a = document.createElement("script");
a.type = "text/javascript";
a.src = "http://www.example.com/helloworld.js?" + Math.random();
document.getElementsByTagName("head")[0].appendChild(a)
})();
This basically creates a new JavaScript line in the head of the HTML to load the JavaScript URL you wish on the page itself. This seems more like what you were asking for. You can also change the a.src to the actual code, but for longer functions and stuff it becomes a problem. The source link can also link to a JavaScript file on your computer if targeted that way.
No; because it would make links extremely dangerous.
you can execute javascript from url via events
Ex: www.something.com/home/save?id=12<body onload="alert(1)"></body>
does work if params in url are there.
There is a Chrome extension called Bookmarklet URL (no affiliation). To append a URL with JavaScript, so that the JavaScript command is executed just after loading the webpage, one can use ?bmlet=javascript:
Example: Display an alert box
https://github.com/?bmlet=javascript:alert("Hi");
Example: Enable spell-checking while editing a GitHub README file
[Obviously, a spelling checking extension must be originally available.]
https://github.com/<username>/<repositoryname>/edit/main/README.md?bmlet=javascript:document.getElementById("code-editor").setAttribute("spellcheck","true");
On some pages, it might take some time, as the JavaScript command runs after completely loading the page. Simple commands like alert("Hi"); should run quickly.
I am a student and I have just realized my school blocked JavaScript from the address bar. It works with the "a" tag on a .html file but not on the bar anymore. I am not asking for help, I would just like to share this.
You can do one thing that is you can first open the link www.example.com. Then you can search:
javascript:window.alert("Hello World!")
I have these 3 lines of code in an external javascript file
function init(){
document.getElementById("upcoming_event").getElementsByTagName("img")[0].src = "images/fastnet_2013_poster.jpg";
document.getElementById("club_championship").getElementsByTagName("img")[0].src = "images/club_championship.png";
document.getElementById("setMembership").getElementsByTagName("img")[0].src = "images/join_our_club.png";
}
document.addEventListener( "DOMContentLoaded" , init , false);
This code works perfectly on this site which i used just to develop a little bit of it with 000webhosting.
But I have now moved my hosting to hosting24 to complete the development of the site. When i load the site through the new host(hosting24) the images are not getting loaded.
I have taken these 3 line of code out and tried them in an <body onload="init()"> but this dose not load the images either.
I know that both methods above are being called as i have got them to display a window.alert("Display").
Is there another way of doing this?
(document.getElementById("upcoming_event").getElementsByTagName("img")[0].src = "images/fastnet_2013_poster.jpg";) that i could try and use? Or solve my problem.
Changing servers should not effect javascript code at all. Only thing that comes to mind is that the URL's for the images sources isn't correct anymore, because of the move.
First you can use jQuery to help you do this in a simpler way like:
$('#upcoming_event').find('img')[0].src = "url";
or
$('#imgid').attr('src', 'xpto.jpg');
Secound, the code seems to work... I think the problem may be in the urls of the IMGs. Check if the images are in the correct folder or if the path is right.
I'm trying to make a new pin it button just like Pinterest has, I've see the content at that bookmark:
javascript:void(
(function(){
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);
document.body.appendChild(e)
})()
);
I'm new to javascript, so I am not sure how to start to do a new one. I have even no idea where should I start my coding. Is the backend for this Pin it button limited? Can anyone introduce how does this Pin it button works? Thank you so much.
Basically what that code does is injects a <script> tag into the page. The actual "pin it" code is located in the pinmarklet.js file.
To make your own feature like this, you can just reuse the code and replace the source with your own JavaScript file.
Side-note: the void(...) part is redundant because the function doesn't return anything anyway.
The code you posted simply injects a JavaScript file into the page's DOM which will cause it to get interpreted by the JavaScript engine. What you should be more interested in is the code in this file which implements the "Pin It" functionality:
http://assets.pinterest.com/js/pinmarklet.js
But since that is minified and somewhat obfuscated and probably proprietary, I would suggest what you want first is an easy to follow tutorial on how to create a Bookmarklet:
http://betterexplained.com/articles/how-to-make-a-bookmarklet-for-your-web-application/
Then, you need to think about how you will code your own web application to respond to asynchronous requests to "Pin" or save something. The following two simple but useful JavaScript variables could come in handy if you're just going for a simple "link-submission" type of functionality:
document.location.href -- to get the page's URL
document.title -- to get the contents of the page's TITLE tags
To compress your code into a single-line as is required by bookmarklets, you could use this tool:
http://subsimple.com/bookmarklets/jsbuilder.htm
If you want to add it to a button here is how:
html:
<button id="pintrest">Pin It</button>
And you script:
var btn = document.getElementById("pintrest");
btn.onclick = function () {
var e = document.createElement('script');
e.setAttribute('type', 'text/javascript');
e.setAttribute('charset', 'UTF-8');
e.setAttribute('src', 'http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random() * 99999999);
document.body.appendChild(e);
};
Now when you click on the button it should run the pintrest code
I'm a javascript beginner, and I'm trying to figure out why this code works when written in the head, but not when it's being referenced from an external file.
in the head of my html document, I'm referencing the javascript file "quote.js" as follows.
<script type="text/javascript" language="JavaScript" src="/js/quote.js"> </script>
the contents of quote.js are as follows
var textarray = [
"Be Good.",
"Our future depends powerfully on how well we understand the cosmos.",
"Bottomless wonders spring from simple rules... repeated without end.",
"All our science, measured against reality, is primitive and childlike — and yet, it is the most precious thing we have.",
"To use violence is to already be defeated."
];
function RndText() {
var rannum= Math.floor(Math.random()*textarray.length);
document.getElementById('ShowText').innerHTML=textarray[rannum];
}
window.onload = function() { RndText(); }
finally, the div I'm replacing in the body is as follows...
<div id = "ShowText"></div>
it's probably a stupid mistake, but I've been trying to track it down for a while now, and I'm missing something. When I write the contents of quote.js in my html head, it works fine. Any ideas? Thanks in advance.
If the code works in the head, but not when included, it's likely to be a problem with the path to the script. Double check that /js/quote.js is an appropriate location. It may need to be js/quote.js, you you may have a typo. In browsers like FireFox and Chrome, if you view the source code of your page you can click on the path to files like this and it loads the included file or shows you an error if the file is not found.
If you can share a link to the page, I can tell you with more certainty exactly what the problem is.
Also, you don't have to the language attribute if you're using XHTML, but that's not causing the problem.
Perhaps the code is running before the DOM is ready
Instead of onload use the event DOMContentLoaded
document.addEventListener('DOMContentLoaded', function () {
//code here
}, false);
Is it possible to call a javascript function from the URL? I am basically trying to leverage JS methods in a page I don't have access to the source.
Something like: http://www.example.com/mypage.aspx?javascript:printHelloWorld()
I know if you put javascript:alert("Hello World"); into the address bar it will work.
I suspect the answer to this is no but, just wondered if there was a way to do it.
There isn't from a hyperlink, no. Not unless the page has script inside specifically for this and it's checking for some parameter....but for your question, no, there's no built-in support in browsers for this.
There are however bookmarklets you can bookmark to quickly run JavaScript functions from your address bar; not sure if that meets your needs, but it's as close as it gets.
You can use Data URIs.
For example:
data:text/html,<script>alert('hi');</script>
For more information visit: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
Write in address bar
javascript:alert("hi");
Make sure you write in the beginning: javascript:
/test.html#alert('heello')
test.html
<button onClick="eval(document.location.hash.substring(1))">do it</button>
you may also place the followinng
<a href='javascript:alert("hello world!");'>Click me</a>
to your html-code, and when you click on 'Click me' hyperlink, javascript will appear in url-bar and Alert dialog will show
About the window.location.hash property:
Return the anchor part of a URL.
Example 1:
//Assume that the current URL is
var URL = "http://www.example.com/test.htm#part2";
var x = window.location.hash;
//The result of x will be:
x = "#part2"
Exmaple 2:
$(function(){
setTimeout(function(){
var id = document.location.hash;
$(id).click().blur();
}, 200);
})
Example 3:
var hash = "#search" || window.location.hash;
window.location.hash = hash;
switch(hash){
case "#search":
selectPanel("pnlSearch");
break;
case "#advsearch":
case "#admin":
}
Using Eddy's answer worked very well as I had kind of the same problem.
Just call your url with the parameters : "www.mypage.html#myAnchor"
Then, in mypage.html :
$(document).ready(function(){
var hash = window.location.hash;
if(hash.length > 0){
// your action with the hash
}
});
you can use like this situation:
for example, you have a page: http://www.example.com/page.php
then in that page.php, insert this code:
if (!empty($_GET['doaction']) && $_GET['doaction'] == blabla ){
echo '<script>alert("hello");</script>';
}
then, whenever you visit this url: http://www.example.com/page.php?doaction=blabla
then the alert will be automatically called.
Just use:
(function() {
var a = document.createElement("script");
a.type = "text/javascript";
a.src = "http://www.example.com/helloworld.js?" + Math.random();
document.getElementsByTagName("head")[0].appendChild(a)
})();
This basically creates a new JavaScript line in the head of the HTML to load the JavaScript URL you wish on the page itself. This seems more like what you were asking for. You can also change the a.src to the actual code, but for longer functions and stuff it becomes a problem. The source link can also link to a JavaScript file on your computer if targeted that way.
No; because it would make links extremely dangerous.
you can execute javascript from url via events
Ex: www.something.com/home/save?id=12<body onload="alert(1)"></body>
does work if params in url are there.
There is a Chrome extension called Bookmarklet URL (no affiliation). To append a URL with JavaScript, so that the JavaScript command is executed just after loading the webpage, one can use ?bmlet=javascript:
Example: Display an alert box
https://github.com/?bmlet=javascript:alert("Hi");
Example: Enable spell-checking while editing a GitHub README file
[Obviously, a spelling checking extension must be originally available.]
https://github.com/<username>/<repositoryname>/edit/main/README.md?bmlet=javascript:document.getElementById("code-editor").setAttribute("spellcheck","true");
On some pages, it might take some time, as the JavaScript command runs after completely loading the page. Simple commands like alert("Hi"); should run quickly.
I am a student and I have just realized my school blocked JavaScript from the address bar. It works with the "a" tag on a .html file but not on the bar anymore. I am not asking for help, I would just like to share this.
You can do one thing that is you can first open the link www.example.com. Then you can search:
javascript:window.alert("Hello World!")