دليل تركيب أداة التسجيل والنشرة البريدية

دليل التركيب

أداة التسجيل والنشرة البريدية

تُتيح لزوّارك إنشاء حساب في موقعك بضغطة واحدة، وتربط نموذج النشرة البريدية بها، فتجتمع لك قائمة واحدة بالأعضاء والمشتركين. لا تحتاج خبرة برمجية ولا تعديل كود القالب.

وقت التركيب: 10 دقائق
التكلفة: مجاني
تعديل الكود: لا شيء
ما تحتاجه: حساب جوجل

اقرأ هذا أولاً

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

الجزء الأول: تجهيز حسابك في Firebase

خدمة مجانية من جوجل تتولّى التحقّق من هوية الزوّار وحفظ قائمتهم.

1
أنشئ مشروعاً

افتح console.firebase.google.com وسجّل بحساب جوجل الذي تريده مالكاً لبيانات أعضائك.

اضغط Create a project ← اكتب اسماً يذكّرك بموقعك ← في صفحة Google Analytics اختر تعطيلها ← Create project.
2
انسخ المفاتيح الأربعة

في صفحة المشروع اضغط أيقونة الويب </>. إن لم تجدها:

⚙️ Project settings › General › Your apps › Add app › Web

اكتب أي اسم، ولا تفعّل Firebase Hosting، ثم Register app.

ستظهر شاشة فيها كود. تجاهل كل ما يخصّ npm وimport فهي للمبرمجين — قالبك يتكفّل بها. انسخ هذه القيم الأربع فقط:
```
apiKey:      "AIza…………………"
authDomain:  "اسم-مشروعك.firebaseapp.com"
projectId:   "اسم-مشروعك"
appId:       "1:…………:web:…………"
```
احفظها في ملاحظة مؤقتة. القيم الأخرى غير مطلوبة.

هل هذه المفاتيح سرّية؟
لا. مفاتيح Firebase للويب عامة بطبيعتها. حمايتك تأتي من قائمة النطاقات في الخطوة الرابعة.
3
فعّل طريقتَي الدخول

Authentication › Get started › Sign-in method

جوجل: اضغط Google ← فعّل المفتاح ← اختر بريدك في Support email ← احفظ.

الرابط عبر البريد: اضغط Email/Password. ستجد مفتاحين فوق بعضهما:
- فعّل المفتاح الأول.
- ثم فعّل الثاني تحته: Email link (passwordless sign-in).
ثم احفظ.

المفتاح الثاني هو الأهم
نسيانه أكثر سبب لفشل التركيب: زرّ جوجل سيعمل، لكن النشرة البريدية والرابط عبر البريد سيفشلان.
4
أضف نطاق مدوّنتك

Authentication › Settings › Authorized domains › Add domain

أضف عنوان مدوّنتك بدون https:// وبدون شرطة أخيرة:
```
my-blog.blogspot.com
```
وأضف نطاقك المخصّص أيضاً إن كان لديك. بدون هذه الخطوة سيرفض جوجل الدخول من موقعك.

الجزء الثاني: تفعيل الأداة في القالب

من محرّر التخطيط في بلوجر. لن تفتح محرّر HTML.

5
الصق المفاتيح في أداة التخطيط

بلوجر › التخطيط › بطاقة «Login Tool — Firebase Keys» › ✎

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

أربعة صفوف — الاسم يبقى، والقيمة تُلصق في حقل الرابط.
ثلاث نقاط تمنع أشهر الأخطاء
- علامة # تعني «فارغ» — استبدلها ولا تتركها.
- لا مسافات زائدة في أول القيمة أو آخرها.
- حرف واحد ناقص في apiKey يعطّل الأداة — راجعه بعد اللصق.
ثم احفظ الأداة، واحفظ التخطيط.
6
جرّب

