5 طرق سهلة لتثبيت بطاقات Twitter على موقع الويب الخاص بك

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

هذه بطاقة Twitter. على وجه التحديد ، إنها بطاقة ملخص موقع الويب ، وهي واحدة من عدة أنواع من بطاقات Twitter التي يمكن دمجها في موقع ويب. ما هي الأنواع الأخرى الموجودة؟

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

كانت بطاقات Twitter أكثر تعقيدًا. كانت هناك أنواع معينة من البطاقات لمعارض الصور والمنتجات وبعض الخيارات الأخرى ، لكن Twitter أزالها منذ ذلك الحين. إذا كنت تريد بعض الحنين إلى الماضي ، يمكنك أن ترى كيف بدوا هنا ، فقط لا تلتصق كثيرًا ؛ لا يمكنك صنعها اليوم.

أساسيات بطاقات تويتر

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

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

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

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

1: WordPress

ربما يكون WordPress هو أسهل نظام أساسي لتطبيق بطاقات Twitter ، نظرًا لوجود العديد من الطرق المختلفة للقيام بذلك ، بما في ذلك الطريقة المضمنة تقريبًا.

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

إذا كنت لا ترغب في استخدام المكون الإضافي الرسمي Twitter ، أو إذا كنت مستضافًا على WordPress.com ، فيمكنك استخدام Jetpack. في Jetpack ، تريد العثور على قسم المشاركة وتكوينه. سيكون هناك قسم Twitter ، حيث تفوض حساب Twitter الخاص بك إلى موقع الويب الخاص بك.

الخيار الثالث هو استخدام المكون الإضافي JM Twitter Cards. يضيف هذا المكون الإضافي ، بواسطة Julien Maury ، توافق بطاقة Twitter مع بعض الإعدادات الأساسية. يمكنك اختيار جعلها تستخدم الصورة الأولى على صفحتك بدلاً من صورة مميزة ، ويمكنك معاينة عرض بطاقة Twitter الخاصة بك ، ويمكنك تخصيص البطاقة لكل منشور عند إنشاء المنشور. لتكوين المكون الإضافي ، انتقل إلى الشريط الجانبي وانقر على لوحة البرنامج المساعد في لوحة تحكم المسؤول. اختر نوع البطاقة واملأ باقي المربعات بحسابك على Twitter وحساب موقعك وطول الوصف وأي شيء آخر تريد إضافته.

إذا لم يكن أي من هؤلاء يناسب احتياجاتك ، أو إذا كان لديك بالفعل ، فإن WordPress SEO من Yoast يتعامل أيضًا مع بطاقات Twitter. في لوحة الإدارة ، انتقل إلى SEO وانقر فوق قسم Social. هناك علامة تبويب Twitter ، حيث يمكنك إضافة اسم مستخدم Twitter الخاص بك إلى المربع. لسوء الحظ ، آخر مرة قرأتها ، يدعم Yoast بطاقات الملخص فقط ؛ تحتاج إلى مكونات إضافية أكثر تقدمًا إذا كنت تريد أنواعًا أخرى من البطاقات.

2: نعرفكم

Tumblr هي منصة تدوين شهيرة بشكل مدهش لا يدرك الكثير من الناس أنها أصبحت غزيرة الإنتاج كما هي. تمتد شبكة Tumblr إلى ما هو أبعد من المدونات التي تم تمييزها بـ .tumblr.com ؛ في الواقع ، تستخدم بعض مواقع الأسماء الكبيرة Tumblr كبنية أساسية. بمجرد أن يكون لديك مجال مخصص عليه ، فإنه يشبه أي بنية خلفية أخرى. أو هو؟

الحقيقة هي أن بنية Tumblr ليست واسعة النطاق أو قابلة للتخصيص مثل شيء مثل WordPress. سيتعين عليك استخدام بعض الرموز المخصصة من أجل تنفيذ بطاقات Twitter المخصصة والمخصصة على مدونتك. يمكنك قراءة الكود والوصف وراءه هنا ، في الإجابة التي قدمها Dan Leveille على Quora.

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

3: مدون

يأتي تثبيت بطاقات Twitter على مدونة Blogger في القالب الخاص بك. سأقدم لك إرشادات عامة ، ولكن إذا كان قالب موقعك يختلف كثيرًا عن المعتاد ، فسيتعين عليك اكتشافه بنفسك بناءً على القرائن التي قدمتها لك.

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

بعد ذلك ، انقر فوق الزر "تحرير HTML" أسفل المعاينة المباشرة لقالب مدونتك. داخل هذا الرمز ، قم بإجراء بحث عن "<b: include id = 'post' var = 'post'>”. احتفظ بهذا السطر في مكانه ، ولكن الصق التالي أسفله مباشرةً:


<meta content='summary' name='twitter:card'/>
<meta content='@yourname' name='twitter:site'/>
<meta content='@yourname' name='twitter:creator'/>
<meta content='www.yoursite.com' name='twitter:domain'/>
<meta expr:content='data:post.firstImageUrl' name='twitter:image:src'/>
<meta expr:content='data:post.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<meta expr:content='data:post.sharePostUrl' name='twitter:url'/>


من الواضح أنك ستحتاج إلى تعديل البيانات أعلاه بنفسك. قم بتغيير اسمyourname إلى اسم مستخدم Twitter الخاص بك ، وقم بتغيير www.yoursite.com إلى عنوان URL لموقعك ، وتأكد من دقته.

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

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

4: جملة

تشترك Joomla كثيرًا مع WordPress ، بقدر ما تكون CMS مع التركيز على التخصيص عبر الإضافات بدلاً من نظام أساسي محدود مع تحسينات تجميلية مثل Tumblr أو Blogger. على هذا النحو ، هناك عدد قليل من الطرق المختلفة التي يمكنك من خلالها تنفيذ بطاقات Twitter باستخدام امتدادات Joomla المختلفة.

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

الخيار الثاني هو الامتداد الاحترافي Open Graph و Twitter Card Tags. إنه امتداد أكثر قوة يضيف علامات لكل من Twitter و Facebook. يحتوي على الكثير من خيارات التخصيص لاختيار الصور والبيانات المحددة التي تريدها لمنشوراتك. يعد تكامل Open Graph مع Facebook رائعًا ، بالإضافة إلى أنه يضيف بيانات وصفية إضافية لكل من Twitter و Google عندما يطرقان. الجانب السلبي الوحيد ، كامتداد احترافي ، هذا سيكلفك. إنها رخيصة ، رغم ذلك ؛ فقط 7 يورو للترخيص. يمكنك شراء دعم إضافي إذا أردت ، ولكن لنكن صادقين ؛ هذه مجرد بيانات وصفية ، إنها وظيفة نسخ ولصق مجيدة للأشخاص الخائفين من الكود. لا تحتاج إلى دعم.

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

أخيرًا ، بالطبع ، يمكنك استخدام الطريقة أدناه أو الموضحة في هذا المنشور لتنفيذها يدويًا.

5: أنظمة إدارة المحتوى المخصص

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

لا تنس تخصيص العلامات. العناصر الرئيسية التي تحتاج إلى الانتباه إليها هي البطاقات ، والموقع ، والمنشئ ، وعلامات المجال. يجب ملؤها بنوع البطاقة التي تريدها ، ومعرف Twitter لموقعك ومنشئ المحتوى وعنوان URL لمجالك. ثم تحقق من صحة البطاقة بمجرد تنفيذ التغييرات.

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