Membuat Social Share Buttons dengan CSS Javascript

Publish Date : 18-01-2017 , dibaca 7950 kali, Hari ini dibaca : 1 kali ,0 comments

Tutorial kali ini kita akan membuat sendiri Social Share Buttons dengan CSS dan Javascript serta PHP , Tombol Share sangat penting untuk suatu website, dikarenakan sekarang orang sudah mempunyai akun social medianya, nah dengan memberikan fasilat social share button tentu ini akan membuat kemudahan bagi user untuk memagikan artikel kita pada social media. Dengan ini tentu sangat bermafaat bagi website kita

Membuat Tombol Sosial Share pada Website

tombol Share ini menggunakan fungsi pop up yang saat dklik akan muncul jendela pop up , untuk yang ingin mendownload silahkan download disini

CODE HTML :

<!DOCTYPE HTML>
<html>
<head>
    <title>Create Your Own Custom Social Share Count Buttons : suckittrees.Com</title>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta http-equiv="imagetoolbar" content="no" />            
    <link href="site.css" rel="stylesheet" type="text/css" media="all"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body >
    <div align="center">
        <div class="main">
            <div align="left">
                <h1>Get Social Counts Example</h1>
                <p>If you're tired of using the built-in styles of Facebook, Twitter, Google+, and StumbleUpon's like and share buttons, you're not alone. Here's how we implemented them here on suckittrees.com using PHP and jQuery. You may want to be familiar with HTML, CSS, and javascript to complete this tutorial. <a href="http://suckittrees.com/blog/create-your-own-custom-social-share-count-buttons/">Read the full tutorial here&hellip;</a></p>
                <p>
                    <a class="post-share facebook" href="http://www.facebook.com/plugins/like.php?href=http://suckittrees.com/blog/&width&layout=standard&action=like&show_faces=true&share=true&height=80&appId=#################" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=100,width=200');return false;">Facebook<span></span></a>
                    <a class="post-share twitter" href="https://twitter.com/share?url=http://suckittrees.com/blog/&text=Text for Twitter Here&via=suckittrees" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">Twitter<span></span></a>
                    <a class="post-share gplus" href="https://plus.google.com/share?url=http://suckittrees.com/blog/" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">Google Plus<span></span></a>
                    <a class="post-share stumble" href="http://www.stumbleupon.com/submit?url=http://suckittrees.com/blog/" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=800');return false;">Stumbleupon<span></span></a>
                </p>
                <div style="clear:both;"></div>
            </div>
        </div>
    </div>
<script type="text/javascript" src="site.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        get_social_counts();
        //maybe_some_other_functions_too();
    });
</script>
</body>
</html>

CODE CSS (site.css) :

body {
background-color: #eef2f6; font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
}
div.main {
    background: #fcfcfc; border-bottom: 1px solid #eee; width: 534px; padding: 25px 35px 10px 35px; margin-top: 0px;
}
h1 {
    font-size: 36px; font-weight: 200; color: #000; margin: 0 0 20px 0;
}
p {
    font-size: 15px; color: #666; margin:0 0 20px 0; line-height: 1.5;
}
a.post-share {
    display: block;
    width: 94px;
    height: 46px;
    float: left;
    margin: 10px 0px 0px 0px;
    background: #3e599a url(sidebar-share.png) no-repeat 0 0;
    text-decoration:none;
    width: 197px;
    text-indent: 50px;
    font: 15px/46px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    color: #ffffff;
}
a.post-share:hover {
    opacity: 0.8;
    text-decoration: none;
    cursor: pointer;
}
a.post-share span {
    width: 20px;
    height: 16px;
    padding: 15px;
    display: block;
    float:right;
    background-color: #4665af;
    color: #ffffff;
    vertical-align: middle;
    font: 16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    text-align: center;
    text-indent: 0;
}
a.post-share.facebook {
    background: #3e599a url(sidebar-share.png) no-repeat 0 1px;
    margin-right: 10px;
}
a.post-share.facebook span {
    background-color: #4665af;
}
a.post-share.twitter {
    background: #4b8cbe url(sidebar-share.png) no-repeat -0px -111px;
    margin-right: 10px;
}
a.post-share.twitter span {
    background-color: #529fda;
}
a.post-share.gplus {
    background: #b8382e url(sidebar-share.png) no-repeat -0px -50px;
    margin-right: 10px;
}
a.post-share.gplus span {
    background-color: #d24238;
}
a.post-share.stumble {
    background: #e15131 url(sidebar-share.png) no-repeat -0px -165px;
}
a.post-share.stumble span {
    background-color: #fd5d3b;
}