افتح موقعك (‏العنوان الحقيقي لا المعاينة) واضغط Ctrl + F5.
- ستجد أيقونة شخص ظهرت في شريط الموقع بجانب أيقونة اللغة.
- اضغطها ثم جرّب المتابعة بحساب جوجل — تدخل فوراً وتتحوّل الأيقونة إلى صورتك.
- سجّل خروجاً، ثم جرّب إدخال بريدك: تصلك رسالة فيها رابط، بضغطه تعود مسجّلاً.
انتهى الأساسي
أداة التسجيل تعمل، والنشرة البريدية صارت مرتبطة بها تلقائياً: من يشترك تصله رسالة تأكيد، وبضغطها ينضمّ إلى نفس قائمة الأعضاء.
والزائر يبقى مسجّلاً إن أغلق المتصفّح أو عاد بعد شهر، حتى يضغط «تسجيل الخروج» بنفسه.
7
أين تجد قائمة أعضائك

Firebase › Authentication › Users

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

لتحسين شكل رسائلك: من Authentication ← Templates ← Email link sign-in غيّر Sender name إلى اسم موقعك، وعدّل سطر الموضوع، وضع بريدك في Reply-to.
حدود يجب أن تعرفها
- نصّ متن الرسالة غير قابل للتعديل — سياسة جوجل لمنع التصيّد.
- Firebase يجمع القائمة ولا يرسل النشرات. لإرسال عدد جديد: صدّر القائمة واستخدم أي خدمة بريد جماعي.
8
إيقاف الأداة

في التخطيط، اضغط أيقونة العين على بطاقة المفاتيح لإخفائها: تختفي أيقونة التسجيل ونافذتها بالكامل ولا يُحمَّل أي ملف إضافي. أظهرها فيعود كل شيء. لا حاجة لحذف المفاتيح.

الجزء الثالث: إلزام الزائر بالتسجيل قبل التحميل

اختياري — تخطَّه إن لم تكن لديك ملفات للتحميل.

لديك ثلاث طرق لأي رابط تحميل في مقالاتك. اختر واحدة لكل رابط، ويمكن أن تجتمع الثلاث في مقال واحد.

الطريقة الأولى: محميّة بالكامل

للملفات التي يضرّك تسريبها. رابط الملف لا يظهر في صفحتك إطلاقاً.

<a class="tq-btn" data-tq-file="my-file">تحميل</a>

لاحظ أنه بلا href. الرابط الحقيقي يُحفظ في Firestore ولا يصل إليه إلا عضو مسجّل، إذ ترفض خوادم جوجل الطلب قبل أن تخرج أي بيانات. يحتاج إعداد الجزء الرابع، ومستنداً لكل ملف.

الطريقة الثانية: أعضاء أولاً

لتشجيع التسجيل دون تعقيد. جاهزة فوراً بلا أي إعداد إضافي.

<a class="tq-btn" data-tq-lock href="https://.../file.zip">تحميل</a>

الرابط يبقى في المقال، والقالب يطلب التسجيل قبل فتحه.

وبصراحة: الرابط مكتوب في مصدر الصفحة، فمن يفتح Ctrl+U يصل إليه. هي وسيلة تشجيع لا حماية.

الطريقة الثالثة: مفتوحة للجميع

لا تسجيل ولا قيود.

<a class="tq-btn" href="https://.../file.zip">تحميل مجاني</a>

رابط عادي بلا أي سمة إضافية.

	محميّة	أعضاء أولاً
الرابط في مصدر الصفحة	لا يوجد	ظاهر
من يمنع الوصول	خوادم جوجل	متصفّح الزائر
تعطيل الجافاسكربت	لا يفيد	يتجاوزها
العمل لكل ملف	مستند في Firestore	لا شيء

تجربة الزائر واحدة في الطريقتين

يظهر قفل صغير على الزر ← يضغط ← تفتح نافذة التسجيل ← ويُكمل التحميل تلقائياً بعد الدخول، حتى لو دخل عبر رسالة البريد وعاد من صندوقه. والقفل يُرفع فور التسجيل ويعود فور الخروج.

لا تحجب نصّ مقالاتك

احجب زرّ التحميل فقط ودع المقال مفتوحاً. حجب النصّ يجعل جوجل يرى محتوى والزائر يرى بوابة، وهو ما تعاقب عليه محرّكات البحث ويضرّ ترتيب موقعك.

