إضافة صفحة إتصل بنا جاهزة لمدونات بلوجر عبر تلجرام بوت

في هذا الموضوع سوف نقوم بشرح طريقة تركيب صفحة إتصل بنا لمدونات بلوجر عبر بوت تلجرام بحيث ستصل الرسالة من بلوجر إلى تليجرام مباشرة بدل من الإيميل وذلك لإصلاح المشاكل التي ظهرت مؤخراً مع تحديثات منصة بلوجر.

واجه العديد من أصحاب مدونات بلوجر مشكلة عدم إشتغال زر الإرسال في صفحة إتصل بنا على بعض القوالب التي لم يتم تحديثها لتدعم التحديثات الجديدة.

في الحقيقة ليس هناك أي إجراء يمكنك القيام به إذا كنت تواجه مشكلة عدم إشتغال صفحة إتصل بنا على مدونتك. هناك حل بديل هو تركيب صفحة إتصل بنا إحترافية على مدونتك بلوجر وسوف تصلك الرسالة إلى تلجرام بدل الإيميل، وهكذا سيحل المشكل.

مشكلة عدم إشتغال صفحة إتصل بنا بلوجر

كما نعلم قامت بلوجر بعمل تحديث لواجهة منصة الإتصال مما تسبب في مشكل عدم إشتغال زر الإرسال في صفحة إتصل بنا على العديد من المواقع، نود أن نؤكد لك أنه ليس هناك أي إجراء يمكن القيام به لإصلاح هذا سوى إنتظار صدور إصلاح يحُلّ المشكل من داخل منظومة بلوجر نفسها.

هذا المشكل ليس له علاقة بموقعك أو مدونتك ولست وحدك من تعاني منه، المشكل ظهر لذا الجميع ويعاني منه الكثيرون لذلك ما عليك يوى تغيير صفحة إتصل بنا وتركيب صفحة إتصل بنا إحترافية بدل القديمة.

هناك بديل تستطيع الإستعانة به بينما يتم إصدار تحديث جديد من بلوجر لإصلاح مشكلة عدم إتشغال صفحة الإتصال سوف نستخدم صفحة إتصل بنا مطابقة تماماً للبلوجر ولن تلاحض الفرق بينهما، الشيء الحيد المختلف هو أن الرسالة ستصلك للتلجرام بدل الإيميل.

مميزات تركيب صفحة إتصل بنا لمدونات بلوجر عبر تلجرام

صفحة إتصال بلوجر عبر Telegram Bot API هي طريقة جديدة ومبتكرة لتمكين زوار موقعك من التواصل معك وإرسال رسائل نصية إليك لتصلك إلى Telegram بدل Email العادي.

معاينة الصفحة

سوف تتلقى جميع الرسائل مباشرة على التليجرام بحد أقصى 3000 حرف لكل رسالة وستستطيع الوصول إليها وقراءتها أو حتى الرد بسهولة من داخل تطبيق تلجرام وهذا ما يميزها عن باقي الإصدارات الأخرى من صفحة إتصل بنا.

طريقة إنشاء صفحة إتصل بنا عبر تليجرام لمدونات بلوجر

ستحتاج إلى إنشاء بوت Telegram لكي تصل عليه الرسائل المرسلة من صفحة إتصل بنا، وبعد ذلك سوف نقوم بإنشاء مجموعة على التلجرام ونربط بينها وبين البوت لكي يتم تحويل جميع الرسائل تلقائيا إلى من البوت إلى المجموعة.

الأن سوف نشرح طريقة إنشاء بوت عبر تلجرام (شاهد الصور في الأسفل) :

1. إفتح تطبيق التلجرام على هاتفك واستخدم زر البحث في الأعلى للبحث عن العبارة التالية @BotFather تم أدخل إلى النتيجة الأولى التي تحمل علامة التوثيق الزرقاء.

