Xceria Blogger Indonesia
Showing posts with label share button. Show all posts
Showing posts with label share button. Show all posts

Cara Pasang Digg This Button
Digg This Button
Cara mudah memasang digg this button. Melanjutkan posting sebelumnya mengenai digg, kali ini saya akan menuliskan tutorial bagaimana cara memasang Digg This Button di website Anda.

Seperti yang sudah saya jelaskan di posting sebelumnya, digg mempunyai tool di mana pengunjung bisa langsung men-submit artikel Anda di digg. Tool ini yang disebut Digg This Button.

Lalu bagaimana cara memasang digg this button di website Anda? Sebenarnya caranya sama seperti cara memasang share on facebook button yang sudah pernah saya tulis sebelumnya. Langsung saja lihat scriptnya di bawah ini.

Ada 4 pilihan yang bisa Anda gunakan.
  • Tidak memakai count (hanya link, tanpa jumlah submit).

    <a expr:href='"http://digg.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Submit this post on digg'>Digg this</a>

  • Tidak memakai count (dalam bentuk icon).



    <script type='text/javascript'>
    digg_url = '<data:post.url/>';
    digg_title = '<data:post.title/>';
    digg_skin = 'icon';
    digg_window = 'new';
    </script>
    <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>

  • Dengan count (dalam bentuk kecil).



    <script type='text/javascript'>
    digg_url = '<data:post.url/>';
    digg_title = '<data:post.title/>';
    digg_skin = 'compact';
    digg_window = 'new';
    </script>
    <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>

  • Dengan count (dalam bentuk besar).



    <script type='text/javascript'>
    digg_url = '<data:post.url/>';
    digg_title = '<data:post.title/>';
    digg_skin = 'large';
    digg_window = 'new';
    </script>
    <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>

Bagi pengguna blogger, lihat tutorial pemasangannya di bawah ini.
  1. Copy salah satu script di atas.
  2. Setelah itu, masuk ke akun blogger Anda.
  3. Pilih menu Tata Letak (Layout) » Edit HTML
  4. Klik tulisan "expand template widget", kemudian cari kode seperti di bawah. Kode ini adalah kode untuk judul posting. Setiap template mungkin sedikit berbeda, jadi sesuaikan dengan template Anda.

    <h3 class='post-title entry-title'>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </h3>

  5. Paste script digg this tadi ke bagian atas kode judul posting tersebut.
  6. Terakhir, tambahkan kode berikut pada script digg this.

    <div style="float: right;">
    kode digg this button
    </div>

Selamat mencoba!

Meletakkan Kode fbShare Button di Setiap Postingan Blogger
Melanjutkan posting sebelumnya tentang facebook share button dengan counter, kali ini Xceria akan membahas bagaimana cara meletakkan kode fbShare button tersebut pada setiap posting di blogspot.

Kode yang Xceria jelaskan di bawah ini, akan menempatkan fbShare button di sebelah kanan judul posting.

Baiklah, langsung saja kita mulai!

Pertama, masuk ke akun blogger Anda dan pilih menu Tata Letak (Layout) » Edit HTML. Sebaiknya sebelum Anda mulai, save dulu kode template Anda yang sekarang sebagai back-up kalau ada terjadi kesalahan.

Kemudian, klik tulisan "expand template widget", kemudian cari kode seperti di bawah ini. Itu adalah kode untuk judul/heading posting. Beberapa template mungkin sedikit berbeda, jadi sesuaikan saja.

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

Setelah itu, copy kode fbShare button yang telah Xceria tulis pada posting sebelumnya.

Kemudian, paste kode tersebut ke bagian atas dari kode judul posting di atas tadi.

Selanjutnya, copy-paste kode di bawah ini ke bagian kode fbShare button.

<div style="float: right;">
kode fbShare button
</div>

Terakhir, simpan template Anda dan lihat hasilnya.

Hasil akhir akan tampak seperti di bawah ini.

facebook share widget
Cukup itu saja kodenya, selamat mencoba!

Cara Pasang Share on Facebook Button dengan Counter
Facebook Share
Cara pasang share on facebook button dengan counter. Mungkin Anda sudah pernah melihat atau memasang share on facebook button pada sebuah blog. Tapi mungkin tidak ada diberikan jumlah seberapa banyak orang men-sharing posting Anda di facebook. Tidak seperti pada digg dan tweetmeme yang dapat menampilkan jumlah hitsnya.

Kali ini Xceria akan menuliskan bagaimana cara memasang sharecount button untuk Facebook dengan fbShare.

Seperti yang dapat Anda lihat pada tweetmeme, yang dapat menampilkan seberapa banyak orang yang men-sharing posting blog melalui twitter, fbShare juga mampu menampilkan jumlah share suatu posting atau halaman blog ke facebook.

Untuk memasang fbshare counter, copy kode di bawah ini.

Basic

<script src="http://widgets.fbshare.me/files/fbshare.js"></script>

Advance

facebook button
<script>var fbShare = {
url: 'http://xceria.blogspot.com/',
size: 'small',
google_analytics: 'true'
}</script>
<script src="http://widgets.fbshare.me/files/fbshare.js"></script>

facebook button facebook counter button
<script>var fbShare = {
url: 'http://xceria.blogspot.com/',
size: 'large',
google_analytics: 'true'
}</script>
<script src="http://widgets.fbshare.me/files/fbshare.js"></script>

  • Untuk men-share halaman depan, ganti kode url berwarna biru dengan url blog Anda.
  • Untuk men-share setiap posting/artikel, ganti kode url berwarna biru tersebut dengan <data:post.url/> (untuk blogspot) atau <?php the_permalink() ?> (untuk wordpress).
  • Bagi yang memakai wordpress juga bisa mendownload pluginnya di sini.

Mengenai cara memasangnya di template blog bisa membaca postingan tentang cara pasang fbshare button di setiap postingan. Sekian artikel mengenai cara pasang share on facebook button dengan counter. Semoga berguna!

»
 
Back to top