Incarca filme Youtube fara codul iframe sau jQuery (SEO)

Cautam recent o solutie pentru situl RobotFX de a incarca filmele tutorial ale acestuia fara a folosi insa codul initial al Youtube (iframe). Cred ca toti webmasterii stiu, sau ar trebui sa stie ca nu este recomandata folosirea iframe-urilor in paginile web. Nu numai ca ingreauneaza incarcarea paginii - deoarece se incarca si pagina din iframe, dar se 'scurge' si un pic din rank-ul paginii.
E simplu de facut cu jQuery si se gasesc nenumarate plugin-uri pentru a incarca filmele Youtube fara a folosi iframe-ul. Insa RobotFX nu are jQuery si nu dorea folosirea acestuia deoarece deja se foloseste de multe alte javascript-uri.
O solutie am gasit prin folosirea unui mic cod javascript si a unor trucuri CSS. Fara a mai lungi vorba, iata solutia:
Codul HTML

<div class="youtube-container"><div class="youtube-player" data-id="ZgEB_SRC9iw"><div><img alt="RobotFX video demonstration" class="youtube-thumb" src="//i.ytimg.com/vi/ZgEB_SRC9iw/hqdefault.jpg"><div class="play-button"></div></div></div></div>

Codul CSS

.youtube-container { display: block; margin: 20px auto; width: 100%; max-width: 570px; }
.youtube-player { display: block; width: 100%; padding-bottom: 56.25%; overflow: hidden; position: relative; height: auto; cursor: hand; cursor: pointer; display: block; }
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto }
div.play-button {height:318px;width:570px;left: 0px; top:0px; position: absolute; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6jj4SirQ4qs08-aZamQIca1hSW0gpXsSK0QwB_9tsLrNT7u1ewEwi2Xm7w4lQ5bqdTZ8DHTxVU2gmLbVqle6UJ2tRqOt7Qc4bL9kLddFtr2EQJNICm0bxIfS4_IEzOiNyTQz-ZAV6KRc/s1600/download.png") no-repeat; z-index:3;}
#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index:99;}
div.play-button:hover {filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1);}

Codul JavaScript

function labnolThumb(e){return'<img alt="RobotFX video demonstration" class="youtube-thumb" src="//i.ytimg.com/vi/'+e+'/hqdefault.jpg"><div class="play-button"></div>'}function labnolIframe(){var e=document.createElement("iframe");e.setAttribute("src","//www.youtube.com/embed/"+this.parentNode.dataset.id+"?rel=0&autoplay=1&autohide=2&border=0&wmode=opaque&controls=1&showinfo=0"),e.setAttribute("frameborder","0"),e.setAttribute("id","youtube-iframe"),e.setAttribute("allowfullscreen","allowfullscreen"),this.parentNode.replaceChild(e,this)}!function(){for(var e=document.getElementsByClassName("youtube-player"),t=0;t<e.length;t++){var o=document.createElement("div");o.innerHTML=labnolThumb(e[t].dataset.id),o.onclick=labnolIframe,e[t].appendChild(o)}}();

Le gasiti si pe JSFiddle si puteti testa vizitand situl RobotFX.

Cum sa accepti cererile de prietenie Friend Requests cu un singur click

Uneori uitam de contul Facebook (se intampla destul de rar, dar totusi) si cand accesam contul observam ca avem o multime de cereri de prietenie (Friend requests). Le putem, bineinteles, aproba sau refuza prin simplul click al butoanelor din dreptul fiecarei cereri, de pe pagina cererilor de prietenie.

Daca insa doriti sa le aprobati pe toate, devenind astfel prieten cu toti care v-au solicitat acest lucru, exista o varianta mai simpla. Iata pasii ce trebuiesc urmati:

