Download Now Download Themes Gratis WordPress Responsive!

Tutorial Membuat Share Social di WordPress Tanpa Plugins

Tutorial WordPress kali ini adalah tentang cara membuat Share Social di postingan wordpress tanpa menggunakan plugins, sebelumnya saya pernah membuat postingan tentang Plugins Keren Floating Social Bar WordPress dengan plugin social sharebar, tapi kali ini saya akan memberikan tutorial membuat Share social yang sederhana tanpa menggunakan plugins, tapi jika anda bisa menambahkan css yang keren pada social share ini tentunya juga menjadi social yang keren tanpa plugins.

Untuk membuatnya, buka fungtions.php pada template wordpress yang anda gunakan dan kemudian tambahkan kode dibawah ini.

add_filter( 'the_content', 'ilc_share' );
function ilc_share( $content ) {
	global $post;
	$postlink  = get_permalink($post->ID);
	$posttitle = get_the_title($post->ID);
	$html = '<ul class="share-entry">';
	// Twitter
	$html .= '<li><a class="share-twitter" title="Share on Twitter" rel="external" href="http://twitter.com/share?text='.$posttitle.'&url='.$postlink.'">Share on Twitter</a></li>';
	// Facebook
	$html .= '<li><a class="share-facebook" title="Share on Facebook" rel="external" href="http://www.facebook.com/share.php?u=' . $postlink . '">Share on Facebook</a></li>';
	// LinkedIn
	$html .= '<li><a class="share-linkedin" title="Share on LinkedIn" rel="external" href="http://www.linkedin.com/shareArticle?mini=true&url=' . $postlink . '&title=' . $posttitle . '">Share on LinkedIn</a></li>';
	// Digg
	$html .= '<li><a class="share-digg" title="Share on Digg" rel="external" href="http://digg.com/submit?url=' . $postlink . '">Share on Digg</a></li>';
	// StumbleUpon
	$html .= '<li><a class="share-stumbleupon" title="Share on StumbleUpon" rel="external" href="http://www.stumbleupon.com/submit?url=' . $postlink . '&title=' . $posttitle . '">Share on StumbleUpon</a></li>';
	// Google+
	$html .= '<li><a class="share-googleplus" title="Share on Google+" rel="external" href="https://plusone.google.com/_/+1/confirm?url=' . $postlink . '">Share on Google+</a></li>';
	$html .= '</ul>';
	return $content . $html;
}

Setelah anda tambahkan kode diatas lalu save, dan secara otomatis akan tampil dibawah konten setiap postingan anda. Untuk mempercantik tampilan gunakan nama class-class css dari script diatas di style.css anda. Semoga bermanfaat. 🙂

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Google+.

Daftar isi Tutorial Wordpress Terlengkap Gratis
10 top hosting!

Register Now: TOP 10 Hosting

Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals

Bluehost Hosting

$2.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

iPage Hosting

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

SiteGround Hosting

$3.45/Month Free Domain, Unlimited Space & Bandwidth Get Host

WebHostingPad

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

Hostgator

$3.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

  • riangama

    gan, kodenya tarok di function.php nya dimananya???di paling bawah ato gmna???coz klu di t4 paling bawah, jadi error

  • roy

    Itu yang muncul cm tulisan link aja bro..
    cara edit css-nya biar muncul button-ny gmn?

    • iya gan, emang tutorial ini cuman munculin tulisan aja, kalo mau pakek gambar ya nyesuain gambarnya sesuai keinginan agan. terus buat class css sendiri, lalu bikin css nya sesuain keinginanya tampil gimana.

      • roy

        bisa kasih contoh css yang udah jadi gitu? berikut langkah2 praktisnya..
        soalny masih baru banget make WP. mau pake plugin banyak yg bilang bakal jd berat

        • ni gan ane kasih

          .social-profile-icons { overflow: hidden }
          .social-profile-icons ul li {
              background: none;
              border: none;
              float: left;
              list-style-type: none;
              margin: 0 5px 10px;
              padding: 0;
              text-indent: -999em;
          }
          .social-profile-icons ul li a {
              display: block;
              width: 32px;
              height: 32px;
              -webkit-transition: all 0.25s linear;
              -moz-transition: all 0.25s linear;
              transition: all 0.25s linear;
          }
          .social-profile-icons ul li a:hover { opacity: 0.7 }
          .social-dribbble a { background: url(images/social-dribbble.png) no-repeat }
          .social-email a { background: url(images/social-mail.png) no-repeat }
          .social-facebook a { background: url(images/social-facebook.png) no-repeat }
          .social-gplus a { background: url(images/social-googleplus.png) no-repeat }
          .social-linkedin a { background: url(images/social-linkedin.png) no-repeat }
          .social-pinterest a { background: url(images/social-pinterest.png) no-repeat }
          .social-rss a { background: url(images/social-rss.png) no-repeat }
          .social-stumbleupon a { background: url(images/social-stumbleupon.png) no-repeat }
          .social-twitter a { background: url(images/social-twitter.png) no-repeat }
          .social-youtube a { background: url(images/social-youtube.png) no-repeat }
          .social-flickr a { background: url(images/social-flickr.png) no-repeat }
          .social-lastfm a { background: url(images/social-lastfm.png) no-repeat }
          .social-tumblr a { background: url(images/social-tumblr.png) no-repeat }
          .social-vimeo a { background: url(images/social-vimeo.png) no-repeat }
          

          itu script css nya gan.
          terus ganti semua class di script li sesuai dengan class css masing-masing gambar gan, di script pada artikel ane kasih class di a href tu hapus aja, kasih class di li. sedangkan ul class nya kosongin aja. tambah script pada bari kelima dengan ini

          	$html = '<div class="social-profile-icons">';
          	$html .= '<ul class="">'; 

          lalu di bawah script baris ke 19 tambah script ini

          . $html .= '</div>';
  • roy

    berarti itu script css-ny langsung ditambahi aja ke style.css? nggak perlu diedit?
    yg diedit dan ditambahin script html itu yg script di function.php?
    mending dibikinin artikel baru aja gan…

    • iya di tambahin html itu, sekalian di diganti class sesuai cssnya dan di taruh di li class nya. ane g ksih cssnya, soalnya biar berkreasi sendiri-sendiri gan.

Must Read...!
Trik Membuat CSS3 Image Tooltip di WordPress

Tooltips adalah cara yang bagus untuk menampilkan informasi untuk pengunjung di website Anda dengan...

Cara Edit Htaccess WordPress dengan WP Htaccess Editor

Tutorial Wordpress kali ini membahas tentang bagaimana mengedit htaccess dari admin wordpress anda tanpa...

Close