3 Ağustos 2016 Çarşamba

Blogger İçin Facebook Messenger İletişim Eklentisi

20 yorum
Blog yazmanın en keyifli taraflarından biri yeni insanlarla tanışmak, onlarla iletişim kurmak, bir şeyler paylaşmak. Bunu yaparken faydalandığımız şey araç ise çoğunlukla blog yazılarının altındaki yorum bölümleri ve iletişim formları. Fakat bu araçlar ile anlık iletişim kurmak pek mümkün değil ve sabırsız ziyaretçiyi bloga bağlamak için çabuk reaksiyon göstermek oldukça önemli.

Ülkemizde milyonlarca aktif kullanıcısı olan Facebook’un anlık iletişim ile ilgili web sitesi sahiplerine sunduğu çok güzel çözümler var. Bunlardan biri de bloga ya da web sitesine eklenen, Facebook hesabı olan herhangi bir kullanıcının size anlık mesaj göndermesini sağlayan eklenti.

Facebook messenger eklentisi


Bu Blogger Facebook eklentisini blogunuza eklediğinizde sağ alt köşede “Facebook’tan mesaj gönder” notu gözükecek. Ziyaretçiler buraya tıkladığınızda bir mesaj penceresi açılacak ve buraya yazacakları mesajlar sizin Facebook sayfanızdaki mesajlar bölümüne düşecek. Eğer o sırada çevrimiçi iseniz anlık yazışarak kolayca iletişim kurabileceksiniz. Ziyaretçi sizin vereceğiniz cevapları blogdaki Facebook mesaj penceresinden değil kendi messengerında görecek. Yani bu eklenti bir sohbet değil iletişim formu niteliğinde.

Facebook sayfanızdaki beğeni sayısını da arttıracak bu Eklentiyi blogunuza eklemek için Blogger kumanda panelinize giriş yaparak Yerleşim > Gadget Ekle > HTML/JavaScript Gadget diyerek aşağıdaki kodları yapıştırmanız yeterli.