2. بعدها سيتم توجيهك إلى صفحة الدردشة مع أداة BotFather، إضغط على /start الموجودة في الأسفل، ستظهر لك قائمة من التوجيهات فقط تجاهلها.. واستخدم خانة الكتابة الموجودة في الأسفل وضع فيها الرمز التالي /newbot وأرسل الجواب.

3. سيرد عليك البوت برسالة يطلب منك فيها تسمية البوت الجديد الخاص بك، قم بالرد عليه واكتب الإسم الذي تريد.

4. الخطوة التالية بعد الإسم هي تعيين username الخاص بصفحة البوت وهو الرابط الذي يمكن الدخول إلى البوت من خلاله ويكون مثلا على هذا الشكل (https://t.me/@EchrahNet_bot).

شاهد أيضاً

لتعيين إسم المستخدم أكتب الإسم الذي تريد في الدردشة ويشترط أن يكون بالإنجليزية مثلاً EchrahNet_bot :

• غير كلمة EchrahNet التي قبل bot_ وضع بدالها إسم من إختيارك ولا تحذف كلمة bot التي بعد علامة _ الفاصلة تم أرسل الرد.

الأن سيخبرك البوت أنه تم الإنشاء بنجاح! وفي رسالة الرد سوف تجد توكن البوت الخاص بك قم بنسخه كما وضحنا في الصورة وتابع باقي الخطوات التي سنشرحها :

قم بنسخ معرف Token API المميز الذي أشرنا إليه بلون مختلف في الصورة تم أخرج وابحث من جديد عن @uubot بنفس الطريقة السابقة، ستظهر عدة نتائج إختر النتيجة الأولى (إنشاء بوت تواصل).

إبدأ الدردشة مع البوت الثاني عبر الضغط على /start سوف يطلب منك التوكن الذي حصلناه من البوت الأول، قم بصلقه وأرسل.

بقيت خطوة أخيرة فقط وهي إنشاء مجموعة على التلجرام والربط بينها وبين البوت الذي أنشأناه (يجب إضافة البوت كمشرف في المجموعة) لكي يتم تحويل جميع الرسائل من صفحة إتصل بنا على بلوجر مباشرة إلى المجموعة.

طريقة إنشاء مجموعة سهلة للغاية تابع الخطوات أدناه :

1. من تطبيق تلجرام على هاتفك إضغط على القلم الموجود في الأسفل سيتم توجيهك لصفحة جديدة.
2. من الخيارات على الصفحة التي ظهرت حدد New Group أو مجموعة جديدة بالعربية.
3. الأن سيطلب منك إضافة شخص ما إلى المجموعة لأنه لا يمكن إنشاء مجموعة لوحدك.
4. سوف نقوم بإضافة البوت للمجموعة عبر إدخال username في خانة البحث الذي حددته سابقاً وينتهي بعلامة _bot وسترى البوت ظهر في النتيجة عبر الإسم الخاص به.
5. بعدها ضع إسم للمجموعة من إختيارك وفي نفس المكان توجه للإعدادات وقم بترقية البوت إلى مشرف.

لقد أنهينا المرحلة الأولى بنجاح ✓ بقي فقط إنشاء صفحة إتصل بنا بلوجر عبر تلجرام وربط المجموعة والبوت بها لكي تتوصل برسائل الزوار، تابع معي.

ربط صفحة إتصل بنا بلوجر مع تلجرام بوت Telegram Bot API

الخطوة 1: قم بالتوجه إلى لوحة تحكم بلوجر

الخطوة 2: أنشئ صفحة ثابتة أو إستخدم نفس الصفحة الحالية إن كانت موجودة من قبل.

الخطوة 3: قم بالتبديل إلى عرض HTML.

الخطوة 4: قم بلصق الأكواد التالية في صفحة إتصل بنا على بلوجر لديك.

<style>
  /*<![CDATA[*/
  /* Toast Notification */
  .tNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards}
  @media screen and (max-width:500px){.tNtf span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}
  @keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
  @-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
  .drK .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}
  /*]]>*/
</style>

<!--[ Toast Notification ]-->
<div id='toastNotifC' class='tNtf'></div>

