مكعب تقني

جديد اخبار التقنية والشروحات والدروس في مختلف مجالاتها

آخر الأخبار

جاري التحميل ...

شرح اضافة صندوق اعجابات فيس بوك الى مدونة بلوجر و ووردبريس

هل لديك مدونة على Blogger أو WordPress وتريد أن تسمح للقراء بمتابعتك على Facebook؟ يمكنك إضافة "أعجبني على فيسبوك" (وتسمى أيضًا "صفحة الوظائف الإضافية") إلى مدونتك بطريقة بسيطة للغاية: سيتم استخدامها لتمييز صفحة Facebook الخاصة بك في مدونتك ، للسماح للقراء بمتابعتك بنقرة واحدة على زر "أنا أحب هذه الصفحة".

# 1 - انشاء مربع أعجبني فيسبوك 

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

1. أدخل عنوان صفحتك على Facebook.

2. انتقل إلى هذه الصفحة: قم بإنشاء مكون إضافي لصفحة Facebook (يُطلق على "Like box" الآن المكون الإضافي للصفحة).

3. أكمل المعلومات المطلوبة:


  • عنوان URL لصفحة Facebook: هذا هو عنوان صفحتك.
  • العرض والارتفاع: هذا هو العرض والارتفاع الذي سيحصل عليه صندوق الإعجابات على Facebook بالبكسل. الأمر متروك لك لضبطه وفقًا للسمات التي تستخدمها في مدونتك. لا يزال هناك الحد الأدنى والحد الأقصى للقيم: يجب أن يتراوح العرض بين 180 و 500 بكسل ؛ يجب أن يكون الارتفاع أكبر من 70 بكسل. إذا كنت لا تعرف ما يجب وضعه ، فحدد المربع "التكيف مع عرض مكمل الحاوية" وستحاول صفحة مكمل Facebook التكيف مع عرض المكان الذي توجد فيه.
  • إظهار أوجه الأصدقاء: يمكنك إلغاء تحديد هذا المربع لإظهار فقط صورة ملفك الشخصي لصفحتك وزر الإعجاب أو تحديد المربع إذا كنت تريد عرض بعض الصور لمشجعي Facebook.
  • استخدم رأسًا أصغر: يؤدي تحديد هذا المربع إلى تقليل حجم رأس مربع الإعجاب.
  • إخفاء صورة الغلاف: ستظهر خانة الاختيار هذه صورة الغلاف لصفحة Facebook أو تخفيها في مربع الإعجاب.
قسم "علامات" ليتيح لك ان تختار ما اذا كانت تظهر شيئا إلى جانب زر الفيسبوك ويمكنك  تركت الحقل فارغًا ، فهذا ما يبدو عليه المربع:
Un cuadro de Facebook muy simple como

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

El complemento de la página de Facebook

# 2 - احصل على رمز الزر الذي يعجبني هذه الصفحة

بمجرد الانتهاء من تخصيصاتك ، انقر فوق الزر "Get code" الأزرق ... ولا داعي للذعر عندما ترى الرمز ؛)

يوفر Facebook خيارين لدمج Like Box في مدونتك: نسخ رمزين في مكانين مختلفين من مدونتك ؛ نسخ رمز واحد ، "iframe".

بشكل عام ، فإن طريقة iframe هي الأسهل في تطبيق المدونين المبتدئين ... ولكن في بعض الأحيان يتم حظرها لأسباب أمنية ، خاصة في WordPress. سأعرض لك كلا الطريقتين (JavaScript SDK و iframe) ولكن يجب عليك اختيار واحدة منها.

Integre el complemento de la página de Facebook en un iframe

لذا اترك هذه الصفحة مفتوحة في علامة تبويب في المتصفح الخاص بك وافتح علامة تبويب أخرى حيث ستتصل بمدونتك.

# 3 - اضافة صفحة Facebook في مدونة Blogger (طريقة iframe)

1. لإظهار مكمل صفحة Facebook في Blogger ، انتقل إلى قائمة "التخطيط ": يجب أن يسمح موضوع مدونتك بإضافة الأدوات الذكية إلى طريقة العمل.

2. انقر فوق "إضافة أداة" حيث ترغب في الكشف عن المربع "أعجبني" ، على سبيل المثال في الشريط الجانبي (على جانب المدونة الخاصة بك). 

Agregar un gadget a Blogger

3. اختر HTML / Javascript.
Agregar un gadget HTML / Javascript a Blogger

4. امنح الأداة عنوانًا إذا كنت ترغب في ذلك ، على سبيل المثال ، "اتبعني على Facebook". انها ليست إلزامية.

5. فقط قم بنسخ ولصق كود iframe المقدم من Facebook وحفظه. وهذا كله!

Me gusta Box Facebook en Blogger

# 3 مكرر: ربط ملحق صفحة Facebook عن طريق Facebook SDK بووردبريس

في WordPress ، غالبًا ما يتم حظر عرض iframe افتراضيًا في عناصر واجهة تعامل المستخدم لأسباب أمنية. إذن ، من الأسهل استخدام طريقة Facebook SDK ، والتي تتضمن إضافة جزئين من الكود :)

إنها طريقة بديلة لطريقة iframe ، لذلك يجب عليك اختيار واحدة أو أخرى ، ولكن ليس كلاهما في نفس الوقت!

