Teman

Cara Memasang Widget Like Box Facebook di Blog


Kamis, 09 Juni 2016

Widget Facebook Fan Page Like Box, Facebook Fan Page adalah sebuah halaman developer facebook yang memberikan informasi beragam sesuai dengan keinginan pengelola (admin) fan page, mulai dari info produk, event, layanan publik,komunitas dan lain-lain. Facebook Fan Page Like Box bisa membantu follower serta pengunjung untuk mendapatkan informasi/update terbaru di Facebooknya mengenai website/blog Anda hanya dengan mengklik tombol 'Like'. Hal ini lah yang dimanfaatkan oleh kalangan tertentu, contohnya pengelola toko online untuk memberikan informasi atau event kepada pelangganya melalui facebook. Dengan demikian penyebaran informasi akan lebih cepat diterima oleh banyak pengunjung.

Tentu manfaat Facebook Fan Page bagi website/blog adalah untuk mengumpulkan pengunjung sebanyak-banyaknya. Sedangkan manfaat bagi yang memiliki toko online adalah mengirim pesan-pesan marketing atau mempromosikan produk Anda untuk menghasilkan penjualan. Dengan semakin banyaknya jumlah penggemar Facebook Fan Page Anda, maka akan semakin besar peluang blog Anda dikenal orang dan makin besar juga peluang Anda mendapatkan uang.

Sebelum Anda memasang widget Facebook Fan Page Like Box ini di blog kesayangan Anda, terlebih dahulu Anda harus membuat Facebook Fan Page. Bagi Anda yang tidak tahu caranya Anda bisa klik link berikut Cara Membuat Fans Page di Facebook.

Cara Pasang Facebook Fan Page Like Box di Blog sebagai berikut:

  1. Login dulu ke Facebook Anda www.facebook.com 
  2. Masuk ke Halaman Developer Facebook. 
  3. Pada kolom "Facebook Page URL" silahkan masukkan URL Facebook Fan Page yang telah Anda buat, atur ukuran tinggi dan lebarnya, warna dan lain-lain. Setelah itu, silahkan klik tombol "Get Code" 
  4. Pilih menu Tab "IFRAME" dan lalu copy seluruh script yang ada dalam kotak. 
  5. Kemudian Pastekan kedalam kotak HTML/JavaScript dengan menambahkan dulu Widget/Gadget 
  6. Klik Save dan lihat hasilnya.
Atau anda boleh juga copy pastekan seluruh kode dibawah ini 
    

  1.  <!-- FB melayang tombol close --!>
    2. 

  2. <style type='text/css'>
    3. 

  3. #kotak-facebook {
    4. 

  4. position:fixed !important;
    5. 

  5. position:absolute; /* IE6 */
    6. 

  6. bottom:-1000px;
    7. 

  7. right:40%;
    8. 

  8. margin:0px 0px 0px -182px;
    9. 

  9. width:330px;
    10. 

  10. height:auto;
    11. 

  11. padding:16px;
    12. 

  12. -webkit-box-shadow: 0px 0px 7px #222;
    13. 

  13. -moz-box-shadow: 0px 0px 7px #222;
    14. 

  14. box-shadow: 0px 0px 7px #222; background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
    15. 

  15. color:#111;
    16. 

  16. -webkit-border-top-left-radius: 20px;
    17. 

  17. -webkit-border-bottom-right-radius: 20px;
    18. 

  18. -moz-border-radius-topleft: 20px;
    19. 

  19. -moz-border-radius-bottomright: 20px;
    20. 

  20. border-top-left-radius: 20px;
    21. 

  21. border-bottom-right-radius: 20px;}
    22. 

  22. #kotak-facebook a.close {
    23. 

  23. position:absolute;
    24. 

  24. top:-10px;
    25. 

  25. right:-10px;
    26. 

  26. background:#333;
    27. 

  27. font:bold 16px Arial,Sans-Serif;
    28. 

  28. text-decoration:none;
    29. 

  29. line-height:22px;
    30. 

  30. width:22px;
    31. 

  31. text-align:center;
    32. 

  32. color:#fff;
    33. 

  33. border:2px solid #fff;
    34. 

  34. -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    35. 

  35. -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    36. 

  36. box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    37. 

  37. -webkit-border-radius:10px;
    38. 

  38. -moz-border-radius:10px;
    39. 

  39. border-radius:10px;
    40. 

  40. cursor:pointer;
    41. 

  41. }
    42. 

  42. </style>
    43. 

  43. <script type='text/javascript'>
    44. 

  44. $(window).bind("load", function() {
    45. 

  45. // animasikan nilai top saat halaman telah selesai dimuat
    46. 

  46. $('#kotak-facebook').animate({bottom:"50px"}, 1000);
    47. 

  47. // hilangkan kotak pesan saat tombol (x) di klik
    48. 

  48. $('a.close').click(function() {
    49. 

  49. $(this).parent().fadeOut();
    50. 

  50. return false;
    51. 

  51. });
    52. 

  52. });
    53. 

  53. </script>
    54. 

  54. <div id='kotak-facebook'>
    55. 

  55. <p style=" margin-right:10px; font-size:15px; color:#000000;">Please Bantu Saya,<blink> Like This !!!</blink> </p>
    56. 

  56. <!-- Mulai --!>
    57. 

  57.  
    58. 

  58. <div class="fb-like-box" data-href="https://www.facebook.com/ID_Facebook" 
    59. 

  59. data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" 
    60. 

  60. data-show-border="true"></div>
    61. 

  61.  
    62. 

  62. <!-- Selesai --!><a class='close' href='#'>&times;</a>
    63. 

  63. <p style=" float:right; margin-right:35px; font-size:10px;" >
    64. 

  64. Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://tutorialine.net/"> 
    65. 

  65. Widget</a> and 
    66. 

  66. <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://www.tutorialines.net/2015/10/cara-memasang-widget-like-box-facebook.html">
    67. 

  67. Get This Widget</a></p>
    68. 

  68. </div>
    69.


yang di Code HTML 5 yang ID_Facebook tersebut, Anda ganti dengan ID Facebook Fan Page milik Anda.

Label: ,

0 komentar:

Langganan: Posting Komentar (Atom)
© 2020 TUTORIAL · BebasBayar