آموزش استفاده و اضافه کردن کارت های توئیتر به وبلاگ، با پلاگین و بدون پلاگین

[P R O]

​

Twitter Cards چیست؟
اگر عضو توئیتر باشین، احتمالا Twitter Cards به گوش تون خورده یا استفاده از اون رو توی توئیت ها دیدین.

Twitter Cards به شما کمک می کنه وقتی لینکی از شما توی توئیتر منتشر میشه، این لینک با پیش نمایشی که مد نظر شما هست دیده بشه. مثل چیزی که در فیسبوک وجود داره و زمانی که شما یک لینک رو منتشر می کنید فیسبوک عنوان و توضیحات و احتمالا یک عکس از لینک رو به نمایش درمیاره.

توی این نوشته مختصراً میگیم برای اضافه کردن این قابلیت به وردپرس یا هر سیستم مدیریت محتوایی باید چکار کنید.

Twitter Cards چگونه کار می‌کند؟
در توئیتر با کلیک روی هر توئیت، شما می توانید اطلاعات کلی توئیت شامل favorite و retweet ها رو ببینید، اگر توئیت شامل لینک باشه توئیتر زمان درج لینک بررسی میکنه آیا این وب سایت کدهای شناسایی لازم برای پیشنمایش رو داره یا خیر (این کد ها متا تگ هستند). اگر داشته باشه به خلاصه (summary) توئیت این موارد رو اضافه می‌کنه. البته کارت های توئیتر انواع مختلفی دارن و ما در این روش، حالت معمول و رایج استفاده از کارت های توئیتر برای وبلاگ علی الخصوص وردپرس رو بررسی می کنیم.

چرا استفاده از Twitter Cards مفید است؟
تصور کنید قبل از آنکه کاربران دنبال کننده ی شما بخواهند روی لینک کلیک کنند، پیش نمایش و مختصر توضیحی از آنچه که شما نوشتید رو ببینن. مطمئناً این روی شناخت بیشتر و بهتر وبلاگ شما و حتی حساب توئیتر شما موثره. زیرا روی هر پیشنمایش لینک به پروفایل شما در توئیتر و درصورت به کار گیری صحیح از این امکانات، عکس نوشته ی شما نیز روی این summary درچ میشه.

خب بدیهی هست کارت های توئیتر ، مزیت های دیگه ای هم دارن. مثلاً شما دیگه نیازی نیست توئیت خودتون رو برای توضیح مطلب و محتوای اون پر کنید، می تونید این کار رو به بهترین شکل ممکن به کارت های توئیتر بسپارین.

مثلاً وقتی لینکی از شما روی توئیتر منتشر بشه، مثل این میشه:

توی تصویر بالا همونطور که می بینید، توئیتر به خوبی المان های صفحه رو دریافت کرده و توی summary توئیت قرار داده.

پس اگر وبلاگ دارید حتماً همین الان جهت فعال سازی کارت های توئیتر اقدام کنید.

چگونه از Twitter Cards در وردپرس یا هر CMS دیگری استفاده کنیم؟
شما برای اضافه کردن این قابلیت به وردپرس خودتون چندین راه دارید.

روش استفاده از پلاگین
یک پیشنهاد ساده، اضافه کردن کارت ها با پلاگین WordPress SEO :

اگر پلاگین وردپرس سئو رو نصب کردید، این پلاگین در بخش social (به پارسی: اجتماعی) خودش این امکان رو خیلی راحت اضافه میکنه به وبلاگ شما.

لازمه برای این کار به منوی اجتماعی وارد بشین، و از سربرگ ها، توئیتر رو انتخاب کنید، و تیک Add Twitter card meta data رو فعال کنید.

نام کاربری خودتون رو هم وارد کنید و فرم رو تایید کنید.

خب کار اضافه کردن کد های متا به پایان رسید !

البته افزونه های دیگه ای هم هستن برای این کار مثل :

JM Twitter Cards – Twitter Cards Meta – Twitter Cards

بسته به تنظیمات و ساختار وبلاگ و وب سایت خودتون می تونید از پلاگین ها استفاده کنید. مثلاً اگر شما تصاویر مطالب رو با زمینه دلخواه یا تصویر شاخص اضافه می کنید و یا از چارچوب های غیر معمول تری استفاده کردید ، می تونید با بررسی پلاگین های ذکر شده به نتیجه دلخواه خودتون دست پیدا کنید.

البته نا گفته نمونه که توئیتر چند روز پیش پلاگین رسمی خودش رو برای وردپرس نوشته، این پلاگین علاوه بر کارت ها قابلیت های دیگه ای هم به شما میده و اگر میخواین فرا تر از کارت ها با توئیتر مچ بشین و سرور شما هم از php 5.4 پشتیبانی میکنه، می تونین از این پلاگین استفاده کنید. البته این پلاگین ورژن اولش هست و شاید برای استفاده به مشکلاتی برخورد کنید، روش پیشنهادی من که خودم هم از همین استفاده کردم، کارت ها رو با پلاگین وردپرس سئو اضافه کردم.