CODE JAVASCRIPT (site.js)

function get_social_counts() {
    var thisUrl = window.location.protocol + "//" + window.location.host + window.location.pathname;
    $.ajax({
        type: "GET",
        url: 'http://suckittrees.com/images/get_social_counts.php?thisurl='+thisUrl,
        dataType: "json",
        success: function (data){
            $('a.post-share.twitter span').html(data.twitter);
            $('a.post-share.facebook span').html(data.facebook);
            $('a.post-share.gplus span').html(data.gplus);
            $('a.post-share.stumble span').html(data.stumble);
        }
    });
}

CODE PHP (get_social_counts.php):

<?php
function get_likes($url) {
     $json_string = file_get_contents('https://api.facebook.com/method/links.getStats?urls=' . $url . '&format=json');
     $json = json_decode($json_string, true);
     if(isset($json[0]['total_count'])){
             return intval( $json[0]['total_count'] );
     } else { return 0;}
}

function get_tweets($url) {
    $json_string = file_get_contents('http://urls.api.twitter.com/1/urls/count.json?url=' . $url);
    $json = json_decode($json_string, true);
     if(isset($json['count'])){
         return intval( $json['count'] );
     } else {return 0;}
}
  
function get_plusones($url) {
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, "https://clients6.google.com/rpc");
    curl_setopt($curl, CURLOPT_POST, 1);
    curl_setopt($curl, CURLOPT_POSTFIELDS, '[{"method":"pos.plusones.get","id":"p","params":{"nolog":true,"id":"' . $url . '","source":"widget","userId":"@viewer","groupId":"@self"},"jsonrpc":"2.0","key":"p","apiVersion":"v1"}]');
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_HTTPHEADER, array('Content-type: application/json'));
    $curl_results = curl_exec ($curl);
    curl_close ($curl);
 
    $json = json_decode($curl_results, true);
     if(isset($json[0]['result']['metadata']['globalCounts']['count'])){
         return intval( $json[0]['result']['metadata']['globalCounts']['count'] );
     } else {return 0;}
}
function get_stumble($url) {
    $json_string = file_get_contents('http://www.stumbleupon.com/services/1.01/badge.getinfo?url='.$url);
    $json = json_decode($json_string, true);
    if (isset($json['result']['views'])) {
        return intval($json['result']['views']);
    } else {return 0;}
}


if(isset($_GET["thisurl"])){
    $thisUrl=$_GET["thisurl"];
    $firstpart = substr("$thisUrl", 0, 20);
    // Change http://suckittrees.com to your own domain!
    if ($firstpart == 'http://suckittrees.com') {
        $data = "{";
        $data .= '"facebook": '. json_encode(get_likes($thisUrl)) . ", ";
        $data .= '"twitter": ' . json_encode(get_tweets($thisUrl)) . ", ";
        $data .= '"gplus": ' . json_encode(get_plusones($thisUrl)) . ", ";
        $data .= '"stumble": ' . json_encode(get_stumble($thisUrl)) . "}";
    } else {
        //throw error
        $data = 'ERROR - you are trying to use this script for something outside of the allowed domain';
    }

} else {
    $data = 'no data yet';
}
        
    header('Content-Type: application/json');
    echo $data;
?>