الجزء الرابع: إعداد الحماية الكاملة

لمن اختار الطريقة الأولى فقط. إعداد لمرة واحدة، ثم نصف دقيقة لكل ملف.

9
أنشئ قاعدة البيانات

Firebase › Firestore Database › Create database
- ID: اتركه (default) فارغاً كما هو.
- الموقع: اختر الأقرب لجمهورك مثل eur3 (europe-west). لا يمكن تغييره لاحقاً.
- الوضع: اختر Production mode وليس Test.
لماذا Production؟
وضع Test يفتح قاعدتك للجميع، ويغلق نفسه بعد 30 يوماً فتتعطّل أداتك فجأة. ووضع Production يغلق كل شيء، ثم نفتح ما نريده بالضبط في الخطوة التالية.
10
انشر قواعد الأمان

Firestore › تبويب Rules

امسح كل ما في المحرّر، والصق محتوى ملف firestore-rules.txt المرفق كاملاً، ثم اضغط Publish.

علامة النجاح: يظهر «آخر نشر» بتاريخ اليوم.

هذه الخطوة هي الحماية نفسها
بدونها لن يعمل زرّ التحميل المحميّ إطلاقاً، لأن Firestore في وضع Production يرفض الجميع حتى تنشر القواعد.

أضف أول ملف

Firestore › تبويب Data › Start collection

اسم المجموعة: اكتب downloads بحروف صغيرة تماماً ← Next.

ثم في شاشة أول مستند:

الحقل	القيمة
Document ID	معرّف من اختيارك مثل `my-file` — لا تضغط «Auto-ID»
Field	`url` بحروف صغيرة
Type	`string`
Value	رابط التحميل المباشر لملفك

ثم Save. وفي مقالك ضع الزر بنفس المعرّف:

<a class="tq-btn" data-tq-file="my-file">تحميل</a>

رابط جوجل درايف

الرابط العادي يفتح صفحة معاينة لا تحميلاً. حوّله هكذا:

من:  https://drive.google.com/file/d/1AbC2Xyz/view
إلى: https://drive.google.com/uc?export=download&id=1AbC2Xyz

واضبط صلاحية الملف على «أي شخص لديه الرابط».

12
لكل ملف جديد

لا تُنشئ المجموعة من جديد. اضغط downloads ثم Add document ← معرّف جديد ← حقل url ← الرابط. المدة نحو نصف دقيقة.

وأسرع طريقة: افتح مستنداً موجوداً واختر ⋮ ← Duplicate document، ثم غيّر المعرّف والرابط فقط.

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

هذا برهانك الوحيد أن البوابة حقيقية. افتح مقالك في نافذة تصفّح متخفّي (Ctrl+Shift+N):
- الزر يظهر بقفل صغير، والضغط يفتح نافذة التسجيل ولا ينزّل شيئاً.
- اضغط Ctrl+U وابحث عن رابط ملفك — يجب ألا تجده.
- بعد التسجيل ينزل الملف تلقائياً.
لو نزل الملف بلا تسجيل
فالقواعد لم تُنشر فعلياً. عد إلى الخطوة العاشرة.

الجزء الخامس: أشكال الأزرار

مجموعة جاهزة تكتبها في محرّر HTML للمقال. اختياري.

كل زرّ يبدأ بالفئة tq-btn، ثم تضيف ما تشاء من الخيارات أدناه. الترتيب لا يهمّ:

<a class="tq-btn btn-outline btn-lg" data-icon="arrow" href="...">تحميل</a>
        الأساس      اللون    المقاس        الأيقونة

الألوان

الثمانية بالترتيب من اليمين

(بلا شيء)	أساسي بلون علامتك — للإجراء الرئيسي
btn-outline	محدَّد بإطار — للإجراء الثانوي بجانب الأساسي
btn-soft	خلفية هادئة — للروابط الأقل أهمية
btn-dark	داكن — للشراء أو الإجراء الحاسم
btn-grad	متدرّج — للعروض المميّزة
btn-green	أخضر — للتأكيد والنجاح
btn-red	أحمر — للتحذير أو الحذف
btn-amber	كهرماني — للتنبيه