روش بدون پلاگین
استفاده از قطعه کد زیر درون تگ head وبلاگ :

<?php
# Source: Ryan Cullen @artesea
if(is_single() || is_page()) {
  $twitter_url  = get_permalink();
$twitter_title  = get_the_title();
$twitter_desc  = get_the_excerpt();
  $twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );
  $twitter_thumb  = $twitter_thumbs[0];
  if(!$twitter_thumb) {
  $twitter_thumb = 'http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75';
  }
  $twitter_name  = str_replace('@', '', get_the_author_meta('twitter'));
?>
<meta name="twitter:card" value="summary" />
<meta name="twitter:url" value="<?php echo $twitter_url; ?>" />
<meta name="twitter:title" value="<?php echo $twitter_title; ?>" />
<meta name="twitter:description" value="<?php echo $twitter_desc; ?>" />
<meta name="twitter:image" value="<?php echo $twitter_thumb; ?>" />
<meta name="twitter:site" value="@farzadpro" />
<?
  if($twitter_name) {
?>
<meta name="twitter:creator" value="@<?php echo $twitter_name; ?>" />
<?
  }
}
?>

توجه: در کد بالا نام کاربری خودتون رو بجای farzadpro قرار بدید.

اگر وردپرسی نیستید
بسته به کد نویسی cms شما باید تگ های متای کارت توئیتر رو اضافه کنین. نمونه این تگ های متا رو می تونید زیر همین بند مشاهده کنید.

خب تا اینجا کد ها رو با موفقیت اضافه کردید (این رو با بررسی سورس وبلاگ تون چک کنین و مطمئن بشین)

برای مثال این سورس یه همچین کدی باید بشه :

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />
<meta name="twitter:url" content="https://www.flickr.com/photos/unicphoto/sets/72157645001703785/" />

twitter:card مشخص میکنه که نوع کارت چی هست. site ، اکانت شما در توئیتر رو مشخص میکنه، title اسم مطلب و description توضیح مطلب ، image آدرس عکس مطلب و نهایتاً url لینک مطلب شما رو مشخص میکنه.


اما صبر کنید! الان نوبت تایید وبلاگ تون با اکانت اصلی خود شماست.

تایید کردن دامنه و پیش نمایش از کارت های توئیتر اضافه شده
تا اینجا شما فقط کد های کارت رو به وبلاگ تون اضافه کردید، ولی منتظر نباشید که کارت ها نمایش داده بشن.

باید دامنه ی خودتون رو توی توئیتر ثبت کنید تا پس از تایید این ویژگی فعال بشه ، خوشبختانه گرفتن تایید زیاد طول نمیکشه.

برای شروع وارد این آدرس بشین.

توی فیلد Card URL آدرس وبلاگ یا یک پست از وبلاگ تون رو وارد کنید. روی دکمه پیش نمایش کلیک کنید.

اگر مراحل رو صحیح طی کرده باشید و کد ها درست کار کنند ، باید با یه همچین چیزی مواجه بشین : (بجز تایید شدن دامنه تون)

اگر توی قسمت log با ارور مواجه شدید، خودتون بصورت دستی سورس صفحه رو بررسی کنین ببینید آیا به درستی کد ها اضافه شدند یا خیر.

البته برای وبلاگ من که تایید شده زیر دکمه ی پیش نمایش این رو نوشته :

*.farzad.pro is whitelisted for summary card
برای دامنه وبلاگ شما، نیاز به تایید داره و اگر دامنه تون رو تایید نکرده باشید با یه گزینه مثل این مواجه شدید :

روی دکمه ی Request Approval کلیک کنید ، یک فرم برای شما نمایش داده میشه که باید فیلد ها رو با دقت پر کنید، این فیلد ها شامل یک توضیح مختصر از وبلاگ شما، نام و جزئیات کاربری شما و… هست. توجه داشته باشید که باید با اکانت خودتون که در وب سایت و کد ها وارد شده ثبت کنید.

بعد از ثبت این فرم توئیتر بعد از مدتی (که معمولاً زیاد زمان بر نیست) درخواست شما رو بررسی میکنه و احتمالا برای تایید وبلاگ شما اقدام میکنه : )

خب تبریک میگم، مراحل رو با موفقیت به پایان رسوندید.

اگر در مراحل بالا به مشکلی برخورد کردید اعلام کنین شاید بتونم کمکی کنم.

منبع مطلب : وبلاگ شخصی خودم ​