<script>
  /*<![CDATA[*/
  /* Toast */ function toast(e){var tNotif = document.getElementById('toastNotifC'); if (tNotif != null){tNotif.innerHTML = '<span>' + e + '</span>'}};
  /*]]>*/
</script>

<p>للتواصل معنا أول طلب المساعدة عبر الإيميل يرجى ترك رسالة على بريد الموقع الرسمي :&nbsp;<b><a href="mailto:yourmail@gmail.com">yourmail@gmail.com</a></b></p>

<div class='ContactForm'>
  <form name='cForm'>
    <div class='cArea'>
      <label>
        <input class='cInpt cName' name='الإسم' id='name' type='text' />
        <span class='n'>الإسم</span>
      </label>
    </div>
    <div class='cArea'>
      <label>
        <input class='cInpt cMail' name='الإيميل' id='email' type='email' />
        <span class='n req'>البريد الإلكتروني</span>
      </label>
      <span class='h'>مطلوب عنوان بريد إلكتروني صالح</span>
    </div>
    <!--[ Extra ]-->
    <!--<div class='cArea'>
      <label>
        <input class='cInpt cMob' name='الرقم' id='mobile' type='text' />
        <span class='n'>رقم الهاتف</span>
      </label>
      <span class='h'>هذا الحقل إختياري</span>
    </div>
    <!--<div class='cArea'>
      <label>
        <input class='cInpt cTel' name='تلجرام' id='telegram' type='text' />
        <span class='n'>إسم مستخدم Telegram</span>
      </label>
      <span class='h'>هذا الحقل إختياري</span>
    </div>-->
    <div class='cArea'>
      <label>
        <textarea style='resize:vertical' class='cInpt cMsg' name='الرسالة' id='message' rows='3'></textarea>
        <span class='n req'>الرسالة</span>
      </label>
      <span class='h'>يجب ألا يحتوي على أكثر من 3000 حرف</span>
    </div>
    <div class='cArea'>
      <button class='cBtn button' type='submit'>إرسال</button>
    </div>
  </form>
</div>

