Custom Design Jumlah Social Media Sharing

 Author : hadinug, 03 November, 2014, Komentar

social sharing design


Pada postingan sebelumnya kami telah menuliskan bagaimana cara menghitung jumlah sosial media sharing website dengan url dan menampilkan nya dalam bentuk array. Berbeda dengan tutorial kali ini, kita akan mencoba menampilkan jumlah sosial media sharing sebelum nya dalam bentuk yang lebih menarik dan interaktive.


Bagaimana cara memulai?

Sebelum nya kami harap anda telah membaca, mempelajari dan mencoba tutorial sebelumnya disini, dari tutorial tadi, hasilnya akan kita coba tampilkan data kedalam bentuk yang lebih menarik dan interaktive.



Langkah-1 [PHP] helper

Funtcion php untuk menghitung jumlah sosial sharing


if (!function_exists('ca_gplush_shares')) {

    function ca_gplus_shares($url) {
        // G+ DATA
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, "https://clients6.google.com/rpc?key=AIzaSyCKSbrvQasunBoV16zDH9R33D88CeLr9gQ");
        curl_setopt($ch, CURLOPT_POST, 1);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($ch, 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($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-type: application/json'));
        $result = curl_exec($ch);
        curl_close($ch);
        return json_decode($result, true);
    }

}

if (!function_exists('ca_social_count')) {

    function ca_social_count($url = null) {
        if ($url != null && is_url($url)) {
            $finfo = json_decode(file_get_contents('http://api.ak.facebook.com/restserver.php?v=1.0&method=links.getStats&urls=' . $url . '&format=json'));
            $tinfo = json_decode(file_get_contents('http://urls.api.twitter.com/1/urls/count.json?url=' . $url));
            $dinfo = json_decode(file_get_contents('http://feeds.delicious.com/v2/json/urlinfo/data?url=' . $url));
            $linfo = json_decode(file_get_contents('http://www.linkedin.com/countserv/count/share?url=' . $url . '&format=json'));
            $pinfo = json_decode(preg_replace('/^receiveCount((.*))$/', "1", file_get_contents('http://api.pinterest.com/v1/urls/count.json?callback=receiveCount&url=' . $url)));
            $gplus = ca_gplus_shares($url);

            $output = array(
                'facebook' => isset($finfo[0]) ? $finfo[0]->total_count : NULL,
                'twitter' => isset($tinfo->count) ? $tinfo->count : NULL,
                'delicious' => isset($dinfo[0]) ? $dinfo[0]->total_posts : NULL,
                'linkedin' => isset($linfo) ? $linfo->count : NULL,
                'pinterest' => isset($pinfo->count) ? $pinfo->count : NULL,
                'googlePlus' => isset($gplus[0]['result']) ? $gplus[0]['result']['metadata']['globalCounts']['count'] : NULL
            );

            return $output;
        }
    }
}


Langka-2 [HTML] & PHP

Tambahkan kode html berikut:


<?php
        include 'helper.php';
        $url = "http://www.hadinug.net/labs/socialshare/design.php";
        $sosmed = ca_social_count($url);
        ?>
<div class="social-count">
    <div class="sos-share-box sos-fb" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(location.href), 'facebookShare');
            return false;">
        <div class="sos-name">facebook</div>
        <div class="sos-count"><?php echo $sosmed["facebook"] ?></div>
    </div>
    <div class="sos-share-box sos-tw" onclick="window.open('https://twitter.com/share?text=' + encodeURIComponent('Custom design jumlah social media sharing ') + '&amp;url=' + encodeURIComponent(location.href) + '&amp;via=hadinug1', 'twitterShare');
            return false;">
        <div class="sos-name">twitter</div>
        <div class="sos-count"><?php echo $sosmed["twitter"] ?></div>
    </div>
    <div class="sos-share-box sos-go" onclick="window.open('https://plus.google.com/share?url=' + encodeURIComponent(location.href), 'google+Share')">
        <div class="sos-name">google+</div>
        <div class="sos-count"><?php echo $sosmed["googlePlus"] ?></div>
    </div>
    <div class="sos-share-box sos-ln" onclick="window.open('https://www.linkedin.com/cws/share?url=' + encodeURIComponent(location.href), 'linkedinShare');
            return false;">
        <div class="sos-name">linkedin</div>
        <div class="sos-count"><?php echo $sosmed["linkedin"] ?></div>
    </div>
</div>  



Langkah-3 [CSS]

Berikut kode css untuk menampilkan jumlah sosial sharing website, agar terlihat lebih menarik.

/*social share*/ 
    body{
        font: 12px/24px arial;
    }
    .social-count .sos-share-box{
        float: left;
        width: 75px;
        margin: 5px 5px 10px 0; 
        cursor: pointer;
        background: #f7f7f7;
        line-height: 15px;
    }
    .sos-share-box .sos-name{
        font-size: 10px;
        font-weight: bold;
        padding: 5px;
        text-align: center;    
        border: 1px solid #f7f7f7;
    }
    .sos-share-box .sos-count{
        font-size: 10px; 
        padding: 5px;
        text-align: center;
        color: #fff;
    }
    .sos-share-box.sos-fb{
        color: #3B5998;
    }
    .sos-share-box.sos-tw{
        color: #2DAAE1;
    }
    .sos-share-box.sos-fb .sos-count{
        background: #3B5998;
        border: 1px solid #3B5998;
    }
    .sos-share-box.sos-tw .sos-count{
        background: #2DAAE1;
        border: 1px solid #2DAAE1;
    }

    .sos-share-box.sos-go{
        color: #F63E28;
    }
    .sos-share-box.sos-go .sos-count{
        background: #F63E28;
        border: 1px solid #F63E28;
    }

    .sos-share-box.sos-ln{
        color: #0073B2;
    }
    .sos-share-box.sos-ln .sos-count{
        background: #0073B2;
        border: 1px solid #0073B2;
    }


Semoga bermanfaat!!
 
Bagikan halaman ke sosial media
 
Tags :   social    sharing       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda