Php ve Css Sprite ile Paylaş Butonları

İndir Demo

Sosyal Medya ile blogumuzu daha popüler yapabilirsiniz. Bunun için blog içeriğinizin ziyaretçiler tarafından sosyal medyada paylaşılmasını sağlayabilirsiniz.

Şuan da okuduğunuz yazının başında ve sonunda paylaşım butonlarını görebilirsiniz. Sizlere blogumda kullanmış olduğum paylaş butonlarının yapılışını anlatmaya çalışacağım.

Bizim yapacağımız paylaş butonları 4 farklı boyutta olabilecek. Bunun için 4 tane css class tanımlayacağız. Burda önemli nokta bu 4 boyut için tek resim kullanacağız. Bu resmimizi css sprite tekniği ile kullanarak istediğimiz boyuttaki butonu koordinatları vererek göstereceğiz.

Daha önce css sprite tekniği  ile ilgili yazdığım yazıya buradan bakabilirsiniz.

CSS

.social-buyuk, .social-orta, .social-kucuk, .social-cok-kucuk{display: block;list-style-type: none;width: 100%;padding: 0;margin: 0;}
    .social-buyuk li,.social-orta li,.social-kucuk li,.social-cok-kucuk li{display: inline;}
    .social-buyuk strong,.social-orta strong,.social-kucuk strong,.social-cok-kucuk strong{display: none;}
    .social-buyuk a, .social-orta a, .social-kucuk a, .social-cok-kucuk a{ 
         background: url("img/sprite-social.png") no-repeat left top transparent;
         display: inline-block;
         margin: 0 10px 10px 0;
         padding: 0;
         text-decoration: none;
     }

    .social-cok-kucuk a{width: 24px; height: 24px;}
    .social-kucuk a{width: 32px; height: 32px;}
    .social-orta a{width: 48px; height: 48px;}
    .social-buyuk a{width: 64px; height: 64px;}

    .social-cok-kucuk .facebook{background-position: -0px -44px;}
    .social-cok-kucuk .twitter{background-position: -0px -264px;}
    .social-cok-kucuk .friendfeed{background-position: -0px -88px;}
    .social-cok-kucuk .delicious{background-position: -0px 0;}
    .social-cok-kucuk .googlebuzz{background-position: -0px -132px;}
    .social-cok-kucuk .stumbleupon{background-position: -0px -220px;}
    .social-cok-kucuk .rss{background-position: -0px -176px;}

    .social-kucuk .facebook{background-position: -44px -52px;}
    .social-kucuk .twitter{background-position: -44px -312px;}
    .social-kucuk .friendfeed{background-position: -44px -104px;}
    .social-kucuk .delicious{background-position: -44px 0px;}
    .social-kucuk .googlebuzz{background-position: -44px -156px;}
    .social-kucuk .stumbleupon{background-position: -44px -260px;}
    .social-kucuk .rss{background-position: -44px -208px;}

    .social-orta .facebook{background-position: -96px -68px;}
    .social-orta .twitter{background-position: -96px -408px;}
    .social-orta .friendfeed{background-position: -96px -136px;}
    .social-orta .delicious{background-position: -96px -0px;}
    .social-orta .googlebuzz{background-position: -96px -204px;}
    .social-orta .stumbleupon{background-position: -96px -340px;}
    .social-orta .rss{background-position: -96px -272px;}

    .social-buyuk .facebook{background-position: -164px -84px;}
    .social-buyuk .twitter{background-position: -164px -504px;}
    .social-buyuk .friendfeed{background-position: -164px -168px;}
    .social-buyuk .delicious{background-position: -164px -0px;}
    .social-buyuk .googlebuzz{background-position: -164px -252px;}
    .social-buyuk .stumbleupon{background-position: -164px -420px;}
    .social-buyuk .rss{background-position: -164px -336px;}

Css kodumuzda gördüğünüz gibi 4 farklı css class tanımladık. Dikkat ederseniz bu 4 class için aynı arka plan resmi verdik.

.social-buyuk a, .social-orta a, .social-kucuk a, .social-cok-kucuk a
{ 
    background: url("img/sprite-social.png") no-repeat left top transparent;
    display: inline-block;
    margin: 0 10px 10px 0;
    padding: 0;
    text-decoration: none;
}

PHP

Paylaş butonlarını istediğimiz boyutta oluşturan php fonksiyonumuzu yazıyoruz.

if(!function_exists('paylas_butonlari'))
{

    /**
     * Sosyal paylaşım sitelerinin paylaşım butonlarını oluşturur
     *
     * Örnek kullanım
     * echo paylas_butonlari('http://www.serkandaglioglu.com', 'Serkan Dağlıoğlu', 'orta')
     *
     * boyut'un alabileceği değerler ('cok-kucuk', 'kucuk', 'orta', 'buyuk')
     *
     * @param <string> $url
     * @param <string> $title
     * @param <string> $boyut
     * @return <string>
     */
    function paylas_butonlari($url='',$title='',$boyut='orta')
    {

        $siteler = array(
            'facebook' => 'http://www.facebook.com/share.php?u=%url%&amp;title=%title%',
            'twitter'  => 'http://twitthis.com/twit?url=%url%&amp;title=%title%',
            'friendfeed' => 'http://friendfeed.com/?url=%url%&amp;title=%title%',
            'delicious' => 'http://www.delicious.com/save?jump=yes&amp;url=%url%&amp;title=%title%',
            'googlebuzz' => 'http://www.google.com/reader/link?url=%url%&amp;title=%title%',
            'stumbleupon' => 'http://www.stumbleupon.com/submit?url=%url%&amp;title=%title%'
        );

        $url = urlencode($url);
        $title = urlencode($title);
        $class = ( in_array($boyut, array('cok-kucuk','kucuk','orta','buyuk')) ) ? $boyut : 'orta';

        $cikti = '<ul class="social-' . $class . '">';
        foreach($siteler as $index => $value)
        {
            $value = str_replace(array('%url%','%title%'),array($url,$title), $value);
            $link_title = ucfirst($index).' ile paylaş';
            $link = '<a href="'. $value .'" class="'.$index.'" title="'.  $link_title.' "><strong>'.$link_title.'</strong></a>';
            $cikti .= '<li>' . $link . '</li>';
        }
        $cikti .= '</ul>';
  
        return $cikti;
    }
}

Fonksiyon paylaşım yapılan url, paylaşım yapılan sayfanın başlığı ve oluşturulacak butonların boyutu olmak üzere 3 tane parametre almaktadır.

Örnek Kullanım

İndidiğiniz dosyalar içerisinde bulunan social.php ve social.css dosyalarını sayfanıza dahil ediğ istediğiniz yere aşağıdaki kodları eklediğiniz zaman paylaşım butonlarının oluşması için yeterli olacaktır.

<?php echo paylas_butonlari('http://www.serkandaglioglu.com/php-ve-css-sprite-ile-paylas-butonlari', 'Paylaş Butonları', 'kucuk'); ?>

İndir Demo