إظهار صورة وملخص روابط مدونة بلوجر على تويتر

إظهار صورة وملخص روابط مدونة بلوجر على تويتر

إظهار صورة وملخص روابط مدونة بلوجر على تويتر

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

لتركيب الاضافة على مدونات بلوجر:

  1. إذهب إلى لوحة تحكم بلوجر ثم اختر تبويب "قالب"
  2. قم بتحرير قالب بعد الاحتفاظ بنسخة احتياطية منه.
  3. قم بالبحث عن الوسوم <head> ثم اضف الكود التالى بعده مباشرة
  1. <!-- twitter card details -->
  1. <meta expr:content='data:blog.title' name='twitter:site'/>
  1. <b:if cond='data:blog.url == data:blog.homepageUrl'>
  1. <meta expr:content='data:blog.title' name='twitter:title'/>
  1. <b:if cond='data:blog.metaDescription'>
  1. <meta expr:content='data:blog.metaDescription' property='og:description'/>
  1. <b:else/>
  1. <meta expr:content='&quot;إقرأ المزيد &quot; + data:blog.pageTitle + &quot; &quot;' property='og:description'/>
  1. </b:if>
  1. </b:if>
  1. <b:if cond='data:blog.pageType == &quot;item&quot;'>
  1. <meta expr:content='data:blog.pageName' name='twitter:title'/>
  1. <b:if cond='data:blog.metaDescription'>
  1. <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
  1. <b:else/>
  1. <meta expr:content='&quot;إقرأ المزيد &quot; + data:blog.pageName + &quot; مدونة فوتوماكس &quot; + data:blog.title + &quot;&quot;' name='twitter:description'/>
  1. </b:if>
  1. </b:if>
  1. <b:if cond='data:blog.postImageUrl'>
  1. <meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
  1. <b:else/>
  1. <b:if cond='data:blog.postImageThumbnailUrl'>
  1. <meta expr:content='data:blog.postThumbnailUrl' name='twitter:image:src'/>
  1. <b:else/>
  1. <meta content='https://3.bp.blogspot.com/-5kb8eQQC5_I/Wgy79Q0jYCI/AAAAAAAABaA/A3cPsi_qk7cMzqJXfDYyZYVF1NdOTkL7QCK4BGAYYCw/s1600/logo.png' name='twitter:image:src'/>
  1. </b:if>
  1. </b:if>
  1. <meta content='summary_large_image' name='twitter:card'/>
  1. <meta content='@photoomax' name='twitter:creator'/>
  1. <!-- end twitter card details -->


  1. إستبدل @photoomax بإسم المستخدم الخاص بحسابك على تويتر.
  2. إستبدل رابط شعار الموقع الملون باللون الأخضر برابط شعار موقعك
  3. إستبدل عنوان الموقع الملون باللون الأزرق بعنوان موقعك.
  4. يمكن إختبار الكود من خلال هذا الموقع Card validatorومعرفة إذا كان يعمل بشكل صحيح أم لا

كن داعيا للخير

ليست هناك تعليقات