ربط صفحة الفيسبوك بووردبريس

سنضع كل رمز قدمه Facebook في مكان مختلف.
في ملف رأس الصفحة
اتصل بـ FTP باستخدام عميل FTP الذي تختاره (من المحتمل أنك استخدمته لتثبيت WordPress على موقعك: هناك ، على سبيل المثال ، FileZilla و WinSCP). أدخل مجلد محتوى wp ، ثم مجلد القوالب ثم مجلد  القالب المستعمل في WordPress.

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

يجب أن تجد في مجلد القوالب (أو القوالب الثانوية ) ملفًا يسمى header.php. افتحه وابحث عن السطر الذي يبدأ بـ <body. مباشرة بعد هذا السطر ، انسخ الرمز الأول المقدم من Facebook واحفظ الملف.
El código del cuadro de Me gusta de Facebook - Paso 1

مثل هذا:
Código de Facebook en el encabezado de WordPress

في أداة WordPress
الخطوة الثانية أبسط بكثير: انتقل إلى قائمة  مظهر > Widgets الخاصة لوحة تحكم WordPress. اختر عنصر واجهة مستخدم يسمى "HTML مخصص" على اليسار واسحبه إلى اليمين حيث تريد أن يظهر المكون الإضافي لصفحة Facebook الخاصة بك.

ما عليك سوى نسخ ولصق الرمز الثاني المقدم من Facebook ، وإعطاء عنصر واجهة المستخدم عنوانًا إذا كنت ترغب في ذلك وحفظه!
Integración de código de Facebook en WordPress

هذا هو ما يعطي:
Widget HTML personalizado

في نهاية هاتين الخطوتين ، يجب أن تظهر الوظيفة الإضافية لصفحتك في مدونتك!

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

في قائمة "المظهر" في Blogger
1. قم بتسجيل الدخول إلى حساب Blogger الخاص بك وانقر أولاً على قائمة "المظهر" في العمود الأيمن.

2. انقر فوق "تحرير كود HTML". بعد ذلك ، سيعرض Blogger جميع الشفرات التي تتحكم في عرض مدونتك.

3. في هذا الرمز ، ابحث عن السطر الذي يبدأ بـ <body فقط بعد هذا السطر ، انسخ الرمز الأول الذي يوفره Facebook ، "Javascript SDK" ، مثل هنا:
Javascript SDK Code de Facebook

التحقق من صحة بالنقر فوق الزر "حفظ القالب " البرتقالي في الجزء العلوي من الصفحة.
في قائمة "التخطيط " في Blogger
دعنا ننتقل إلى عرض الرسم البياني أعجبني!

1. انقر فوق قائمة "التخطيط ".

2. انقر فوق "إضافة أداة" حيث تريد ظهور Facebook الخاص بك ، على سبيل المثال في الشريط الجانبي (بجانب مدونتك).
Agregar un gadget a Blogger

3. اختر HTML / Javascript.
Agregar un gadget HTML / Javascript a Blogger
أضف أداة HTML / Javascript إلى Blogger

4. امنح الأداة عنوانًا إذا كنت ترغب في ذلك ، على سبيل المثال ، "اتبعني على Facebook". انها ليست إلزامية.

5. انسخ الرمز الثاني المقدم من Facebook في المربع المتاح.

Ver la página de complementos de Facebook en Blogger

عليك فقط التسجيل وستظهر علامة "أعجبني" على Facebook في مدونة Blogger للسماح للقراء بمتابعتك!

إذا لم تر المكون الإضافي لصفحة Facebook ، فقم بمسح ذاكرة التخزين المؤقت للصفح في بعض الأحيان ، عليك القيام بذلك مرة واحدة أو مرتين حتى تظهر التغييرات.

قد يستغرق الزر "أعجبني هذه الصفحة" بعض الوقت لعرضه إذا كانت صفحتك تحمل العديد من العناصر الخارجية (على سبيل المثال: الإعلانات). كصندوق أعجبني ، يجب أيضًا استرداد العناصر من موقع Facebook ليتم عرضها ، وأحيانًا تظهر متأخرة عند تحميل الصفحة.

كلمة أخيرة لمستخدمي WordPress.com
إذا كان لديك مدونة مجانية على WordPress.com ، فأنت تخطط بالفعل لإضافة مكون إضافي على Facebook. عندما تكون في لوحة المدونة الخاصة بك ، انتقل إلى Appearance> Widgets. على الجانب الأيسر من الصفحة ، حدد عنصر واجهة مستخدم يسمى "امتداد صفحة Facebook".

اسحبه إلى اليمين حيث تريد إظهاره في سمة WordPress الخاصة بك. ثم قم بتخصيص الأداة من خلال منحها عنوانًا إذا كنت ترغب في ذلك ، واستكمال عنوان URL لصفحة Facebook والخيارات التي تختارها:

Widget de Facebook en WordPress.com
فقط احفظ وسترى مربع أعجبني في الموقع المختار!

آمل أن يساعدك هذا المقال في إنشاء تآزر مثير للاهتمام بين مدونتك وصفحة Facebook الخاصة بك!

عن الكاتب

Sabine Berthelot

التعليقات


اتصل بنا

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

جميع الحقوق محفوظة

مكعب تقني