<script>
  /*<![CDATA[*/
  (function(){
    /* Form Configuration - Sensitive (obfuscate it after making changes) */
    var formConfig = {
      botToken: '110205643:AAHdcydvCJ5vGWHxfSeofSaaL0K5HMLDsaaw',
      chatId: '-1001639576503',
      text: '\n{{FORMDATA}}',
      form: 'form[name=cForm]',
      blogData: {
        homeTitle: 'إشرح نت',
        homeUrl: 'https://' + window.location.host,
        pageTitle: document.title,
        pageUrl: 'https://' + window.location.host + window.location.pathname,
      },
      callbacks: {
        success: () => {
          /* Let's redirect user to a location on success */
          setTimeout(() => {
            toast('إعادة توجيهك إلى الصفحة الرئيسية ...');
            setTimeout(() => {
              /* Location to assign after form is successfully submitted */
              window.location.assign('/')
            }, 3000)
          }, 3000)
        },
        started: () => {
          /* Disable submit button to prevent multiple submits */
          document.querySelector('form[name=cForm] .cBtn.button').disabled = true
        },
        error: () => {
          /* Enable submit button on error so user can re-submit it */
          document.querySelector('form[name=cForm] .cBtn.button').disabled = false
        },
        offline: () => {},
        tooLong: () => {}
      },
      toast: {
        blankName: 'لا يمكن أن يكون الإسم فارغًا',
        blankMessage: 'لا يمكن أن تكون الرسالة فارغة',
        longMessage: 'لا يمكن أن تحتوي الرسالة على أكثر من 3000 حرف',
        invalidEmail: 'مطلوب عنوان بريد إلكتروني صحيح',
        success: 'حسناً, {{name}}! تم إرسال رسالتك.',
        started: 'جاري الإرسال...',
        error: 'حدث خطأ!',
        offline: '{{name}}! يبدو أنك غير متصل بالإنترنت.',
        tooLong: 'رسالة طويلة .. فشل الإرسال!'
      }
    };
    /* Main Scripts */
    function _0xde11c0(o,r){return _0x952e(r-900,o)}var form=document[_0x2566c7(-31,-20)](formConfig[_0xde11c0(924,901)]),toasts=JSON[_0x2566c7(-45,-18)](JSON[_0x2566c7(0,-17)](formConfig[_0x2566c7(5,-16)]));function _0x952e(e,o){var i=_0x30dc();return(_0x952e=function(o,r){var n=i[o=+o];void 0===_0x952e.BygsOe&&(_0x952e.QKFLDW=function(o){for(var r,n,t="",f="",e=0,i=0;n=o.charAt(i++);~n&&(r=e%4?64*r+n:n,e++%4)&&(t+=String.fromCharCode(255&r>>(-2*e&6))))n="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=".indexOf(n);for(var g=0,C=t.length;g<C;g++)f+="%"+("00"+t.charCodeAt(g).toString(16)).slice(-2);return decodeURIComponent(f)},e=arguments,_0x952e.BygsOe=!0);var t=i[0],f=o+t,t=e[f];return t?n=t:(n=_0x952e.QKFLDW(n),e[f]=n),n})(e,o)}function _0x2566c7(o,r){return _0x952e(r- -20,o)}function _0x30dc(){var o=["CxvLCNLtzwXLy3rVCG","zM9YBq","CgfYC2u","C3rYAw5NAwz5","Dg9HC3q","ywrKrxzLBNrmAxn0zw5LCG","C3vIBwL0","ChjLDMvUDerLzMf1Bhq","w25HBwvD","BgvUz3rO","BMfTzq","DMfSDwu","CMvWBgfJzq","jMD0oW","jMX0oW","pgi+jIm4mJi2oYa","Dg9vChbLCKnHC2u","C2XPy2u","oJWVyJ4G","zw1HAwW","D2vIC2L0zq","phbYzt4","y2HHDf9Pza","y2HHDeLK","Dgv4Da","cTMf2ytyP9IT2lJyQtOG2kRzHsdyPDIX2lpyP9MeinMh2ldyPYdyP9Me2yBzHDMi2ldyRcdzHDMginI12yhyRDIPidXHigHYzwy9iG","yMXVz0rHDge","CgfNzvrPDgXL","pc9HpIdyUDMe2yKG2yxzInMc2lKGpgeGAhjLzJ0I","Ag9TzvrPDgXL","pc9HpI4k2lFzInIXinIO2ypzHcdyRDIOinIO2yJyP9IZ2lFyQsa8ysbOCMvMpsjODhrWCZOVl3D3DY5Ly2HYywGUBMv0iJ7yPDI02lhyRsdzHTIQpc9HpI4","sfrnta","CMvWBhLFBwfYA3vW","rM9YBsbqywDL","CgfNzvvYBa","Dg9mB3DLCKnHC2u","Bwf0y2G","BwvZC2fNzq","yMXHBMTnzxnZywDL","Bg9Uz01LC3nHz2u","y2fSBgjHy2TZ","ue9tva","Ahr0Chm6lY9HCgKUDgvSzwDYyw0UB3jNl2jVDa","C2v0uMvXDwvZDeHLywrLCG","yxbWBgLJyxrPB24VANnVBG","C3rHDhvZ","CMvZCg9UC2vuzxH0","C3vJy2vZCW","zxjYB3i","qMfKifjLCxvLC3q6ig1LC3nHz2uGAxmGDg9VigXVBMC","Dg9Vtg9UzW","C2vUza","B2zMBgLUzq"];return(_0x30dc=function(){return o})()}form[_0xde11c0(906,905)](_0x2566c7(-22,-14),o=>{var r=380,n=355,t=361,f=353,e=358,g=352,C=877,a=876,m=349,v=350,x=365,s=879,z=880,u=877,c=322,D=347,L=882,B=880,d=345,y=363,w=344,H=882,_=886,M=891,l=369,A=359,p=882,h=351,G=877,N=357,b=351,U=348,J=341,Y=323,q=340,K=321,O=338,S=891,V=889,W=892,X=901,j=893,I=893,Z=337,P=334,T=333,k=896,R=890,F=875,E=897,Q=894,$=899,oo=921,ro=346,no=875,to=339,fo=359,eo=884,io=896,go=873,Co=331,ao=328,mo=902,vo=916,xo=316,so=325,zo=902,uo=902,co=354,Do=324,Lo=359,Bo=334,yo=323,wo=906,Ho=907,_o=330,Mo=320,lo=909,Ao=916,po=344,ho=360,Go=869,No=868,bo=366,Uo=359,Jo=290,Yo=311,qo=323,Ko=917,Oo=938,So=464,Vo=461,Wo=507,Xo=523,jo=450,Io=505,Zo=500,Po=462,To=469,ko=794,Ro=462,Fo=456,Eo=806,Qo=820,$o=445,or=807,rr=788,nr=463,tr=443,fr=452,er=808,ir=798,gr=480,Cr=509,ar=865;function mr(o,r){return _0x952e(o-ar,r)}function vr(o,r){return _0x952e(r- -363,o)}o[mr(872,860)]();var xr={},sr=form.querySelectorAll(vr(-r,-n));for(i=0;i<sr[mr(874,876)];++i)xr[sr[i][vr(-t,-f)]]=sr[i][vr(-e,-g)][mr(C,a)](/>/gi,vr(-m,-v))[vr(-x,-351)](/</gi,mr(s,878));var zr,ur,cr=formConfig.text,Dr="";for(zr in formConfig.toast={},xr)for(ur in Dr+=mr(z,u)+(zr[0][vr(-c,-D)]()+zr[mr(L,B)](1))+vr(-353,-d)+(vr(-y,-w)===zr||mr(885,H)===zr?xr[zr]:mr(_,M)+xr[zr]+"</pre>")+"\n",cr=cr[mr(877,863)](new RegExp("{{"+zr+"}}","g"),xr[zr]),toasts)void 0===formConfig[vr(-l,-A)][ur]&&(formConfig.toast[ur]=toasts[ur][mr(C,p)](new RegExp("{{"+zr+"}}","g"),xr[zr])[vr(-368,-h)](/\{\{(.*?)\}\}/gm,""));cr=cr[mr(G,888)](/{{FORMDATA}}/g,Dr)[vr(-N,-b)](/\{\{(.*?)\}\}/gm,"");b={};b[vr(-U,-J)]=formConfig[vr(-Y,-q)],b[mr(889,879)]=cr+vr(-K,-O)+formConfig[mr(S,V)].pageUrl+'">'+formConfig.blogData[mr(W,X)]+mr(j,I)+formConfig[vr(-320,-Z)].homeUrl+'">'+formConfig[mr(S,M)][vr(-311,-P)]+vr(-342,-T),b.parse_mode=mr(k,R),b[mr(E,F)]={},b[mr(E,F)].inline_keyboard=[[{text:mr(898,888),url:formConfig[mr(M,Q)][mr($,oo)]}]];var Lr,o=b;navigator.onLine?void 0!==xr[vr(-ro,-353)]&&""===xr[mr(no,877)]?toast(formConfig[vr(-to,-fo)].blankName):void 0===xr.email||""!==xr[mr(eo,io)]&&null!==String(xr[mr(eo,go)])[vr(-Co,-ao)]()[mr(X,883)](/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)?void 0!==xr.message&&""===xr[mr(mo,vo)]?toast(formConfig.toast[vr(-xo,-so)]):void 0!==xr[mr(zo,876)]&&3e3<xr[mr(uo,io)][vr(-373,-co)]?toast(formConfig.toast[vr(-311,-Do)]):(toast(formConfig[vr(-378,-Lo)].started),formConfig[vr(-Bo,-yo)].started(),(Lr=new XMLHttpRequest).open(mr(wo,922),mr(Ho,933)+formConfig.botToken+"/sendMessage",!0),Lr[vr(-_o,-Mo)]("Content-type",mr(lo,Q)),Lr.onreadystatechange=function(){var o,n=758;function r(o,r){return _0x952e(o-n,r)}function t(o,r){return _0x952e(o- -Cr,r)}4===Lr.readyState&&(200===Lr[t(-So,-Vo)]?(o=JSON[t(-Wo,-Xo)](Lr[t(-463,-jo)])).ok?(toast(formConfig[t(-Io,-Zo)][t(-Po,-To)]),formConfig[r(798,ko)][t(-Ro,-Fo)](o)):(toast(formConfig.toast[r(Eo,Qo)]),formConfig[t(-469,-$o)][r(806,826)](o)):r(or,rr)===JSON.parse(Lr[t(-nr,-tr)]).description?(toast(formConfig.toast.tooLong),formConfig[t(-469,-fr)][r(er,818)]()):(toast(formConfig.toast[r(806,794)]),formConfig[r(ir,774)][t(-Vo,-gr)]()))},Lr[mr(Ao,907)](JSON[vr(-po,-ho)](o))):toast(formConfig[mr(Go,No)].invalidEmail):(toast(formConfig[vr(-bo,-Uo)][vr(-Jo,-Yo)]),formConfig[vr(-m,-qo)][mr(Ko,Oo)]()),validated=!1});
  })()
  /*]]>*/