1. Navigati catre facebook.com/reqs.php in Firefox sau Chrome
2. Apasati tasta F12 de pe tastatura si apoi navigati la Consola
3. Copiati codul de mai jos in Consola si apasati tasta Enter pentru a-l activa - in cazul in care nu vor fi aprobate toate cererile, reincarcati pagina (F5) si repetati procedura

Asta este tot si nu este nevoie de nici un alt addon suplimentar, precum iMacros sau Greasemonkey.

Codul pentru consola

for( i = 1;i<document.getElementsByName("actions[accept]").length;i++){document.getElementsByName("actions[accept]")[i].click();};

JQuery replace - inlocuieste un caracter/termen cu altul

In paginile web, jQuery poate fi folosit pentru a inlocui un anume caracter (ori termen) cu un altul. Acest lucru se face, bineinteles, local, in browserul vizitatorului paginii. Nu poate fi modificat continutul propriu-zis al paginii, ci doar cum il va afisa navigatorul (Chrome, Internet Explorer etc).
Pentru a inlocui un anume caracter din pagina web va recomand sa folositi jQuery gazduit de Google ori de jQuery; asta pentru a salva putin din banda de internet alocata sitului dvs. JQuery se mai poate insera si de pe siturile Microsoft, CdnJs si JsDelivr.
Dupa ce ati inserat jQuery in pagina sitului copiati codul de mai jos dupa aceasta si modificati termenii/caracterele pe care le doriti inlocuite. In exemplul de mai jos am inlocuit cuvantul agude cu dude.
Astfel, daca textul paginii contine propozitia:

- Tie iti plac agudele?

... aceasta va deveni, dupa incarcarea completa a paginii si rularea codului javascript:

- Tie iti plac dudele?

Exemplu de codul jQuery replace:

<script type='text/javascript'>

//<![CDATA[ 

$(window).load(function(){

$(document).ready(function(){

$('#continut').html($('#continut').html().replace(/\agude/g,"dude"));

});

});

//]]>  

</script>

 In acest exemplu, #continut este id-ul elementului care contine termenul ori caracterul ce trebuie inlocuit. Aceastaq poate fi div, span, p, table s.a.m.d. Exemplu mai jos:
<div id="continut">
- Tie iti plac agudele?
- Nu, nu imi plac deloc.
</div>

Cum sa-ti fortezi vizitatorii sa faca Like, Tweet, Google+

Am cautat zilele astea cum sa sa fortezi  vizitatorii sitului, ori unei anume pagini sa faca Like paginii respective si am gasit o multime de plugin-uri pentru Wordpress care fac acest lucru. Cam toate functioneaza pe acelasi principiu: continutul paginii este blocat, incomplet sau ascuns, iar pentru a afisa toata pagina vizitatorul este 'rugat' insistent sa voteze pagina; adica sa faca click pe LIKE, TWEET sau GOOGLE+.

Facebook LIKE

Insa nu prea am gasit mare lucru pentru siturile care nu ruleaza pe Wordpress. Problema este ca aceste extensii Wordpress se foloseau si de fisierele Wordpress-ului pentru a incarca continutul incomplet sau ascuns in ajax. Alta problema este ca aceste plugin-uri nu sunt gratuite. Din fericire majoritatea acestor situri care vand extensiile platite ofera si demo-uri online si la o scanare a sursei paginii se poate copia/modifica codul lor. Am scanat asadar sursele lor si am combinat cateva dintre aceste plugin-uri a.i. sa poata fi folosite pe orice sit, fara a fi nevoie de Wordpress.
Scriptul meu functioneaza tot in acelasi fel. Pentru a fi cat mai simplu am ales sa ascund continutul interesant, continutul pentru care vizitatorii ar face click pe LIKE pentru a-l vedea, folosing CSS:

<style type="text/css">
div.post-body img{display:none}
</style>

Asadar, codul CSS de mai sus ascunde, sau mai bine zis nu afiseaza (display:none) imaginile (img) din elementele div din clasa post-body. Mai departe, trebuie sa spun din timp ca JavaScript-ul meu foloseste jQuery. va trebui sa-l integrati in codul paginii si recomand sa-l introduceti inainte de </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>

