أضافت جوجل طريقة جديدة تتيح لأصحاب المواقع إضافة زر تفاعلي مباشرة إلى صفحاتهم، بحيث يستطيع القارئ اختيار الموقع كمصدر مفضّل في بحث جوجل، ثم العودة إلى الصفحة التي كان يتصفحها.
التحديث الجديد يقدّم أكثر من طريقة للتنفيذ، تبدأ من إضافة زر جاهز بسطرين فقط إلى HTML، وصولا إلى إنشاء زر بتصميم خاص وربطه برمجيا بواجهة اختيار المصادر المفضّلة. كما أبقت جوجل على طريقة الرابط المباشر للمواقع التي لا تستطيع استخدام JavaScript.
في هذا الدليل سنشرح جميع الطرق التي ذكرتها جوجل، مع الأكواد وطريقة استخدامها.
قبل إضافة الزر إلى موقعك
توضح جوجل أن موقعك يجب أن يظهر أولا في أداة اختيار المصادر المفضّلة. يمكنك اختبار ذلك من خلال البحث عن نطاق موقعك داخل أداة المصادر المفضّلة.
كما أن الميزة تدعم المواقع على مستوى النطاق أو النطاق الفرعي، مثل:
https://example.com/أو:
https://news.example.com/لكن لا يمكن استخدام مجلد فرعي باعتباره مصدرا مفضّلا مستقلا، مثل:
https://example.com/blogبعد التأكد من ظهور موقعك في أداة المصادر المفضّلة، يمكنك اختيار إحدى طرق التنفيذ التالية.
الطريقة الأولى: إضافة زر جوجل الجاهز
هذه هي الطريقة التي توصي بها جوجل، وهي الأبسط بالنسبة لمعظم أصحاب المواقع.
تحتاج أولا إلى إضافة مكتبة Preferred Sources إلى موقعك. أضف الكود التالي، ويفضّل وضعه داخل عنصر <head>:
<script async src="https://news.google.com/swg/js/v1/publisher.js"></script>بعد ذلك، ضع هذا العنصر في المكان الذي تريد ظهور الزر فيه داخل الصفحة:
<div google-add-preferred-source-btn></div>بمجرد إضافة هذين السطرين، ستبحث مكتبة جوجل تلقائيا عن العناصر التي تحتوي على الخاصية google-add-preferred-source-btn، ثم تعرض زر المصادر المفضّلة داخلها.
ميزة هذه الطريقة أنك لا تحتاج إلى إنشاء الزر بنفسك أو كتابة JavaScript إضافي لتشغيله. جوجل تتولى إنشاء الزر والتعامل مع عملية اختيار الموقع كمصدر مفضّل.
وضع الزر في أي مكان داخل الصفحة
يمكنك وضع عنصر الزر في أي مكان مناسب داخل محتوى الصفحة. على سبيل المثال:
<article>
<p>محتوى المقال هنا...</p>
<div google-add-preferred-source-btn></div>
</article>أو داخل منطقة مخصصة في الشريط الجانبي:
<aside>
<h3>تابع موقعنا في بحث جوجل</h3>
<div google-add-preferred-source-btn></div>
</aside>المهم هو أن تكون مكتبة جوجل قد تم تحميلها في الصفحة، وأن يحتوي المكان الذي تريد ظهور الزر فيه على الخاصية التالية:
google-add-preferred-source-btnتخصيص مظهر الزر بين الوضع الفاتح والداكن
يظهر الزر افتراضيا بالمظهر الفاتح، لكن جوجل تتيح تغيير المظهر إلى الوضع الداكن.
للقيام بذلك، أضف الخاصية data-theme إلى عنصر الزر.
لاستخدام المظهر الداكن:
<div google-add-preferred-source-btn data-theme="dark"></div>ولاستخدام المظهر الفاتح:
<div google-add-preferred-source-btn data-theme="light"></div>يمكن أن يكون هذا الخيار مفيدا إذا كان الزر سيظهر داخل منطقة ذات خلفية داكنة أو فاتحة، بحيث يكون متناسقا مع تصميم الموقع.
تغيير لغة الزر يدويا
بشكل افتراضي، يعرض زر المصادر المفضّلة النص باللغة التي يحددها المستخدم في إعدادات متصفحه.
لكن إذا أردت فرض لغة معينة للزر، يمكنك استخدام الخاصية:
data-langمثلا، لعرض الزر باللغة الإنجليزية:
<div google-add-preferred-source-btn data-lang="en"></div>وتتيح جوجل استخدام رموز اللغات المدعومة الخاصة بهذه الميزة.
يمكنك أيضا الجمع بين اختيار المظهر واللغة في العنصر نفسه:
<div
google-add-preferred-source-btn
data-theme="dark"
data-lang="en">
</div>بهذه الطريقة سيظهر الزر بالمظهر الداكن وباللغة الإنجليزية، بدلا من الاعتماد على اللغة التي يختارها المتصفح تلقائيا.
الطريقة الثانية: استخدام تصميمك الخاص مع JavaScript
إذا لم ترغب في استخدام تصميم الزر الذي تنشئه جوجل تلقائيا، يمكنك إنشاء زر بتصميمك الخاص، ثم ربطه بعملية إضافة الموقع إلى المصادر المفضّلة.
هذه الطريقة لا تغيّر تجربة المستخدم الأساسية التي توفرها جوجل، لكنها تمنحك تحكما أكبر في شكل العنصر الذي يبدأ العملية.
على سبيل المثال، يمكنك إنشاء زر عادي:
<button id="myButton">
أضف موقعنا إلى المصادر المفضّلة
</button>بعد ذلك، تستخدم مكتبة Preferred Sources لتشغيل العملية عند نقر المستخدم على الزر.
جوجل توفر طريقتين للتنفيذ: استخدام ES Modules أو استخدام <script> التقليدي مع قائمة الاستدعاءات.
استخدام ES Modules
هذه الطريقة مناسبة للمشاريع الحديثة التي تستخدم الوحدات البرمجية Modules.
أولا، استورد مكتبة Preferred Sources:
import { preferredSource } from
"https://news.google.com/swg/js/v1/publisher.mjs";بعد ذلك، قم بتهيئة المكتبة:
preferredSource.init({
theme: 'light',
lang: 'en'
});الخيار theme يسمح لك باختيار المظهر، ويمكن أن تكون قيمته:
lightأو:
darkأما الخيار lang فيسمح بتحديد اللغة.
بعد تهيئة المكتبة، اربط الزر بالدالة addPreferredSource():
const button = document.querySelector('#myButton');
button.onclick = () => {
preferredSource.addPreferredSource();
};وبذلك يصبح المثال كاملا على الشكل التالي:
<button id="myButton">
أضف موقعنا إلى المصادر المفضّلة
</button>
<script type="module">
import { preferredSource } from
"https://news.google.com/swg/js/v1/publisher.mjs";
preferredSource.init({
theme: 'light',
lang: 'en'
});
const button = document.querySelector('#myButton');
button.onclick = () => {
preferredSource.addPreferredSource();
};
</script>عند نقر المستخدم على الزر الذي صممته بنفسك، ستبدأ عملية إضافة الموقع كمصدر مفضّل.
استخدام التصميم المخصص مع <script> التقليدي
إذا كان موقعك لا يستخدم ES Modules، تتيح جوجل طريقة أخرى تعتمد على تحميل المكتبة من خلال عنصر <script>.
في هذه الحالة، يجب أولا إضافة الخاصية التالية إلى السكربت:
preferred-sources-control="manual"ويكون الكود:
<script
async
preferred-sources-control="manual"
src="https://news.google.com/swg/js/v1/publisher.js">
</script>وجود:
preferred-sources-control="manual"مهم هنا لأنه يخبر المكتبة بأنك تريد التحكم في تشغيلها يدويا.
وتوضح جوجل أنه إذا لم تضف هذه الخاصية، فستبحث المكتبة تلقائيا عن العناصر التي تحتوي على:
google-add-preferred-source-btnوستقوم بتهيئتها مباشرة.
بعد تحميل المكتبة، يمكنك استخدام قائمة الاستدعاءات العامة PREFERRED_SOURCE لتهيئة الخيارات وربط الزر الخاص بك بالعملية.
مثال كامل:
<button id="myButton">
أضف موقعنا إلى المصادر المفضّلة
</button>
<script
async
preferred-sources-control="manual"
src="https://news.google.com/swg/js/v1/publisher.js">
</script>
<script>
(self.PREFERRED_SOURCE = self.PREFERRED_SOURCE || []).push(
function(preferredSource) {
preferredSource.init({
theme: 'light',
lang: 'en'
});
const button = document.querySelector('#myButton');
button.addEventListener('click', () => {
preferredSource.addPreferredSource();
});
}
);
</script>في هذا المثال، أنشأنا زرنا الخاص، ثم انتظرنا تهيئة مكتبة جوجل، وبعد ذلك ربطنا النقر على الزر بالدالة:
preferredSource.addPreferredSource();وهذه الدالة هي التي تبدأ عملية إضافة الموقع إلى المصادر المفضّلة.
الفرق بين الوضع التلقائي والوضع اليدوي
عند استخدام مكتبة جوجل بدون تحديد:
preferred-sources-control="manual"تعمل المكتبة في الوضع التلقائي. وهذا يعني أنها تبحث عن العناصر التي تحتوي على:
google-add-preferred-source-btnثم تعرض زر جوجل القياسي تلقائيا.
أما عند استخدام:
preferred-sources-control="manual"فأنت تمنع هذه التهيئة التلقائية، وتصبح مسؤولا عن تشغيل المكتبة وربطها بعناصر موقعك بنفسك.
ببساطة، الوضع التلقائي مناسب عندما تريد زر جوجل الجاهز، بينما الوضع اليدوي مناسب عندما تريد استخدام تصميمك الخاص والتحكم في وقت وطريقة تشغيل عملية إضافة المصدر المفضّل.
الطريقة الثالثة: استخدام رابط مباشر
إذا كان موقعك لا يسمح بإضافة JavaScript، فما زال بإمكانك توجيه المستخدم إلى صفحة اختيار المصادر المفضّلة من خلال رابط مباشر.
الصيغة التي تحددها جوجل هي:
https://www.google.com/preferences/source?q=Your_Website's_URLتستبدل Your_Website's_URL بعنوان موقعك.
مثلا، إذا كان موقعك هو:
https://example.comيمكنك إنشاء الرابط التالي:
https://www.google.com/preferences/source?q=example.comثم استخدامه داخل رابط نصي:
<a href="https://www.google.com/preferences/source?q=example.com">
أضف موقعنا إلى المصادر المفضّلة
</a>عند النقر على الرابط، ينتقل المستخدم إلى أداة تفضيلات المصادر في جوجل، حيث يمكنه إضافة الموقع كمصدر مفضّل.
استخدام صورة قابلة للنقر بدلا من رابط نصي
يمكنك أيضا استخدام صورة أو زر قمت بتصميمه بنفسك وربطه بالرابط المباشر.
مثال:
<a
href="https://www.google.com/preferences/source?q=example.com">
<img
src="path/to/your/button.png"
alt="أضف الموقع إلى المصادر المفضّلة">
</a>في هذا المثال، عندما ينقر المستخدم على الصورة، ينتقل إلى صفحة اختيار المصادر المفضّلة.
هذه الطريقة مناسبة للمواقع التي لا تستطيع تحميل مكتبة JavaScript الخاصة بجوجل، لكنها تختلف عن الزر التفاعلي الجديد لأن المستخدم ينتقل إلى صفحة أداة المصادر المفضّلة بدلا من تنفيذ العملية عبر التجربة التفاعلية الجديدة التي أضافتها جوجل.
أي طريقة يجب أن تستخدم؟
إذا كان بإمكانك إضافة JavaScript إلى موقعك، فإن الطريقة القياسية التي تستخدم الزر التلقائي هي الخيار الذي توصي به جوجل. تحتاج فقط إلى تحميل المكتبة ثم إضافة عنصر الزر في المكان المناسب.
إذا كنت تريد الاحتفاظ بتصميم موقعك واستخدام زر من تصميمك الخاص، يمكنك استخدام التنفيذ المتقدم، سواء عبر ES Modules أو عبر <script> التقليدي مع PREFERRED_SOURCE.
أما إذا كان نظام إدارة المحتوى الذي تستخدمه لا يسمح بإضافة JavaScript، فيمكنك الاعتماد على الرابط المباشر ووضعه داخل نص أو زر أو صورة قابلة للنقر.
عمليا، أصبحت جوجل توفر الآن ثلاث مستويات مختلفة من التنفيذ: أبسطها زر جاهز لا يحتاج إلا إلى سطرين، ثم تنفيذ متقدم يمنح المطور تحكما برمجيا أكبر، وأخيرا الرابط المباشر للمواقع التي لا تستطيع استخدام JavaScript.
لذلك، لا تحتاج إلى بناء عملية معقدة بنفسك. يمكنك اختيار الطريقة التي تناسب الإمكانيات التقنية لموقعك، ثم وضع الدعوة إلى اختيار الموقع كمصدر مفضّل في المكان المناسب داخل تجربة المستخدم.