</script>

إستبدل الكلام الذي حددنا عليه بالأزرق بعد botToken: وضع مكانه معرف Telegram Token API الخاص بك الذي أرسلته للبوت في المرحلة الثانية.

غير كذلك الرقم الذي بعد chatId واستبدله بمعرف مجموعة الدردشة التي أنشأتها، لكي تحصل على معرف المجموعة الخاص بك طبق الخطوات التالية :

1. إفتح Telegram على هاتفك وادخل إلى المجموعة التي أنشأتها.
2. إضغط على إسم المجموعة تم حدد اختيار Add Members أو بالعربية إضافة مستخدمين.
3. بعدها إبحث عن @RawDataBot وحدد النتيجة الثالثة في القائمة "TelegramBotRaw" ↑ كما في الفيديو ↑ واضغط إضافة للمجموعة.
4. مباشرة بعدها ستصلك رسالة رد تلقائي على المجموعة بها كل التفاصيل والمعرفات الخاصة بك.
5. إبحث وسط الأكواد في الرسالة عن المعرف الذي يبدأ بـ -100 أو إستخدم زر البحث وابحث "chat": لإختصار الوقت.
6. قم بنسخ المعرف الذي يبدأ برقم -100 وضعه في المكان المخصص داخل السكريبت كما أشرنا إليه بلون مميز.
7. أخيراً، غير كلمة إشرح نت وضع مكانها إسم مدونتك أو المجموعة على حسب رغبتك.

لا تسنى تعتيم أكواد JavaScript باستخدام هذه الأداة لمنع المتجسسين من قراءة معرف Telegram API على صفحة إتصل بنا الخاصة بك، إن عدم تعتيم الأكواد سيمكّن الأخرين من الدخول للمجموعة وقراءة رسائل الزوار.

الأن قد أنهينا كل الخطوات وأصبحت صفحة إتصل بنا على بلوجر جاهزة للإستخدام، يمكنك تجربة ملئ رسالة وستصل مباشرة إلى مجموعتك في تليجرام.

ستعمل إضافة صفحة إتصل بنا بلوجر عبر تلجرام على حل جميع مشاكلك مع صفحة إتصل بنا وستتمكن من التواصل مع زوار موقعك بسهولة، لا تنسى مشاركة التدوينة من فظلك وإذا واجهك أي مشكل أطلب المساعدة في التعليقات، بالتوفيق

إشرح نت هو الدليل الأكثر شمولاً لتعلم المعرفة التقنية وشروحات عالم الإنترنت.