<style type="text/css">
#b-c-facebook .fbchat_box,#chat_f_b_smal,#f_bt_start_chat{background:#3a5897}
#fbchat_box{padding-right:15px;max-width:210px;max-height:50px;display:block;transition:all .3s}
#b-c-facebook .f-chat-conent .chat-single a,#chat_f_b_smal{font-family:Arial,sans-serif}
#b-c-facebook .fbchat_box,#chat_f_b_smal{text-shadow:0 1px 0 rgba(0,0,0,.1);background-repeat:repeat-x;background-size:auto;background-position:0 0;text-decoration:none}
.chat_f_vt{position:fixed;right:10px}
#chat_f_b_smal{padding:0 10px;cursor:pointer;width:90px;color:#fff;height:38px;line-height:38px;background-color:#3a5897;border:0;margin-right:12px;font-size:14px;z-index:999999999;bottom:0;border-top-left-radius:5px;border-top-right-radius:5px;bottom:-400px;transition:all .3s;text-align:center;display:block}
#chat_f_b_smal:hover{background-color:#3B5998;opacity:1}
#b-c-facebook{margin-right:50px;bottom:0;z-index:9999999999;transition:all .3s;width:250px;height:auto;max-height:375px;min-height:38px;box-shadow:0 10px 50px 0 rgba(0,0,0,0.25);border-top-left-radius:5px;border-top-right-radius:5px;overflow:hidden;display:block}
#b-c-facebook .f-chat-conent{float:left;width:100%;height:335px;overflow:hidden;display:none;background-color:#fff;position:relative}
#b-c-facebook .f-chat-conent .chat-single{float:left;position:absolute;bottom:0;left:0;background-color:#fff;line-height:25px;color:#fff;width:100%}
#b-c-facebook .f-chat-conent .chat-single a{float:left;text-decoration:none;margin-left:10px;color:#0C5BB5;font-size:12px}
#b-c-facebook .f-chat-conent .chat-single a:hover{color:#F60}
#b-c-facebook .fbchat_box label{width:185px}
#b-c-facebook .f-chat-conent .chat-single label{float:right;color:silver;margin-right:5px;font-size:12px;font-family:Arial}
#b-c-facebook .fbchat_box,#b-c-facebook .fbchat_box label{line-height:20px;margin:0;cursor:pointer;font-family:Arial,sans-serif;font-size:14px}
#b-c-facebook .f-chat-conent .chat-single i{color:#0C5BB5}
#b-c-facebook .f-chat-conent .fb-page{margin-top:0;float:left;height:310px}
#b-c-facebook .fbchat_box{float:left;padding:0 25px;padding-left:15px;width:250px;color:#fff;height:38px;line-height:38px;background-color:#3a5897;border:0;z-index:9999999;margin-right:12px}
#b-c-facebook .fbchat_box label{position:absolute;top:10px}
//Widget by www.bloggerspice.com
.title-f-chat-icon{margin-left:-10px}
#t_f_chat{float:left;position:absolute;right:15px;top:-5px}
#t_f_chat a{color:#fff;font-size:17px;font-family:verdana;text-decoration:none}
#t_f_chat a:hover i{color:#ff0;text-decoration:none}
.chat-left-5{margin-left:2px}
#start_chat{position:absolute;width:248px;height:239px;top:70px;left:0;background-color:#fff;padding:10px;float:left;display:none}
#start_chat em{font-size:11px;color:gray}
.msg_b{color:#434a54;width:80%;word-wrap:break-word;overflow:hidden;font-family:Arial,sans-serif;font-size:14px;background:#edeef1;padding:10px;min-height:13px;margin-bottom:5px;position:relative;margin:5px;border-radius:5px;border:1px solid #dfe3e9}
#close_chat{opacity:0.5}
#close_chat:hover{opacity:1}
.msg_b a{text-decoration:underline;color:#01509E}
#f_bt_start_chat{margin:auto;background-color:#3a5897;border-radius:3px;color:#fff;font-family:Arial;font-size:14px;font-weight:bold;padding:9px 35px;text-decoration:none}
#f_bt_start_chat:hover{text-decoration:none;opacity:0.8}
#start_chat p{margin-top:30px}
#fb_alert_num{background-color:#ff0;padding:0 7px;color:red;border-radius:40px;font-size:13px;font-family:Arial;font-weight:700;position:absolute;right:55px;top:12px;height:20px;line-height:20px;display:none!important}
.hide_chatbox{display:none}
#f_enter_3{margin-top:30px}
</style>

<script>
//<![CDATA[
function check_fist_vist_f(){var _=f_read_cki("check_fist_vist_f");(0==_||""==_)&&(fb_eshow("f-chat-conent"),f_create_cki("check_fist_vist_f","1",1),f_create_cki("f_chat_open","1",1))}
function close_chat(){fb_ehide('b-c-facebook'),f_create_cki('close_chat',1,1),$('body').find('.zopim').remove(),fb_eshow('chat_f_b_smal'),on_playsound('click')}
function open_chat(){f_create_cki('close_chat','0',1),fb_eshow('b-c-facebook'),fb_eshow('f-chat-conent'),fb_ehide('chat_f_b_smal')}
function f_bt_start_chat(){f_create_cki('f_bt_start_chat','1',10),fb_ehide('start_chat'),fb_ehide('fb_alert_num'),on_playsound('click')}
function f_c_start_chat(){var t=f_read_cki('f_bt_start_chat');0==t||''==t?(fb_eshow('start_chat '),fb_eshow('fb_alert_num'),f_chat_step()):(fb_ehide('start_chat'),fb_ehide('fb_alert_num'))}
function b_f_chat(){var t=f_read_cki('f_chat_open');0==t||''==t?(fb_eshow('f-chat-conent'),f_create_cki('f_chat_open','1',1)):(fb_ehide('f-chat-conent'),f_create_cki('f_chat_open','0',1)),on_playsound('click')}
function f_ck_chat(){check_fist_vist_f();f_c_start_chat();var t=f_read_cki('close_chat');if(''==t||0==t||'0'==t){fb_eshow('b-c-facebook'),fb_ehide('chat_f_b_smal');var e=f_read_cki('f_chat_open');(1==e||'1'==e)&&fb_eshow('f-chat-conent')}else fb_eshow('chat_f_b_smal'),fb_ehide('b-c-facebook')}
function f_chat_step(){on_playsound('door_bell')
fb_eshow('f_enter_1');fb_eshow('f_enter_3');}
function fb_eshow(t){document.getElementById(t).style.display='block';}
function fb_ehide(t){document.getElementById(t).style.display='none';}
function f_create_cki(t,e,n){if(n){var o=new Date;o.setTime(o.getTime()+24*n*60*60*1e3);var c='; expires='+o.toGMTString()}else var c='';document.cookie=t+'='+e+c+'; path=/';}
function f_read_cki(t){for(var e=t+'=',n=document.cookie.split(';'),o=0;o<n.length;o++){for(var c=n[o];' '==c.charAt(0);)c=c.substring(1,c.length);if(0==c.indexOf(e))return c.substring(e.length,c.length)}
return''}
function on_playsound(t){}
function ionSound(){1==web_sound&&$.ionSound({sounds:['click','door_bell'],path:fb_path.live_chat_path+'sounds/',multiPlay:!0,volume:'1.0'})}
var web_sound=!0;jQuery(document).ready(function(t){t(window).scroll(function(){var e=t(window).width();680>=e?f_create_cki('f_chat_open','0',1):f_create_cki('f_chat_open','1',1)})}),setTimeout(function(){f_ck_chat()},1000);var $=jQuery.noConflict();!function(t){if(!t.ionSound){var e,n,o,c,_={},f={},a=!1,i=function(e){var c,a;-1!==e.indexOf(':')?(c=e.split(':')[0],a=e.split(':')[1]):c=e,f[c]=new Audio,n=f[c].canPlayType('audio/mp3'),o='probably'===n||'maybe'===n?_.path+c+'.mp3':_.path+c+'.ogg',t(f[c]).prop('src',o),f[c].load(),f[c].preload='auto',f[c].volume=a||_.volume},u=function(t){var e,n,o,c;if(-1!==t.indexOf(':')?(n=t.split(':')[0],o=t.split(':')[1]):n=t,e=f[n],'object'==typeof e&&null!==e)
if(o&&(e.volume=o),_.multiPlay||a){if(_.multiPlay)
if(e.ended)e.play();else{try{e.currentTime=0}catch(i){}
e.play()}}else e.play(),a=!0,c=setInterval(function(){e.ended&&(clearInterval(c),a=!1)},250)},l=function(t){var e=f[t];if('object'==typeof e&&null!==e){e.pause();try{e.currentTime=0}catch(n){}}},r=function(t){var e=f[t];if('object'==typeof e&&null!==e){try{f[t].src=''}catch(n){}
f[t]=null}};t.ionSound=function(n){if(_=t.extend({sounds:['water_droplet'],path:'/sounds/',multiPlay:!0,volume:'0.5'},n),e=_.sounds.length,'function'==typeof Audio||'object'==typeof Audio)
for(c=0;e>c;c+=1)i(_.sounds[c]);t.ionSound.play=function(t){u(t)},t.ionSound.stop=function(t){l(t)},t.ionSound.kill=function(t){r(t)}},t.ionSound.destroy=function(){for(c=0;e>c;c+=1)f[_.sounds[c]]=null;e=0,t.ionSound.play=function(){},t.ionSound.stop=function(){},t.ionSound.kill=function(){}}}}(jQuery);
//]]>
</script>

<a title="Open Chat" id="chat_f_b_smal" onclick="open_chat()" class="chat_f_vt">Sohbeti Aç</a> <div id="b-c-facebook" class="chat_f_vt"> <div id="fbchat_box" onclick="b_f_chat()" class="fbchat_box"> <label>Facebook'tan Mesaj Gönder</label> <span id="fb_alert_num">1</span> <div id="t_f_chat"><div class='close_chatfb' onclick='hidechatfb()'>&#95;</div></div></div><div id="f-chat-conent" class="f-chat-conent"> <div class="fb-page" data-tabs="messages" data-href="https://www.facebook.com/bloghocam/" data-width="250" data-height="310" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="true"> </div><div id="start_chat"> <div id="f_enter_1" class="msg_b hide_chatbox"> Blog HOcam'ı ziyaret ettiğiniz için teşekkürler! </div><p id="f_enter_3" class="hide_chatbox" align="center"> <a href="javascript:;" onclick="f_bt_start_chat()" id="f_bt_start_chat">Başlat</a> </p></div></div></div>
<div id="fb-root"></div>
<script>(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="//connect.facebook.net/tr_TR/sdk.js#xfbml=1&version=v2.5";fjs.parentNode.insertBefore(js,fjs);}(document,'script','facebook-jssdk'));</script>

  • Kodları ekledikten sonra mavi renkle gösterdiğim yere kendi Facebook sayfanızın adresini yazmayı unutmayın.
  • Eklentinin çalışabilmesi için Facebook sayfanızın ayarlarında mesaj gönderme ayarını aktifleştirmeniz gerekmektedir.

Son olarak Blog Hocam’da yayınlanacak yeni yazılardan ve faydalı ipuçlarından/linklerden haberdar olmak için Facebook sayfamı beğenmenizi rica ediyorum. Herkese iyi bloglar!

20 yorum:

  1. Çok faydalı bir eklenti olmuş, iletişim formunun alternatifi olarak kullanılabilir. Ayrıca Facebook sayfasını daha etkin kullanmak isteyenler için mükemmel bir eklenti.

    YanıtlaSil
  2. Efsane bir eklenti bence sosyal medyayı daha etkili kullanmamızı sağlayacak hemen ekliyorum :D

    YanıtlaSil
  3. Bu eklentiyi çok beğendim kullanacağım.

    YanıtlaSil
  4. Hocam bu eklenti link çıkışı sayılır mı yani facebook sayfamızın linkini ekliyoruz bu link çıkışı olur mu

    YanıtlaSil
  5. yeni blog yazmaya başladım hocam. kullanmayı deneyeceğim. büyük takipçilerinizdenim, paylaşımınız için teşekkürler..

    YanıtlaSil
  6. Hocam boyutunu büyültmek istesem ( en olarak çünkü çift satır gözüküyor bende çok iyi durmadı ) nereyi deiştirmem gerekecek bilgi verir misiniz..

    YanıtlaSil
    Yanıtlar
    1. Kod içerisinde bulunan width değerlerini deneme yanılma ile artırın.

      Sil
  7. Cidden güzel bir eklenti. Sitemde uyguladım. Baya güzel ve şık durdu. Teşekkür ederim. Sayenizde blog siteleri sürekli gelişiyor daha interaktif bir hale geliyor.

    YanıtlaSil
  8. Merhaba linkime girip bakarsanız iki blog yazım var ama ikisi de farklı yerlerde alakasız gözüküyor blog arşivimde diğeri çikmiyor ve bütün bloglarım tek sayfada ayrı ayrı görüntülenmiyor buna lütfen bir çözüm bulursanız çok mutlu olurum link: nypart2.blogspot.com

    YanıtlaSil
  9. Çok teşekkürler güzel konuları bizimle paylaştıgınız için en kısa sürede uygulayacagım bloguma bende.

    YanıtlaSil
  10. Aradığım bir koddu teşekkür ederim. kodları kaydettim en kısa zamanda deneyeceğim.

    YanıtlaSil
  11. Gerçekten harika ve faydalı işe yarayacak bilgiler var sitenizde
    bizimle paylaştığınız için çok teşekkür ederim
    konularınız ve paylaşımlardaki bilgileriniz güncel
    Çok teşekkür ediyorum
    bütün çalışanlarınıza başarılar ve kolaylıklar diliyorum
    iyi çalışmalar

    www.binbiryol.com

    YanıtlaSil
  12. Yaptım oldu hocam sağolsun :)
    yolraporu.blogspot.com
    Kemal

    YanıtlaSil
  13. Faydalı bir eklenti. Teşekkürler. Ben kendi iletişim sayfamın tasarımını da sizin verdiğiniz kodlardan yapmıştım.

    https://sagliksporvebeslenme.blogspot.com.tr/

    YanıtlaSil
  14. Bunu iyice sağa dayayıp biraz da küçültmem gerek

    YanıtlaSil
  15. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  16. Tesekkür ederim cok güzel oldu dogrusu

    YanıtlaSil
  17. bende metın kutusu arkaplanın yarısından baslayıp yazı okunmayacak sekılde kayıyor nasıl duzeltebılırım ?

    YanıtlaSil
  18. Eklenti bilgisi için teşekkürler hocam...

    YanıtlaSil

Picardes

LİNKLER