In continuare, spre deosebire de altele, acest script permite vizitatorilor sa deblocheze continutul unei pagini facand un click pe Like (Facebook), postand un post pe Twitter (Tweet) sau pe Google+ (G+). Asta va spori popularitatea sitului dvs pe toate aceste 3 retele sociale. Iar daca, din intamplare, vreunul dintre vizitatori nu are cont pe nici una dintre aceste 3 retele, el va putea vizita o pagina anume, sa-i spunem pagina sponsorilor, unde va primi acces automat cu ajutorul unui cookie. Pentru a scrie acest cookie folositi urmatorul script:

<script type='text/javascript'>jQuery.cookie = function (key, value, options) {

    if (arguments.length > 1 && String(value) !== "[object Object]") {
        options = jQuery.extend({}, options);
        if (value === null || value === undefined) {
            options.expires = -1;
        }
        if (typeof options.expires === 'number') {
            var days = options.expires, t = options.expires = new Date();
            t.setDate(t.getDate() + days);
        }
        value = String(value);
        return (document.cookie = [
            encodeURIComponent(key), '=',
            options.raw ? value : encodeURIComponent(value),
            options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
            options.path ? '; path=' + options.path : '',
            options.domain ? '; domain=' + options.domain : '',
            options.secure ? '; secure' : ''
        ].join(''));
    }
    // key and possibly options given, get cookie...
    options = value || {};
    var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
    return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};</script>

 Adaugati acest cod dupa jQuery. Pentru a nu avea probleme cu executia in nici unul dintre browsere, inserati scripturile siturilor sociale in mod sincron si nu asincron (async),in felul urmator:

<div id="fb-root"></div>
<script type='text/javascript' src='//apis.google.com/js/plusone.js'></script>
<script type='text/javascript' src='//platform.twitter.com/widgets.js'></script>
<script type='text/javascript' src='//connect.facebook.net/en_GB/all.js#xfbml=1'></script>

Mai sus am inserat si div-ul fb-root care vine odata cu scriptul Facebook. In continuare scriptul propriu-zis:

<script type="text/javascript">
var virallocker_use = false;
function virallocker_plusone(plusone) {
if (plusone.state == "on") {
var data = {post: "1", action: "virallocker", network: "google"};
jQuery.cookie('visitor_cooke_ASDFG', '1', { expires: 365, path: '/', domain: 'www.id.atat.ro'});
jQuery('div.post-body img').show('slow');
jQuery('div.post-body img').css("display","block");
jQuery('#virallock-box').css("display","none");
jQuery('#virallock-box').css("visibility","hidden");
jQuery('#virallock-box').hide();
}
}
FB.init();
jQuery(document).ready(function() {
FB.Event.subscribe("edge.create", function(href, widget) {
var data = {post: "1", action: "virallocker", network: "facebook"};
jQuery.cookie('visitor_cooke_ASDFG', '1', { expires: 365, path: '/', domain: 'www.id.atat.ro'});
jQuery('div.post-body img').show('slow');
jQuery('div.post-body img').css("display","block");
jQuery('#virallock-box').css("display","none");
jQuery('#virallock-box').css("visibility","hidden");
jQuery('#virallock-box').hide();
});
twttr.ready(function (twttr) {
twttr.events.bind("tweet", function(event) {
var data = {post: "1", action: "virallocker", network: "twitter"};
jQuery.cookie('visitor_cooke_ASDFG', '1', { expires: 365, path: '/', domain: 'www.id.atat.ro'});
jQuery('div.post-body img').show('slow');
jQuery('div.post-body img').css("display","block");
jQuery('#virallock-box').css("display","none");
jQuery('#virallock-box').css("visibility","hidden");
jQuery('#virallock-box').hide();
});
});
});
</script>

