- Desde
- 20 Ene 2013
- Mensajes
- 3.904
[MENTION=169178]Son Lux[/MENTION] Oye, mira que no me cuentas las reacciones. No aparece los numeritos :neglected::neglected::neglected::neglected:
Saqué el codigo de otra oágina porque quería poner imágenes. Mira, será que está bien el código??
Saqué el codigo de otra oágina porque quería poner imágenes. Mira, será que está bien el código??
HTML:
<!--
*** English ***
Updated File by Torr. http://youtube.com/torr_oficial
Original code: https://gist.github.com/anonymous/7073ea6c601f28aa65e5a077ef875526
You should update:
1- Page Title (:34)
2- Background (:42)
3- Logo (:126)
4- Title (:127)
5- Access Token (:140)
6- Post ID (:141)
*** Español ***
Actualización por Torr. http://youtube.com/torr_oficial
Código fuente original: https://gist.github.com/anonymous/7073ea6c601f28aa65e5a077ef875526
Cosas que deberías actualizar:
1- Título de la página (:34)
2- Fondo (:42)
3- Logo (:126)
4- Título (:127)
5- Token de acceso (:140)
6- Post ID (:141)
-->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>BLA BLA BLA...</title>
<style>
html {
box-sizing: border-box;
width: 100%;
height: 100%;
margin:0;
padding:0;
background: url("FONDO.jpg") no-repeat center fixed; /* YOUR BACKGROUND URL HERE */
-webkit-background-size: cover;
background-size: cover;
}
*, *:before, *:after {
box-sizing: inherit;
}
body{
margin: 0;
font-family: 'Open Sans', sans-serif;
color: #333;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3)
}
header {
text-align: center;
}
header .logo {
position: relative;
margin:100px auto 20px;
width:250px;
}
h1 {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
color: #fff;
font-size: 60px;
font-family: Arial;
}
#wrap{
position: relative;
margin: 0px auto;
width: 1280px;
height: 720px;
}
.tc {
text-align: center;
font-size: 3rem;
font-weight: bold;
}
.wf {
width: 28%;
}
.wf img.illu {
width:80%;
display: block;
margin: 20px auto;
position: relative;
}
.wf img.emoji {
width:34px;
display: inline-block;
}
.wf {
width: 29.3%;
float:left;
margin:30px 2%;
border:solid 1px #eee;
background:#fff;
border-radius: 8px;
position: relative;
text-align: center;
min-height:180px;
}
img.sixOptions{
width:200px;
float:left;
height:auto;
}
h2{
font-size:25px;
}
.footer{
width:100%;
position:relative;
top:500px;
max-height:200px;
}
</style>
</head>
<body>
<header>
<img class="logo" src="logo..png"> <!-- YOUR LOGO URL HERE -->
<h1>BLA BLA BLA...</h1> <!-- YOUR TITLE HERE -->
</header>
<!-- REACTIONS -->
<div class="tc wf likes"><img src="img/FOTO1.png" class="sixOptions"><H2>Mancera</H2><img class="emoji" src="emojis/like.png"><br/><span class="counter"></span></div>
<div class="tc wf happy"><img src="img/FOTO2.png" class="sixOptions"><H2>Chong</H2><img class="emoji" src="emojis/love.png"><br/><span class="counter"></span></div>
<div class="tc wf sad"><img src="img/FOTO3.png" class="sixOptions"><H2>AMLO</H2><img class="emoji" src="emojis/sad.png"><br/><span class="counter"></span></div>
<div class="tc wf fml"><img src="img/FOTO4.png" class="sixOptions"><H2>Margarita</H2><img class="emoji" src="emojis/haha.png"><br/><span class="counter"></span></div>
<div class="tc wf angry"><img src="img/FOTO5.png" class="sixOptions"><H2>Eruviel Avila</H2><img class="emoji" src="emojis/angry.png"><br/><span class="counter"></span></div>
<div class="tc wf shock"><img src="img/FOTO6.png" class="sixOptions"><H2>Anaya</H2><img class="emoji" src="emojis/shock.png"><br/><span class="counter"></span></div>
<script src="jquery.min.js"></script>
<script src="lodash.min.js"></script>
<script>
"use strict";
var access_token = '8948217Q0bf1b5305c7d7bbb76db28d8'; // Get it on Step 12 on https://smashballoon.com/custom-facebook-feed/access-token/
// PASTE HERE YOUR FACEBOOK ACCESS TOKEN
var postID = '1825646540989740'; // PASTE HERE YOUR POST ID
var refreshTime = 5; // Refresh time in seconds
var defaultCount = 0; // Default count to start with
var reactions = ['LIKE', 'LOVE', 'WOW', 'HAHA', 'SAD', 'ANGRY'].map(function (e) {
var code = 'reactions_' + e.toLowerCase();
return 'reactions.type(' + e + ').limit(0).summary(total_count).as(' + code + ')'
}).join(',');
var v1 = $('.likes .counter'),
v2 = $('.happy .counter'),
v3 = $('.sad .counter'),
v4 = $('.fml .counter'),
v5 = $('.angry .counter'),
v6 = $('.shock .counter');
function refreshCounts() {
var url = 'https://graph.facebook.com/v2.8/?ids=' + postID + '&fields=' + reactions + '&access_token=' + access_token;
$.getJSON(url, function(res){
v1.text(defaultCount + res[postID].reactions_like.summary.total_count);
v2.text(defaultCount + res[postID].reactions_love.summary.total_count);
v3.text(defaultCount + res[postID].reactions_sad.summary.total_count);
v4.text(defaultCount + res[postID].reactions_haha.summary.total_count);
v5.text(defaultCount + res[postID].reactions_angry.summary.total_count);
v6.text(defaultCount + res[postID].reactions_wow.summary.total_count);
});
}
$(document).ready(function(){
setInterval(refreshCounts, refreshTime * 1000);
refreshCounts();
});
</script>
</body>
</html>