تتبع لون علامتك تلقائياً

الأساسي والمحدَّد والهادئ والمتدرّج مشتقّة من لون علامتك. لو غيّرته من المظهر ← تخصيص، تتغيّر هذه الأزرار كلها معه بلا أي تعديل منك.

المقاسات

صغير، عادي، كبير

btn-sm	صغير — داخل فقرة أو لروابط جانبية
(بلا شيء)	عادي
btn-lg	كبير — للإجراء الرئيسي في المقال
btn-block	بعرض السطر كاملاً

الشكل

دائري، حادّ، افتراضي

btn-pill	حواف دائرية
btn-square	زوايا حادّة

الأيقونات

سبع أيقونات ترث لون نصّ الزرّ

data-icon="arrow"	سهم تحميل عريض — للزرّ الرئيسي
data-icon="eye"	عين — للمعاينة
data-icon="cart"	عربة — للشراء
data-icon="download"	سهم داخل صندوق — للحفظ
data-icon="demo"	زرّ تشغيل — للفيديو والتجربة
data-icon="external"	سهم خارجي — لموقع آخر
data-icon="link"	حلقتان — لرابط عام

لا تُبطئ موقعك

الأيقونات مرسومة داخل ملف القالب ولا تُحمَّل من الإنترنت، فلا تضيف أي طلب شبكة. وهي ترث لون نصّ الزرّ تلقائياً، فتظهر بيضاء على الأزرق وزرقاء على المحدَّد.

صفّ من الأزرار

لفّ عدّة أزرار بـ <div class="tq-btns"> فتصطفّ بتباعد منتظم:

معاينة وتحميل وشراء في صفّ واحد

<div class="tq-btns">
  <a class="tq-btn" data-icon="arrow" href="...">تحميل</a>
  <a class="tq-btn btn-outline" data-icon="eye" href="...">معاينة</a>
  <a class="tq-btn btn-dark" data-icon="cart" href="...">شراء</a>
</div>

وعلى شاشات الهاتف تتحوّل تلقائياً إلى أزرار متراصّة بعرض كامل، فلا تتزاحم.

بعرض كامل

زرّ واحد يملأ السطر

<a class="tq-btn btn-block btn-lg" data-icon="arrow" href="...">تحميل الملف</a>

مع بوابة التسجيل

الأشكال تعمل مع طرق الحجب في الجزء الثالث. هكذا يظهر الزرّ لغير المسجّل ثم أثناء التجهيز:

مقفل للزائر، ثم جارٍ التجهيز بعد الضغط

<a class="tq-btn btn-lg" data-icon="arrow" data-tq-file="my-file">تحميل</a>

القفل والحالات تُضاف تلقائياً — لا تكتب شيئاً لها.

حلّ المشكلات

أشهر ما قد يواجهك وسببه المباشر.

ما تراه	السبب والحل
أيقونة التسجيل لا تظهر	المفاتيح فارغة أو فيها `#`، أو البطاقة مخفيّة بالعين، أو لم تحفظ التخطيط. راجعها ثم `Ctrl+F5`.
`auth/unauthorized-domain`	نطاق مدوّنتك غير مضاف في Authorized domains — الخطوة الرابعة.
`auth/invalid-api-key`	خطأ في نسخ `apiKey`. انسخها بزرّ النسخ من Firebase والصقها كاملة.
نافذة جوجل لا تفتح	مانع النوافذ المنبثقة. الأداة تتحوّل تلقائياً لصفحة دخول كاملة — أعد الضغط.
رسالة الرابط لم تصل	تفقّد مجلد الرسائل غير المرغوبة. إن لم تجدها فمفتاح Email link غير مفعّل — الخطوة الثالثة.
يطلب كوداً على الهاتف	تحقّق بخطوتين لحساب جوجل الشخصي للزائر، لا علاقة له بالأداة، ولا يظهر إلا لمن فعّله في حسابه. ومسار الرابط عبر البريد لا يمرّ بجوجل أصلاً.
«هذا الملف غير متاح»	معرّف `data-tq-file` لا يطابق معرّف المستند، أو اسم الحقل ليس `url`، أو المجموعة ليست `downloads`.
زرّ التحميل لا يستجيب	غالباً أضفتَ `href` مع `data-tq-file`. احذف `href`.
الاشتراك في النشرة لا ينجح	النشرة تستخدم نفس المفاتيح. تأكّد منها ومن تفعيل Email link.

