Social web count

Developer
Paul
Size
3,204 Kb
Views
22,264
  1. Social web count Previews
  2. Social web count HTML Codes
  3. Social web count CSS Codes
  4. Social web count JS Codes

How do I make an social web count?

Enter the page and see its activity on social networks, added VKontakte!. What is a social web count? How do you make a social web count? This script and codes were developed by Paul on 25 September 2022, Sunday.

Social web count Previews
IQ Test

Social web count - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Social web count </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper">
<div class="check"> <input type="url" id="int" value="http://"/> <input type="submit" id="my" value="send"/>
</div>
<div class="share"> <a href="{url}" class="btnTw" title="Twitter"><span class="twCount">0</span></a> <a href="{url}" class="btnFb" title="Facebook"><span class="fbCount">0</span></a> <a href="{url}" class="btnPr" title="Pinterest"><span class="prCount">0</span></a> <a href="{url}" class="btnLi" title="LinkedIn"><span class="liCount">0</span></a> <a href="{url}" class="btnDl" title="Delicious"><span class="dlCount">0</span></a> <a href="{url}" class="btnBu" title="BufferApp"><span class="buCount">0</span></a> <a href="{url}" class="btnVk" title="Vk"><span class="vkCount">0</span></a>
</div> </div>
<!-- How to create {url} - https://goo.gl/p1654s --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Social web count - Script Codes CSS Codes

*{ margin:0; padding: 0; border: none;
}
body{ font-family: sans-serif; font-size: 11px; background: #2E2B33;
}
.wrapper{ margin: 0 auto; width: 700px; height: 300px;
}
.share{ width: 100%; text-align: center;
}
.check{ text-align: center; width: 100%;
}
.check > #int{ width: 80%; height: 30px; border-radius: 2px 0 0 2px;
}
.check > #my{ width: 20%; height: 30px; background-color: #f7adad; margin-left: -5px; margin-top: 30%; cursor: pointer; text-transform: uppercase; font-weight: bold; border-radius: 0px 2px 2px 0px;
}
.share a span{ font-weight: bold; display: block; color: white; text-align: right; min-width: 24px;
}
.share a{ width:10.88%; text-decoration: none; padding: 20px 4px 0px 0px; line-height: 20px; display: inline-block; border-radius: 2px; margin: 20px 10px; background-size: 38px; background-repeat: no-repeat;
}
.share a:first-child{ margin: 20px 10px 0 0;
}
.share a:last-child{ margin: 20px 0 0 10px;
}
/*icon credits: iconfinder.com*/
.btnTw{ background-color: #2DAAE1; background-image: url('https://cdn1.iconfinder.com/data/icons/somacro___dpi_social_media_icons_by_vervex-dfjq/128/twitter.png');
}
.btnFb{ background-color: #3B5998; background-image:url('https://cdn1.iconfinder.com/data/icons/metro-ui-dock/128/Facebook_alt_1.png');
}
.btnPr{ background-color: #CA2128; background-image:url('https://cdn1.iconfinder.com/data/icons/wbits-pinterest/64/pinterest-icon-square-red.png');
}
.btnLi{ background-color: #1783BC; background-image:url('https://cdn1.iconfinder.com/data/icons/social-icon-pack-by-citni/48/Linkedin.png');
}
.btnDl{ background-color: #2873CC; background-image:url('https://cdn1.iconfinder.com/data/icons/freebie%3A-social-media-icons/64/delicious.png');
}
.btnBu{ background-color: #f4f4f4; background-image:url('http://bufferapp.com/images/press/logo-icon.png'); background-size: 28px !important; background-position: 2px center
}
.btnVk{ background-color: #E2ECF5; background-image: url('https://cdn1.iconfinder.com/data/icons/perqui/48/vk.png'); background-size: 41px !important;
}
.share a span.buCount, .share a span.vkCount{ color: black;
}

Social web count - Script Codes JS Codes

var VK, countUp, setCount, url;
document.getElementById('my').onclick = function() { url = $("#int").val();
$.getJSON("https://urls.api.twitter.com/1/urls/count.json?url=" + url + "&callback=?", function(json) { return setCount($(".twCount"), json.count);
});
$.getJSON("https://graph.facebook.com/" + url, function(json) { return setCount($(".fbCount"), json.shares);
});
$.getJSON("https://api.pinterest.com/v1/urls/count.json?url=" + url + "&callback=?", function(json) { return setCount($(".prCount"), json.count);
});
$.getJSON("https://www.linkedin.com/countserv/count/share?url=" + url + "&callback=?", function(json) { return setCount($(".liCount"), json.count);
});
$.getJSON("http://feeds.delicious.com/v2/json/urlinfo/data?url=" + url + "&callback=?", function(json) { return setCount($(".dlCount"), json[0].total_posts);
});
$.getJSON("https://api.bufferapp.com/1/links/shares.json?url=" + url + "&callback=?", function(json) { return setCount($(".buCount"), json.shares);
});
VK = {};
VK.Share = {};
$.getJSON("https://vk.com/share.php?act=count&index=1&url=" + url + "&format=json&callback=?", VK.Share.count = function (index, json) { return setCount ($('.vkCount'), json);
});
countUp = function($item) { return setTimeout(function() { var current, newCount, target; current = $item.attr("data-current-count") * 1; target = $item.attr("data-target-count") * 1; newCount = current + Math.ceil((target - current) / 2); $item.attr("data-current-count", newCount); $item.html(newCount); if (newCount < target) { return countUp($item); } }, 100);
};
setCount = function($item, count) { if (count == null) { count = null; } $item.attr("data-target-count", count); $item.attr("data-current-count", 0); return countUp($item);
};
};
Social web count - Script Codes
Social web count - Script Codes
Home Page Home
Developer Paul
Username Maseone
Uploaded September 25, 2022
Rating 3
Size 3,204 Kb
Views 22,264
Do you need developer help for Social web count?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Paul (Maseone) Script Codes
Name
Motion preloader 2015
CSS Preloader 2015
Lego Preloader
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!