I have some buttons created with the help of @Luis Daniel Rovira Contreras
, @delCano
, @azeós
, but I'm still looking for documentation on how to create the necessary code so that the visitor to my website can share it with theirs. I checked the facebook developers documentation without much success, I don't know if I have to create one API
for facebook as for the applications. A few days ago I checked a site where it detailed how to make the code for each of the social networks, but I didn't save it and I lost it. What I have is taken from social_media_buttons on github , which is for sharing specific articles and I don't know if I have to add all the<meta..../>
for each of the networks. Where could I find documentation to help me achieve this? Thanks, I leave my example.
$(window).on('load', function () {
$(".loader-page").css({ visibility: "hidden", opacity: "0" }) ;
});
//script externo ///////////////////////////////////////////////////*/
/*
Created by Alejandro Palacios https://github.com/AlexSoicalap
*/
$(function() {
/*Define some constants */
const ARTICLE_TITLE = document.title;
const ARTICLE_URL = encodeURIComponent(window.location.href);
const MAIN_IMAGE_URL = encodeURIComponent($('meta[property="og:image"]').attr('content'));
$('.share-fb').click(function(){
open_window('http://www.facebook.com/sharer/sharer.php?u='+ARTICLE_URL, 'facebook_share');
});
$('.share-twitter').click(function(){
open_window('http://twitter.com/share?url='+ARTICLE_URL, 'twitter_share');
});
$('.share-google-plus').click(function(){
open_window('https://plus.google.com/share?url='+ARTICLE_URL, 'google_share');
});
$('.share-linkedin').click(function(){
open_window('https://www.linkedin.com/shareArticle?mini=true&url='+ARTICLE_URL+'&title='+ARTICLE_TITLE+'&summary=&source=', 'linkedin_share');
});
$('.share-pinterest').click(function(){
open_window('https://pinterest.com/pin/create/button/?url='+ARTICLE_URL+'&media='+MAIN_IMAGE_URL+'&description='+ARTICLE_TITLE, 'pinterest_share');
});
$('.share-tumblr').click(function(){
open_window('http://www.tumblr.com/share/link?url='+ARTICLE_URL+'&name='+ARTICLE_TITLE+'&description='+ARTICLE_TITLE, 'tumblr_share');
});
function open_window(url, name){
window.open(url, name, 'height=320, width=640, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no');
}
});
.loader-page {
position: fixed;
z-index: 25000;
background: rgb(255, 255, 255);
left: 0px;
top: 0px;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: all .3s ease;
}
.loader-page::before {
content: "";
position: absolute;
border: 2px solid rgb(50, 150, 176);
width: 60px;
height: 60px;
border-radius: 50%;
box-sizing: border-box;
border-left: 2px solid rgba(50, 150, 176, 0);
border-top: 2px solid rgba(50, 150, 176, 0);
animation: rotarload 1s linear infinite;
transform: rotate(0deg);
}
@keyframes rotarload {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
.loader-page::after {
content: "";
position: absolute;
border: 2px solid rgba(50, 150, 176, .5);
width: 60px;
height: 60px;
border-radius: 50%;
box-sizing: border-box;
border-left: 2px solid rgba(50, 150, 176, 0);
border-top: 2px solid rgba(50, 150, 176, 0);
animation: rotarload 1s ease-out infinite;
transform: rotate(0deg);
}
/*estilos externos
////////////////////////////////////////////////////*/
/*
Created by Alejandro Palacios https://github.com/AlexSoicalap
*/
.share-buttons-row{
height: 40px;
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
}
.share-buttons-row >div:hover {
transform: rotate(360deg) scale(2);
border-radius: 100px;
}
.share-buttons-row > div {
transition: all .3s ease-in-out;
width: 50px;
height: 50px;
cursor: pointer;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
text-align: center;
float: left;
margin-right: .3em;
padding: 0;
background-repeat: no-repeat;
background-position: center;
background-size: 30px 30px;
}
/*share row buttons
.share-buttons-row{
height: 40px;
display: -webkit-flex; /* Safari */
/*-webkit-align-items: center; /* Safari 7.0+ */
/* display: flex;
align-items: center;
}
.share-buttons-row >div:hover {
transform: rotate(360deg);
border-radius: 100px;
}
.share-buttons-row > div {
width: 40px;
height: 40px;
cursor: pointer;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
text-align: center;
float: left;
margin-right: .3em;
padding: 0;
background-repeat: no-repeat;
background-position: center;
background-size: 20px 20px;
}
*/
.share-fb{
background-color: #2d609b;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTI2LjY2NyAwaC0yMS4zMzRjLTIuOTQ1IDAtNS4zMzMgMi4zODgtNS4zMzMgNS4zMzR2MjEuMzMyYzAgMi45NDYgMi4zODcgNS4zMzQgNS4zMzMgNS4zMzRoMTAuNjY3di0xNGgtNHYtNGg0di0zYzAtMi43NjEgMi4yMzktNSA1LTVoNXY0aC01Yy0wLjU1MiAwLTEgMC40NDgtMSAxdjNoNS41bC0xIDRoLTQuNXYxNGg2LjY2N2MyLjk0NSAwIDUuMzMzLTIuMzg4IDUuMzMzLTUuMzM0di0yMS4zMzJjMC0yLjk0Ni0yLjM4Ny01LjMzNC01LjMzMy01LjMzNHoiPjwvcGF0aD48L3N2Zz4=);
}
.share-twitter{
background-color: #00c3f3;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTMyIDYuMDc2Yy0xLjE3NyAwLjUyMi0yLjQ0MyAwLjg3NS0zLjc3MSAxLjAzNCAxLjM1NS0wLjgxMyAyLjM5Ni0yLjA5OSAyLjg4Ny0zLjYzMi0xLjI2OSAwLjc1Mi0yLjY3NCAxLjI5OS00LjE2OSAxLjU5My0xLjE5OC0xLjI3Ni0yLjkwNC0yLjA3My00Ljc5Mi0yLjA3My0zLjYyNiAwLTYuNTY1IDIuOTM5LTYuNTY1IDYuNTY1IDAgMC41MTUgMC4wNTggMS4wMTYgMC4xNyAxLjQ5Ni01LjQ1Ni0wLjI3NC0xMC4yOTQtMi44ODgtMTMuNTMyLTYuODYtMC41NjUgMC45Ny0wLjg4OSAyLjA5Ny0wLjg4OSAzLjMwMSAwIDIuMjc4IDEuMTU5IDQuMjg3IDIuOTIxIDUuNDY1LTEuMDc2LTAuMDM0LTIuMDg4LTAuMzI5LTIuOTc0LTAuODIxLTAuMDAxIDAuMDI3LTAuMDAxIDAuMDU1LTAuMDAxIDAuMDgzIDAgMy4xODEgMi4yNjMgNS44MzQgNS4yNjYgNi40MzctMC41NTEgMC4xNS0xLjEzMSAwLjIzLTEuNzMgMC4yMy0wLjQyMyAwLTAuODM0LTAuMDQxLTEuMjM1LTAuMTE4IDAuODM1IDIuNjA4IDMuMjYgNC41MDYgNi4xMzMgNC41NTktMi4yNDcgMS43NjEtNS4wNzggMi44MS04LjE1NCAyLjgxLTAuNTMgMC0xLjA1Mi0wLjAzMS0xLjU2Ni0wLjA5MiAyLjkwNSAxLjg2MyA2LjM1NiAyLjk1IDEwLjA2NCAyLjk1IDEyLjA3NiAwIDE4LjY3OS0xMC4wMDQgMTguNjc5LTE4LjY4IDAtMC4yODUtMC4wMDYtMC41NjgtMC4wMTktMC44NDkgMS4yODMtMC45MjYgMi4zOTYtMi4wODIgMy4yNzYtMy4zOTh6Ij48L3BhdGg+PC9zdmc+);
}
.share-google-plus{
background-color: #eb4026;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE3LjQ3MSAyYzAgMC02LjI4IDAtOC4zNzMgMC0zLjc1NCAwLTcuMjg3IDIuODQ0LTcuMjg3IDYuMTM4IDAgMy4zNjYgMi41NTkgNi4wODMgNi4zNzggNi4wODMgMC4yNjYgMCAwLjUyNC0wLjAwNSAwLjc3Ni0wLjAyNC0wLjI0OCAwLjQ3NS0wLjQyNSAxLjAwOS0wLjQyNSAxLjU2NCAwIDAuOTM2IDAuNTAzIDEuNjk0IDEuMTQgMi4zMTMtMC40ODEgMC0wLjk0NSAwLjAxNC0xLjQ1MiAwLjAxNC00LjY0OS0wLTguMjI4IDIuOTYxLTguMjI4IDYuMDMyIDAgMy4wMjQgMy45MjMgNC45MTYgOC41NzMgNC45MTYgNS4zMDEgMCA4LjIyOC0zLjAwOCA4LjIyOC02LjAzMiAwLTIuNDI1LTAuNzE1LTMuODc3LTIuOTI4LTUuNDQyLTAuNzU3LTAuNTM2LTIuMjA0LTEuODM5LTIuMjA0LTIuNjA0IDAtMC44OTcgMC4yNTYtMS4zNCAxLjYwNy0yLjM5NSAxLjM4NS0xLjA4MiAyLjM2NS0yLjYwMyAyLjM2NS00LjM3MiAwLTIuMTA2LTAuOTM4LTQuMTU5LTIuNjk5LTQuODM3aDIuNjU1bDEuODc0LTEuMzU1ek0xNC41NDYgMjIuNDgzYzAuMDY2IDAuMjggMC4xMDMgMC41NjkgMC4xMDMgMC44NjMgMCAyLjQ0NC0xLjU3NSA0LjM1My02LjA5MyA0LjM1My0zLjIxNCAwLTUuNTM1LTIuMDM1LTUuNTM1LTQuNDc4IDAtMi4zOTUgMi44NzktNC4zODkgNi4wOTMtNC4zNTQgMC43NSAwLjAwOCAxLjQ0OSAwLjEyOSAyLjA4MyAwLjMzNCAxLjc0NSAxLjIxMyAyLjk5NiAxLjg5OSAzLjM0OSAzLjI4MXpNOS40MDEgMTMuMzY4Yy0yLjE1Ny0wLjA2NS00LjIwNy0yLjQxMy00LjU4LTUuMjQ2czEuMDc0LTUuMDAxIDMuMjMxLTQuOTM3YzIuMTU3IDAuMDY1IDQuMjA3IDIuMzM4IDQuNTggNS4xNzFzLTEuMDc1IDUuMDc3LTMuMjMxIDUuMDEyek0yNiA4di02aC0ydjZoLTZ2Mmg2djZoMnYtNmg2di0yeiI+PC9wYXRoPjwvc3ZnPg==);
}
.share-linkedin{
background-color: #0074a1;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTI2LjYyNSAwaC0yMS4yNWMtMi45NTYgMC01LjM3NSAyLjQxOS01LjM3NSA1LjM3NXYyMS4yNWMwIDIuOTU2IDIuNDE5IDUuMzc1IDUuMzc1IDUuMzc1aDIxLjI1YzIuOTU2IDAgNS4zNzUtMi40MTkgNS4zNzUtNS4zNzV2LTIxLjI1YzAtMi45NTYtMi40MTktNS4zNzUtNS4zNzUtNS4zNzV6TTEyIDI2aC00di0xNGg0djE0ek0xMCAxMGMtMS4xMDUgMC0yLTAuODk1LTItMnMwLjg5NS0yIDItMiAyIDAuODk1IDIgMi0wLjg5NSAyLTIgMnpNMjYgMjZoLTR2LThjMC0xLjEwNS0wLjg5NS0yLTItMnMtMiAwLjg5NS0yIDJ2OGgtNHYtMTRoNHYyLjQ4M2MwLjgyNS0xLjEzMyAyLjA4Ni0yLjQ4MyAzLjUtMi40ODMgMi40ODUgMCA0LjUgMi4yMzkgNC41IDV2OXoiPjwvcGF0aD48L3N2Zz4=);
}
.share-pinterest{
background-color: #ca212a;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE2IDBjLTguODM3IDAtMTYgNy4xNjMtMTYgMTYgMCA2Ljc3OCA0LjIxNyAxMi41NjggMTAuMTY5IDE0Ljg5OS0wLjE0LTEuMjY2LTAuMjY2LTMuMjA4IDAuMDU1LTQuNTkgMC4yOTEtMS4yNDkgMS44NzYtNy45NTMgMS44NzYtNy45NTNzLTAuNDc5LTAuOTU4LTAuNDc5LTIuMzc1YzAtMi4yMjUgMS4yOS0zLjg4NiAyLjg5NS0zLjg4NiAxLjM2NSAwIDIuMDI0IDEuMDI1IDIuMDI0IDIuMjU0IDAgMS4zNzMtMC44NzQgMy40MjUtMS4zMjUgNS4zMjctMC4zNzcgMS41OTMgMC43OTkgMi44OTIgMi4zNjkgMi44OTIgMi44NDQgMCA1LjAzMC0yLjk5OSA1LjAzMC03LjMyNyAwLTMuODMxLTIuNzUzLTYuNTA5LTYuNjgzLTYuNTA5LTQuNTUyIDAtNy4yMjUgMy40MTUtNy4yMjUgNi45NDMgMCAxLjM3NSAwLjUzIDIuODUgMS4xOTEgMy42NTEgMC4xMzEgMC4xNTggMC4xNSAwLjI5NyAwLjExMSAwLjQ1OS0wLjEyMSAwLjUwNi0wLjM5MSAxLjU5My0wLjQ0NCAxLjgxNS0wLjA3MCAwLjI5My0wLjIzMiAwLjM1NS0wLjUzNSAwLjIxNC0xLjk5OC0wLjkzLTMuMjQ4LTMuODUyLTMuMjQ4LTYuMTk4IDAtNS4wNDcgMy42NjctOS42ODIgMTAuNTcyLTkuNjgyIDUuNTUgMCA5Ljg2NCAzLjk1NSA5Ljg2NCA5LjI0MSAwIDUuNTE0LTMuNDc3IDkuOTUyLTguMzAyIDkuOTUyLTEuNjIxIDAtMy4xNDUtMC44NDItMy42NjctMS44MzcgMCAwLTAuODAyIDMuMDU1LTAuOTk3IDMuODAzLTAuMzYxIDEuMzktMS4zMzcgMy4xMzItMS45ODkgNC4xOTUgMS40OTcgMC40NjMgMy4wODggMC43MTMgNC43MzggMC43MTMgOC44MzYtMCAxNi03LjE2MyAxNi0xNnMtNy4xNjMtMTYtMTYtMTZ6Ij48L3BhdGg+PC9zdmc+);
}
.share-tumblr{
background-color: #36465d;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTI2LjY2OCAwaC0yMS4zMzRjLTIuOTM0IDAtNS4zMzQgMi40LTUuMzM0IDUuMzM0djIxLjMzMmMwIDIuOTM2IDIuNCA1LjMzNCA1LjMzNCA1LjMzNGgyMS4zMzRjMi45MzMgMCA1LjMzMi0yLjM5OCA1LjMzMi01LjMzNHYtMjEuMzMyYy0wLTIuOTMzLTIuMzk5LTUuMzM0LTUuMzMyLTUuMzM0ek0yMi44NjYgMjUuNzcxYy0wLjk0MiAwLjQ0My0xLjc5OCAwLjc1Ni0yLjU2MyAwLjkzNi0wLjc2NSAwLjE3OC0xLjU5MyAwLjI2Ny0yLjQ4MSAwLjI2Ny0xLjAxMCAwLTEuNjA1LTAuMTI3LTIuMzgxLTAuMzgxLTAuNzc1LTAuMjU2LTEuNDM4LTAuNjIxLTEuOTg0LTEuMDkwLTAuNTQ5LTAuNDczLTAuOTI4LTAuOTc1LTEuMTQtMS41MDZzLTAuMzE3LTEuMzAzLTAuMzE3LTIuMzEzdi03Ljc0NGgtM3YtMy4xMjdjMC44NjctMC4yODEgMS44NzMtMC42ODUgMi40OS0xLjIxMSAwLjYyLTAuNTI3IDEuMTE2LTEuMTU4IDEuNDktMS44OTYgMC4zNzUtMC43MzYgMC42MzMtMS42NzYgMC43NzQtMi44MTVoMy4xNDF2NS4xMDhoNS4xMDV2My45NDFoLTUuMTA2djUuNjYyYzAgMS4yODEtMC4wMTcgMi4wMjAgMC4xMTkgMi4zODMgMC4xMzUgMC4zNjEgMC40NzMgMC43MzYgMC44NDEgMC45NTMgMC40ODkgMC4yOTMgMS4wNDcgMC40MzkgMS42NzYgMC40MzkgMS4xMTggMCAyLjIzMS0wLjM2MyAzLjMzNi0xLjA5MHYzLjQ4MnoiPjwvcGF0aD48L3N2Zz4=);
}
<!doctype html>
<!--
Created by Alejandro Palacios https://github.com/AlexSoicalap
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>[ARTICLE_TITLE]</title>
<link rel="stylesheet" href="./css/style.css">
<!-- Some Open Graph tags -->
<meta name="description" content="[ARTICLE_DESCRIPTION]">
<meta name="author" content="[AUTHOR_NAME_OF_THE_ARTICLE]">
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="[ARTICLE_TITLE]" />
<meta property="og:description" content="[ARTICLE_DESCRIPTION]" />
<meta property="og:url" content="[ARTICLE_URL]" />
<meta property="og:site_name" content="[WEBSITE_NAME]" />
<meta property="article:publisher" content="[https://www.facebook.com/USERNAME]" />
<meta property="article:published_time" content="[PUBLISHED_TIME_OF_YOUR_ARTICLE Ex: 2015-12-08T20:50:00Z]" />
<meta property="og:image" content="[MAIN_IMAGE_URL]" />
<meta name="twitter:title" content="[ARTICLE_TITLE]" />
<meta name="twitter:description" content="[ARTICLE_DESCRIPTION]" />
<meta name="twitter:image" content="[MAIN_IMAGE_URL]" />
<meta name="twitter:site" content="@[TWITTER_USERNAME]" />
<meta name="twitter:creator" content="@[TWITTER_USERNAME]" />
<meta name="twitter:via" content="[TWITTER_USERNAME]" />
<meta name="twitter:card" content="photo" />
<meta name="twitter:url" content="[ARTICLE_URL]" />
<!--
<meta name="twitter:image:width" content="550"/>
<meta name="twitter:image:height" content="750"/>
-->
</head>
<body>
<div class="loader-page"></div>
<!-- Buttons, Copy this to your Page Article -->
<div class="share-buttons-row">
<!--Facebook's Button -->
<div class="share-fb"></div>
<!--Twitter's Button -->
<div class="share-twitter"></div>
<!--Facebook's Button -->
<div class="share-google-plus"></div>
<!--Linkedin's Button -->
<div class="share-linkedin"></div>
<!--Pinterest's Button -->
<div class="share-pinterest"></div>
<!--Tumblr's Button -->
<div class="share-tumblr"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="./js/functions.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
In order for people to share your site, you must use the sharing links of each social network:
Where
{URL}
is the url you want to share.If you want your buttons to have counters then you will need to use the SDK of each social network. In this pen you can see how to do it (credits to its author).