contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Membuat Social Share Buttons dengan CSS Javascript

Posted in HTML & CSS Life at 18 Januari 2017 With 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

▼ Download Source Code Dibawah Ini ▼


membuat social share button css javascript

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;
?>

Artikel Rekomendasi



Artikel Terkait

Diskusi