mardi 27 septembre 2011

Un bouton pour déclencher une interaction avec mon réseau social

Je veux en 1 CLIC signaler une page web à mon réseau social SANS devoir installer une barre d'outils pour mon navigateur !

Comment ?
L'outil de  curation (le plus vilain mot du web 2.0) scoop.it montre une solution simple et efficace.

Un raccourci ajouté à la barre de liens favoris qui par l'intermédiaire d'un java script effectu l'ajout.

voici le code du javascript

javascript:(function()
{
scscript=document.createElement('SCRIPT');
scscript.type='text/javascript';
scscript.src='http://www.scoop.it/resources/bklet/scoop.js?x='+(Math.random());
document.getElementsByTagName('head')[0].appendChild(scscript);
document.sc_srvurl='http://www.scoop.it'
})();

qui appel un autre script  :

http://www.scoop.it/resources/bklet/scoop.js
ce script ouvre un iframe avec ce qu'il faut dedans

ci dessous des infos sur l'insertion dynamique de javascript
http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

function addCSS(url) {
    var headID = document.getElementsByTagName("head")[0];
    var cssNode = document.createElement('link');
    cssNode.type = 'text/css';
    cssNode.rel = 'stylesheet';
    cssNode.href = url;
    cssNode.media = 'screen';
    headID.appendChild(cssNode);
}

function addScript(url) {
    scscript=document.createElement('SCRIPT');
    scscript.type='text/javascript';
    scscript.src=url;
    document.getElementsByTagName('head')[0].appendChild(scscript);
}

function showItem(id) {
    try {
        var item = document.getElementById(id);
        if (item) {
            item.style.display = "";
        }
        if (is_chrome) {
            var embeds = document.getElementsByTagName("embed");
            for (var i = 0; i < embeds.length; i++) {
                embeds[i].style.visibility = "hidden";
            }
        }
        
        document.getElementById("iframeUnderDivToShowOverFlash").style.display = "block";
    } catch (e) {

    }
}

function toggleItem(id) {
    var item = document.getElementById(id);
    if (item) {
        if (item.style.display == "none") {
            item.style.display = "";
            document.getElementById("iframeUnderDivToShowOverFlash").style.display = "block";
            
            if (is_chrome) {
                var embeds = document.getElementsByTagName("embed");
                for (var i = 0; i < embeds.length; i++) {
                    embeds[i].style.visibility = "hidden";
                }
            }
            
        } else {
            document.getElementById("iframeUnderDivToShowOverFlash").style.display = "none";
            item.style.display = "none";
            
            if (is_chrome) {
                var embeds = document.getElementsByTagName("embed");
                for (var i = 0; i < embeds.length; i++) {
                    embeds[i].style.visibility = "visible";
                }
            }
        }
    }
}

function hideBklet(id) {
    var item = document.getElementById(id);
    if (item) {
        document.getElementById("iframeUnderDivToShowOverFlash").style.display = "none";
        item.style.display = "none";
        
        if (is_chrome) {
            var embeds = document.getElementsByTagName("embed");
            for (var i = 0; i < embeds.length; i++) {
                embeds[i].style.visibility = "visible";
            }
        }
    }
}

function sleep(milliSeconds){
    var startTime = new Date().getTime(); // get the current time
    while (new Date().getTime() < startTime + milliSeconds); // hog cpu
}

function createDisplay() {
    addCSS(document.sc_srvurl + "/resources/bklet/bklet_external.css");
    
    var div = document.createElement("div");
    div.id = "sc_bookmarklet";
    document.body.insertBefore(div, document.body.firstChild);
    
    var iframeUnderDivToShowOverFlash = document.createElement("iframe");
    iframeUnderDivToShowOverFlash.id = "iframeUnderDivToShowOverFlash";
    iframeUnderDivToShowOverFlash.setAttribute("frameborder", "0");
    iframeUnderDivToShowOverFlash.setAttribute("allowTransparency", "true");
    document.body.insertBefore(iframeUnderDivToShowOverFlash, div);
    
    if (is_chrome) {
        var embeds = document.getElementsByTagName("embed");
        for (var i = 0; i < embeds.length; i++) {
            embeds[i].setAttribute("wmode","transparent");
        }
    }
}

(function() {
    var existing_iframe = document.getElementById('sc_bookmarklet');
    if (!existing_iframe){
        createDisplay();
    }
    showItem('sc_bookmarklet'); 
    existing_iframe = document.getElementById('sc_bookmarklet');
    var iframe_url = document.sc_srvurl + "/bookmarklet?url="+encodeURIComponent(document.location);
    var loadingUrl = document.sc_srvurl + "/resources/img/popup/loader.gif"
    
    var str = "";
    str += "<div id='sc_logo'></div>";
    str += "<div id='sc_main'>";
    str += "    <hr style='margin-right: 13px; margin-left: 5px;'/>";
    str += "    <iframe id='sc_iframe' frameborder='0' name='sc_bookmarklet_iframe' src='" + iframe_url + "'></iframe>"
    str += "</div>";
    str += "<a id='sc_close' onClick='toggleItem(\"sc_bookmarklet\");' href='javascript:void(0);'>";
    str += "    &nbsp;";
    str += "</a>";

    existing_iframe.innerHTML = str;
})();

var onScoopItMessage = function(e) {
    if (e.data == "close_scoopit") {
        hideBklet("sc_bookmarklet");
    }
};

if (typeof window.addEventListener != 'undefined') {
    window.addEventListener('message', onScoopItMessage, false);
} else if (typeof window.attachEvent != 'undefined') {
    window.attachEvent('onmessage', onScoopItMessage);
}