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

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

1. Въведение
2. Инсталиране на Facebook Messenger в блога
3. Настройки на притурката Facebook Messenger

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

Въведение

По принцип в блога си сме свикнали да използваме притурка за контакт чрез имейли, която ни е известна като "Контактна форма". Позната ни е стандартната притурка „Контактна форма“, както и такава на статична страница. Разгледали сме ги подробно и в персонализирани варианти.
Но ако искате да използвате 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