Come realizzare una procedura che obblighi gli utenti a condividere necessariamente il post su Facebook prima di poter riprodurre come al solito il video in esso pubblicato.
È sicuro che anche in Italia ci siano utenti di Youtube con centinaia di migliaia di iscritti che fanno della loro passione un vero e proprio lavoro visto che con il Programma Partner di Youtube un così alto numero di iscritti e quindi di visualizzazioni porta certamente a entrate rilevanti. La viralità di un video dipende da un sacco di ingredienti non ultimo anche qualcuno un po' furbetto che obbliga l'utente a condividere un video o un post per poterlo visualizzare.
Vediamo come realizzare una procedura che permetta di postare video nel nostro sito e di obbligare gli utenti che vogliano visualizzarli a condividere il post relativo su Facebook per incrementarne la viralità. Il player visualizzato sarà identico a quello di Youtube e pure l'icona rozza del Play muterà colore quando ci si passi sopra con il cursore
Quando però ci si clicca sopra si visualizzerà una scritta come questa
Cliccandoci sopra nuovamente si aprirà una finestra popup per condividere il post su Facebook
Solo dopo aver condiviso il link il lettore potrà riprodurre il video come al solito.
Per l'installazione di questa interessante personalizzazione dovremo operare sul modello. Dopo aver salvato il template si va quindi su Modello > Modifica HTML, si cerca la riga </head> e, subito sopra, si incolla il seguente codice
<!-- Condivisione obbligata su Facebook Inizio -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<style>
#youtubeblocker {
position:relative;
margin:0px auto;
cursor:;
overflow: hidden;
border:0px solid #000;
width:640px;
height:360px;
}
#youtubeblocker iframe {
display:;
}
#youtubeblocker #image {
width:100%;
height:100%;
background-size:100% 100%;
}
#youtubeblocker #play {
position:absolute;
top:0;
left:0;
display:block;
width:640px;
height:360px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLJDx2CmTOCezyu4bHENzFVJTp3i79_0ajRpKo_m80rxGYXLIaxdz3HRSIQ9FVvSQ-KMMAQVGi_mE4n0HlRg4qw6PuiwovhxXgpCoENEx4o97wLcKk4EQaUKQjwsdC1o2Qk7EA6vuSP88/s620/fv01.png);
border:0px solid #000;
z-index:1;
}
#youtubeblocker #play-button {
position:absolute;
cursor:pointer;
top:0;
left:0;
display:block;
width:640px;
height:360px;
}
#youtubeblocker #play-button:hover {
position:absolute;
cursor:pointer;
top:0;
left:0;
display:block;
width:640px;
height:360px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqIegeHySfVKkpXv-y6r-tIkUYFfYgAoXrld9LgCjDXIfEBDZMR4BfLcrK26WC-OVUmWlHYceoGe1OFvgxRszGeQQdYbO2C2G_jp-bYjqEBy8pGFmeDXzxkPwE3i5gs7k8IsxLax7G4Qo/s620/fv02.png);
}
#youtubeblocker #sharebox {
display:none;
cursor:pointer;
position:absolute;
top:0;
left:0;
width:640px;
height:360px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIh1QQ6TYoF97BA29ImbpWKu8cvy80_hGLXB0bl0NOYSRaiPulf0UVPC2tP5iBxl5pGqIGf7PWNNg5kntUWMNrTEtgvdGNHQUVVIvYeSBLYO-BjHQ6R9szNJ2U19U1vbcBa0uvk7SmBKQ/s620/facebook-condividi.png);
border:0px solid #000;
z-index:2;
}
</style>
<!-- Condivisione obbligata su Facebook Fine -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<style>
#youtubeblocker {
position:relative;
margin:0px auto;
cursor:;
overflow: hidden;
border:0px solid #000;
width:640px;
height:360px;
}
#youtubeblocker iframe {
display:;
}
#youtubeblocker #image {
width:100%;
height:100%;
background-size:100% 100%;
}
#youtubeblocker #play {
position:absolute;
top:0;
left:0;
display:block;
width:640px;
height:360px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLJDx2CmTOCezyu4bHENzFVJTp3i79_0ajRpKo_m80rxGYXLIaxdz3HRSIQ9FVvSQ-KMMAQVGi_mE4n0HlRg4qw6PuiwovhxXgpCoENEx4o97wLcKk4EQaUKQjwsdC1o2Qk7EA6vuSP88/s620/fv01.png);
border:0px solid #000;
z-index:1;
}
#youtubeblocker #play-button {
position:absolute;
cursor:pointer;
top:0;
left:0;
display:block;
width:640px;
height:360px;
}
#youtubeblocker #play-button:hover {
position:absolute;
cursor:pointer;
top:0;
left:0;
display:block;
width:640px;
height:360px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqIegeHySfVKkpXv-y6r-tIkUYFfYgAoXrld9LgCjDXIfEBDZMR4BfLcrK26WC-OVUmWlHYceoGe1OFvgxRszGeQQdYbO2C2G_jp-bYjqEBy8pGFmeDXzxkPwE3i5gs7k8IsxLax7G4Qo/s620/fv02.png);
}
#youtubeblocker #sharebox {
display:none;
cursor:pointer;
position:absolute;
top:0;
left:0;
width:640px;
height:360px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIh1QQ6TYoF97BA29ImbpWKu8cvy80_hGLXB0bl0NOYSRaiPulf0UVPC2tP5iBxl5pGqIGf7PWNNg5kntUWMNrTEtgvdGNHQUVVIvYeSBLYO-BjHQ6R9szNJ2U19U1vbcBa0uvk7SmBKQ/s620/facebook-condividi.png);
border:0px solid #000;
z-index:2;
}
</style>
<!-- Condivisione obbligata su Facebook Fine -->
Si cerca quindi la riga
<body expr:class='"loading" + data:blog.mobileClass'>
oppure la riga che inizia con <body… nei modelli più vecchi quindi, subito sotto, si incolla
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = '//connect.facebook.net/it_IT/all.js#xfbml=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Condivisione obbligatoria Facebook Inizio -->
<b:if cond='data:blog.pageType == "item"'>
<script>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId: '',
status: true,
xfbml: true
});
};
function youtubeblocker() {
FB.ui( {
method: '../sharer/sharer.php?u=' +document.URL+ '',
link : document.URL,
},
function(response) {
if (response) {
$("#image, #play, #play-button, #sharebox").fadeOut('slow');
} else {
//alert('');
}
}
);
};
function sharebox(){
$("#sharebox").show();
}
function youtube (IDyoutube) {
var output1 = '<div id="youtubeblocker"><div id="image" style="background-image: url(http://img.youtube.com/vi/' + IDyoutube + '/0.jpg)"><div id="play"><div id="play-button" onclick="sharebox();"></div></div><div id="sharebox" onclick="youtubeblocker();"></div></div><iframe width="640" height="360" src="http://www.youtube.com/embed/'+IDyoutube+'?autoplay=0" frameborder="0" allowfullscreen></iframe></div>';
document.write (output1);
}
//]]>
</script>
</b:if>
<!-- Condivisione obbligatoria Facebook Fine -->
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = '//connect.facebook.net/it_IT/all.js#xfbml=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Condivisione obbligatoria Facebook Inizio -->
<b:if cond='data:blog.pageType == "item"'>
<script>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId: '',
status: true,
xfbml: true
});
};
function youtubeblocker() {
FB.ui( {
method: '../sharer/sharer.php?u=' +document.URL+ '',
link : document.URL,
},
function(response) {
if (response) {
$("#image, #play, #play-button, #sharebox").fadeOut('slow');
} else {
//alert('');
}
}
);
};
function sharebox(){
$("#sharebox").show();
}
function youtube (IDyoutube) {
var output1 = '<div id="youtubeblocker"><div id="image" style="background-image: url(http://img.youtube.com/vi/' + IDyoutube + '/0.jpg)"><div id="play"><div id="play-button" onclick="sharebox();"></div></div><div id="sharebox" onclick="youtubeblocker();"></div></div><iframe width="640" height="360" src="http://www.youtube.com/embed/'+IDyoutube+'?autoplay=0" frameborder="0" allowfullscreen></iframe></div>';
document.write (output1);
}
//]]>
</script>
</b:if>
<!-- Condivisione obbligatoria Facebook Fine -->
Si salva il modello. La riga di codice evidenziata di giallo è JQuery e può essere tralasciata se fosse già presente nel vostro template. Invece lo script evidenziato di verde è quello necessario per installare i plugin di Facebook e quindi molto probabilmente è già stato inserito nel vostro template e potete evitare di incollarlo nuovamente. Il player che si visualizzerà con questo codice avrà dimensioni 640x360 pixel e potrà essere modificato ricordandosi che non sarà sufficiente cambiare i valori dei parametri colorati di rosso ma che dovranno anche essere ridimensionate le tre immagini presenti nel CSS. È anche possibile modificare il codice del colore del bordo del player.
Quando si vorrà pubblicare un video di Youtube che si presenti ai lettori con queste caratteristiche dovremo trovare il suo ID aprendolo e andando sulla barra del browser
L'ID del video sarà quella stringa alfanumerica dopo v= da copiare dall'URL del video. Quando si vorrà pubblicare un video dovremo andare in Modalità HTML e incollare questa semplice riga
<script>youtube("ID_VIDEO_YOUTUBE");</script>
Fonte | Amor Sevillista -
Nessun commento :
Posta un commento
Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy