Притурка Facebook Messenger в блог

Притурка Facebook Messenger в блог. Чрез тази притурка читателите могат да изпращат незабавни съобщения до автора или администратора на блога. Ако я използвате ще интегрирате фен страницата на блога си във Facebook със сайта си на Blogger.

Искате ли да добавите тази интересна притурка във вашия блог, така че вашите посетители да могат да общуват с вас? Ако отговорът ви на този въпрос е положителен, то продължете да четете. Можете да я видите тук в долния десен край на главната страница.

Въведение

По принцип в блога си сме свикнали да използваме притурка за контакт чрез имейли, която ни е известна като "Контактна форма". Позната ни е стандартната притурка „Контактна форма“, както и такава на статична страница. Разгледали сме ги подробно и в персонализирани варианти.
Но ако искате да използвате Facebook Messenger в блога си, за да получавате съобщенията си от него директно на фен страницата във Facebook, то това приспособление е идеално за вас. Притурката изглежда прилично.

И тъй като е плаваща, не заема никакво място в блога.

Чрез нея показвате на читателите си, че имате фен страница във Facebook и едновременно с това им давате възможност да ви пишат. И всички техни съобщения ще отиват във вашата кутия за съобщения във Facebook. Така че можете да им отговорите и незабавно да започнете общуване с тях.

Инсталиране на Facebook Messenger в блога

Ще следваме стъпките:

➤Влизаме в админ панела на блога си;
➤Избираме секция „Оформление“;
➤Добавяне на притурка;
➤HTML/JavaScript притурка;

В тялото ѝ вписваме следния код:

<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">Open Chat</a> <div id="b-c-facebook" class="chat_f_vt"> <div id="fbchat_box" onclick="b_f_chat()" class="fbchat_box"> <label>Изпратете съобщение до администратора на блога</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/thelibrarybgcom/" 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"> Здравейте! Благодаря за вашето посещение. Моля, натиснете бутона Start за контакт с администратора :) </div><p id="f_enter_3" class="hide_chatbox" align="center"> <a href="javascript:;" onclick="f_bt_start_chat()" id="f_bt_start_chat">Start</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/en_US/sdk.js#xfbml=1&version=v2.5";fjs.parentNode.insertBefore(js,fjs);}(document,'script','facebook-jssdk'));</script>

➤Изглежда малко обемист и тежък, но в действителност не е така;
➤Запаметяваме;
➤Позиционирайте притурката в долния край на темата;

Настройки на притурката Facebook Messenger

Единствената редакция, която трябва да направите в кода е на мястото, което е оцветено в червено. Там нанесете URL адреса на вашата фен страница във Facebook. Намира се в края на кода и изглежда така:

chat-conent"> <div class="fb-page" data-tabs="messages" data-href="https://www.facebook.com/thelibrarybgcom/" data-width="250" data-height="310" data-small-header="true" data-adapt-container-width="true" data-

Ако желаете, заменете и английския текст в полето на Facebook Messenger с текст на български. Пробвайте как работи.


DEMO

Това е. Надявам се, че тази притурка може да укрепи връзката между вас и читателите на блога ви.
Доскоро и успех!
Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и гласувате за блога на:



Следвайте Blogzablogove