هيلبرنت | Helpernt - [blogger] طريقة إظهار صورة وملخص روابط مدونة بلوجر على تويتر Twitter Card

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

طريقة تركيب إضافة Twitter Card على مدونة بلوجر :

إذهب إلى لوحة التحكم بلوجر
ثم إختار القالب
ثم إضغط على تحرير HTML
إبحث عن وسم </head> ثم أضف الكود التالي فوقه

كود:

<!-- twitter card details -->

<meta expr:content='data:blog.title' name='twitter:site'/> 

<b:if cond='data:blog.url == data:blog.homepageUrl'> <meta expr:content='data:blog.title' name='twitter:title'/> 

<b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' property='og:description'/> 

<b:else/> 

<meta expr:content='&quot;إقرأ المزيد &quot; + data:blog.pageTitle + &quot; &quot;' property='og:description'/> 

</b:if> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> 

<meta expr:content='data:blog.pageName' name='twitter:title'/> <b:if cond='data:blog.metaDescription'> 

<meta expr:content='data:blog.metaDescription' name='twitter:description'/> <b:else/> 

<meta expr:content='&quot;إقرأ المزيد &quot; + data:blog.pageName + &quot; عقول للمعلوميات &quot; + data:blog.title + &quot;&quot;' name='twitter:description'/> 

</b:if> </b:if> 

<b:if cond='data:blog.postImageUrl'> <meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/> <b:else/> 

<b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postThumbnailUrl' name='twitter:image:src'/> <b:else/> 

<meta content='http://1.bp.blogspot.com/-PIwSYKYP_KU/V5-P0uEZK_I/AAAAAAAAEJY/WmjwpvgflVADTqDctWYwpCTwuZE7MYYAQCK4B/s1600/cooltext197357456066847.png' name='twitter:image:src'/> </b:if> </b:if> 

<meta content='summary_large_image' name='twitter:card'/> 

<meta content='@ChafikOuadine' name='twitter:creator'/>

<!-- end twitter card details -->

تنسيقات
إستبدل ChafikOuadine@ بإسم المستخدم لحسابك على تويتر
إستبدل رابط شعار المدونة الملون بالأزرق برابط شعار مدونتك

عند إضافة كود Twitter Card يمكنك إختبار المواضيع من خلال أداة Card validator التي يوفرها موقع تويتر للتأكد إن كان كل شيء يضهر بشكل صحيح .

الشكل بعد اضافة الكود
شاهد الان كيف تظهر المواضيع التي يتم نشرتها على موقع تويتر :