Va trebui sa modificati linia:

jQuery.cookie('visitor_cooke_ASDFG', '1', { expires: 365, path: '/', domain: 'www.id.atat.ro'});

si sa alegeti un alt nume (recomandat) pentru cookie, in locul  visitor_cooke_ASDFG. Deasemenea, 365 este numarul de zile pentru care acest cookie va exista - ganditi-va ca vizitatorii sitului vor avea acces la continutul ascuns timp de 365 de zile... daca nu-si curata intre timp cache-ul browser-ului. Apoi schimbati numele domeniului (www.id.atat.ro) cu cel unde veti insera codul.
Imediat dupa acest cod introduceti urmatoarele 3, care au rolul de a verifica existenta cookie-ului si de a ascunde sau afisa continutul (imaginea din div.post-body), precum si elementul div ce va afisa butoanele siturilor sociale:

<script type="text/javascript">
jQuery(document).ready(function() {
if(jQuery.cookie('visitor_cooke_ASDFG')!=1){
virallocker_use = true;
jQuery('#virallock-box').css("z-index","99999999");
jQuery('#virallock-box').css("display","block");
}});</script>
<script type="text/javascript">
jQuery(document).ready(function() {
if(jQuery.cookie('visitor_cooke_ASDFG')==1){
virallocker_use = false;
jQuery('div.post-body img').css("display","block");
jQuery('#virallock-box').css("display","none");
jQuery('#virallock-box').css("visibility","hidden");
jQuery('#virallock-box').hide();
}});</script>
<div class="virallock-box" id="virallock-box"><div style="width:250px;float:left;height:110px;font-size:0.9em;color:#000">Doua posibilitati de a afisa pozele id-urilor<ul><li style="border-top: dashed 1px rgba(128, 128, 128, .5)">1. Faceti un click pe butoanele din dreapta: LIKE, GOOGLE+, TWEET</li><li style="border-top: dashed 1px rgba(128, 128, 128, .5)">2. <a rel="nofollow" href="http://www.id.atat.ro/p/adauga-un-id.html" title="Inregistrare id"><span style="color:blue">Inregistati-va id</span></a>-ul pe sit</li></ul><span style="font-size:0.8em;"><em>Casuta aceasta va disparea dupa efectuarea uneia dintre operatiile descrise mai sus</em></span></div><div style="width:250px;overflow:hidden;height:110px;"><div><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.id.atat.ro/" data-text="Cel mai mare sit romanesc de id-uri de mess, baieti si fete:" data-count="horizontal" data-lang="en" data-via="www_id_atat_ro" data-related="www_id_atat_ro" data-hashtags="atat.ro">Tweet</a></div><div><g:plusone size="medium" annotation="inline" callback="virallocker_plusone" href="http://www.id.atat.ro"></g:plusone></div><div><fb:like id="fbLikeButton" href="http://www.id.atat.ro" show_faces="false" width="230"></fb:like></div></div></div><script type="text/javascript">
FB.XFBML.parse();
</script>

Scriptul va ascunde si acest div, cu butoanele sociale, dupa scrierea cookie-ului... care, reamintesc, se face dupa click pe oricare dintre butoane sau, in exemplul de mai sus, atunci cand cineva viziteaza pagina  http://www.id.atat.ro/p/adauga-un-id.html. Practic mesajul care indeamna vizitatorii sa se inregistreze este eronat deoarece imediat ce pagina se deschide imaginile ascunse vor fi afisate, deci nu este necesara nici o inregistrare ;) Acest lucru este posibil de catre codul inserat pe pagina http://www.id.atat.ro/p/adauga-un-id.html si care arata cam asa:

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery.cookie('visitor_cooke_ASDFG', '1', { expires: 365, path: '/', domain: 'www.id.atat.ro'});
});
</script>

In concluzie, pentru a debloca imaginile de pe situl de id-uri de mess vizitatorii vor avea 2 optiuni:

1. sa faca click pe oricare dintre butoanele siturilor sociale din div-ul virallock-box sau
2. sa viziteze pagina de inregistrare

... iar scriptul functioneaza scriind un cookie cu valoarea 1 (visitor_cooke_ASDFG) ori de cate ori cineva efectueaza oricare din operatiile de mai sus si apoi verificand existenta acestui cookie. Daca exista deja in calculatorul vizitatorului, imaginile de pe sit vor fi afisate; daca nu, ele vor fi ascunse. Bineinteles, oricine poate accesa sursa pagini si gasi link-urile imaginilor sau continutul ascuns.
Scriptul meu este bineinteles gratuit si il puteti folosi cum vreti si unde vreti (Blogger etc)

Click aici pentru demo

Atentie, nu apare pe prima pagina. Vizitati oricare alta pagina pentru a vedea cum functioneaza. Daca nu intelegeti ceva cautati in sursa paginilor sitului id.atat.ro.

"Share links" cu jquery, fara AddThis sau ShareThis

Share cu jQuery

In acest articol am sa scriu cum puteti crea un meniu de "share links" asemanator celor oferite de siturile gen AddThis ori Share This (si alte cateva). O scurta explicatie, prin "Share links" ma refer la link-urile ce va trimit catre siturile pe care puteti sa publicati paginile/siturile dvs. favorite, precum Facebook, Twitter, Digg si multe altele. Stiu, nu sunt greu de facut, insa codul meu (de fapt al celor de la Craigslist, de unde l-am imprumutat) este mult mai rapid si nu ingreuneaza incarcarea paginii web care il contine.

Dezavantajul siturilor AddThis, ShareThis, etc, este ca de multe ori scriptul lor se incarca foarte greu.

Asadar, sa trecem la codul propriu-zis. Apropos de cod, sunt necesare librariile jQuery pentru ca acesta sa functioneze; majoritatea siturilor folosesc deja javascriptul jQuery, asa ca probabil puteti sterge linia din acest cod care include jQuery, pentru a nu-l incarca de 2 ori pe aceeasi pagina/site. Deasemenea, puteti modifica acest cod ori aspectul acestuia (stilul CSS) dupa cum doriti si va sfatuiesc si sa descarcati poza cu icoanele siturilor de socializare din <style></style>, s-o reincarcati pe situl dvs. (ori pe contul Flickr, Photobucker, Picasa s.a.m.d.) si s-o folositi pe a dvs. deoarece este posibil sa renunt in viitor la Flickr si sa sterg aceasta poza.

Share links cu jQuery

<style>

div#shareSocial{border:2px #ccc solid;float:right;font-size:x-small;font-family:sans-serif;display:none;background:#FFF;width:10em;margin:7px;padding:7px;}div#shareSocial #sstitle{font-size:small;}div#shareSocial #ssmain{border-top:2px #ccc solid;margin-top:6px;}div#shareSocial #ssGetMore{padding:2px 0 0 20px;}div#shareSocial a{color:#4c4c4c!important;text-decoration:none;background:url(http://farm9.staticflickr.com/8162/7252758694_794ca304f3_b.jpg) no-repeat top left;line-height:16px;display:block;height:16px;border-bottom:1px #eee solid;margin:3px;padding:0 0 0 20px;}div#shareSocial a.more{display:none;}#shareSocial a#delicious{background-position:0 -176px;}#shareSocial a#diigo{background-position:0 -208px;}#shareSocial a#digg{background-position:0 -192px;}#shareSocial a#email{background-position:0 -224px;}#shareSocial a#facebook{background-position:0 -240px;}#shareSocial a#fark{background-position:0 -256px;}#shareSocial a#friendfeed{background-position:0 -304px;}#shareSocial a#mixx{background-position:0 -464px;}#shareSocial a#myspace{background-position:0 -496px;}#shareSocial a#stumbleupon{background-position:0 -704px;}#shareSocial a#propellor{background-position:0 -576px;}#shareSocial a#reddit{background-position:0 -592px;}#shareSocial a#technorati{background-position:0 -752px;}#shareSocial a#twitter{background-position:0 -784px;}div#shareSocial a:hover{background:#eee;}