قائمة تحقّق سريعة

مشروع Firebase منشأ وتطبيق ويب مسجّل فيه.
طريقة Google مفعّلة مع بريد الدعم.
طريقة Email/Password مفعّلة، ومعها مفتاح Email link.
نطاق مدوّنتك مضاف في Authorized domains.
المفاتيح الأربعة ملصوقة في أداة التخطيط بلا #.
التخطيط محفوظ، والموقع محدّث بـ Ctrl+F5.
أيقونة التسجيل ظاهرة، وجرّبت الدخول بجوجل.
جرّبت الاشتراك في النشرة ووصلتك رسالة التأكيد.
اسم المرسِل في Templates صار اسم موقعك.
للحماية الكاملة فقط: قواعد الأمان منشورة، والاختبار المتخفّي نجح.

تركيب النشرة البريدية باستخدام Google Sheets

خطوات التشغيل (مرّة واحدة لكل مدوّنة)

1) أنشئ نموذج Google:

افتح forms.google.com ← نموذج جديد.
أضِف سؤالاً واحداً: «Email» من نوع إجابة قصيرة + فعّل مطلوب.
تبويب الردود ← أيقونة Sheets الخضراء ← ربط بجدول بيانات.

2) خذ رابط الإرسال ومعرّف الحقل:

من ⋮ أعلى النموذج ← الحصول على رابط معبّأ مسبقاً ← اكتب بريداً تجريبياً ← انسخ الرابط.
خذ منه: FORM_ID وentry.123456789.

3) في بلوجر ← التخطيط ← ودجت النشرة ← تحرير ← حقل المحتوى، الصق:

للمدوّنة الإنجليزية:

<p>Get the latest tools and articles delivered to your inbox every week</p>
<form action="https://docs.google.com/forms/d/e/FORM_ID/formResponse" id="news-form" method="POST">
  <input type="email" name="entry.123456789" placeholder="Enter your email address" required="required" aria-label="Email address"/>
  <button type="submit"><i class="fa-solid fa-paper-plane"></i> Subscribe now</button>
</form>

للمدوّنة العربية (نموذج Google ثانٍ خاص بها):

<p>احصل على أحدث الأدوات والمقالات في بريدك كل أسبوع</p>
<form action="https://docs.google.com/forms/d/e/FORM_ID/formResponse" id="news-form" method="POST">
  <input type="email" name="entry.123456789" placeholder="أدخل بريدك الإلكتروني" required="required" aria-label="البريد الإلكتروني"/>
  <button type="submit"><i class="fa-solid fa-paper-plane"></i> اشترك الآن</button>
</form>

ملاحظة: استبدل FORM_ID و entry.123456789 بقيمك، وتأكد أن الرابط ينتهي بـ formResponse.

نقاط مهمّة:

id="news-form" ضروري — به يلتقط القالب النموذج ويرسله بسلاسة دون مغادرة الصفحة.
جوجل لا يسمح بقراءة نتيجة الإرسال، لذا يعرض القالب «تمّ الاشتراك» بعد الإرسال مباشرة.
تحقّق أول مرّة من وصول البريد إلى الجدول.

اقرأ هذا أولاً

الجزء الأول: تجهيز حسابك في Firebase

أنشئ مشروعاً

انسخ المفاتيح الأربعة

هل هذه المفاتيح سرّية؟

فعّل طريقتَي الدخول

المفتاح الثاني هو الأهم

أضف نطاق مدوّنتك

الجزء الثاني: تفعيل الأداة في القالب

الصق المفاتيح في أداة التخطيط

ثلاث نقاط تمنع أشهر الأخطاء

جرّب

انتهى الأساسي

أين تجد قائمة أعضائك

حدود يجب أن تعرفها

إيقاف الأداة