</style>

<div id="shareSocial">

<div id="sstitle">Share this on: </div>

<div id="ssmain">

<a title="Email" rel="nofollow" href="mailto:?subject=#T#&body=Read this: #U#" id="email">Email</a>

<a title="Diigo" rel="nofollow" target="_blank" class="more" href="http://www.diigo.com/post?url=#U#&amp;title=#T#" id="diigo">Diigo</a>

<a title="Digg" rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&amp;url=#U#&amp;title=#T#" id="digg">Digg</a>

<a title="delicious" rel="nofollow" target="_blank" href="http://del.icio.us/save?v=5&amp;noui&amp;jump=close&amp;url=#U#&amp;title=#T#" id="delicious">delicious</a>

<a title="Facebook" rel="nofollow" target="_blank" href="http://www.facebook.com/share.php?u=#U#&t=#T#" id="facebook">Facebook</a>

<a title="Fark" rel="nofollow" target="_blank" class="more" href="http://cgi.fark.com/cgi/fark/farkit.pl?u=#U#" id="fark">Fark</a>

<a title="FriendFeed" rel="nofollow" target="_blank" class="more" href="http://friendfeed.com?url=#U#&amp;title=#T#" id="friendfeed">FriendFeed</a>

<a title="Mixx" rel="nofollow" target="_blank" class="more" href="http://www.mixx.com/submit/story?page_url=#U#" id="mixx">Mixx</a>

<a title="MySpace" rel="nofollow" target="_blank" href="http://www.myspace.com/index.cfm?fuseaction=postto&amp;t=#T#" id="myspace">MySpace</a>

<a title="Propellor" rel="nofollow" target="_blank" class="more" href="http://www.propeller.com/story/submit/?url=#U#&amp;title=#T#" id="propellor">Propellor</a>

<a title="reddit" rel="nofollow" target="_blank" class="more" href="http://reddit.com/submit?url=#U#&amp;title=#T#" id="reddit">reddit</a>

<a title="StumbleUpon" rel="nofollow" target="_blank" class="more" href="http://www.stumbleupon.com/submit?url=#U#&amp;title=#T#" id="stumbleupon">StumbleUpon</a>

<a title="technorati" rel="nofollow" target="_blank" class="more" href="http://technorati.com/faves?add=#U#" id="technorati">technorati</a>

<a title="Twitter" rel="nofollow" target="_blank" href="http://twitter.com/home?status=#U#" id="twitter">Twitter</a>

<div id="ssGetMore">More...</div>

</div>

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){$("#shareSocial").show()

.mouseleave(function(){$("#ssGetMore").show(50);$("#ssmain a.more").hide(50);});$("#shareSocial a").each(function(){h=$(this).attr('href');h=h.replace(/#U#/g,encodeURIComponent(self.location.href));h=h.replace(/#T#/g,encodeURIComponent($("head title").html()));$(this).attr('href',h);}).mouseover(function(){window.status='';return false;});$("#ssGetMore").mouseenter(function(){$("#ssGetMore").hide(50);$("#ssmain a.more").show(50);});});

</script>

In codul de mai sus aveti, in ordinea scrierii, codul CSS ce va permite sa schimbati aspectul casutei cu link-urile de sharing, DIV-ul ce contine link-urile, javascriptul jQuery gazduit de Google (stergeti-l daca il aveti deja inclus in pagina) si inca un script compatibil cu jQuery care extrage link-ul paginii si titlul acesteia, pentru a crea link-urile de sharing.
Atat!
Meniul drop-down cu link-urile de share va aparea precum in poza.