آموزش اضافه کردن Facebook Open Graph به قالب های وردپرس

اگر با مشکل عدم استفاده فیس بوک از تصویر بندانگشتی و عنوان صحیح نوشته های به اشتراک گذاشته خود روبرو هستید، در این آموزش یاد خواهید گرفت که چگونه facebook open graph meta را به قالب سایت وردپرس خود اضافه کنید تا تمام این مشکلات مرتفع شود.

برای انجام این کار دو روش وجود دارد. یک روش نیازمند نصب افزونه و روش دیگر مناسب کاربرانی است که مشکلی با ویرایش کدهای قالب سایت خود ندارند.

اضافه کردن Facebook Open Graph با استفاده از افزونه سئو Yoast

برای این کار ابتدا شما باید افزونه Yoast SEO را نصب و فعال کنید. برای دریافت این افزونه می توانید از لینکی که در پایین همین مطلب قرار داده شده است استفاده کنید.

در صورتیکه با نصب افزونه در وردپرس آشنا نیستید، می توانید مقاله “سه روش مختلف نصب پلاگین (افزونه) در وردپرس” را مطالعه کنید.

بعد از نصب و فعالسازی افزونه، به مسیر سئو » اجتماعی رفته و بر روی تب فیس بوک در صفحه مذکور کلیک کنید. بعد از آن از قسمت افزودن داده متای Open Graph بر روی گزینه فعال شده کلیک کنید.

شما می توانید تنظیمات مربوط به این بخش را ذخیره کرده یا ادامه داده و دیگر تنظیمات مربوط به فیس بوک را نیز انجام دهید. شما می توانید سایت وردپرس خود را به حساب کاربری فیس بوک خود متصل کنید. از این طریق میتوانید آمار فیس بوک مربوط به سایت خود را مشاهده کنید. شما همچنین می توانید آدرس صفحه فیس بوک خود را در تنظیمات وارد کرده تا به داده های Open Graph افزوده شود.

در همین صفحه مربوط به فیس بوک، شما می توانید تصویر و توضیحی برای صفحه اصلی سایت خود وارد کنید. شما همچنین می توانید تصویری را به عنوان تصویر پیش فرض در این صفحه آپلود کنید تا از آن برای نوشته هایی که تصویر شاخص ندارند، استفاده شود.

دانلود افزونه Yoast SEO

اضافه کردن دستی Facebook Open Graph به قالب سایت وردپرس

این روش نیازمند ویرایش فایل های قالب سایت است، از همین رو قبل از انجام هر کاری از سایت خود نسخه پشتیبان تهیه کنید.

بعد از تهیه نسخه پشتیبانی، کافی است کد زیر را کپی کرده و در فایل functions.php قالب سایت خود یا افزونه اختصاصی سایت خود قرار دهید:

//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'add_opengraph_doctype');

//Lets add Open Graph Meta Info

function insert_fb_in_head() {
global $post;
if ( !is_singular()) //if it is not a post or a page
return;
echo '<meta property="fb:admins" content="YOUR USER ID"/>';
echo '<meta property="og:title" content="' . get_the_title() . '"/>';
echo '<meta property="og:type" content="article"/>';
echo '<meta property="og:url" content="' . get_permalink() . '"/>';
echo '<meta property="og:site_name" content="Your Site NAME Goes HERE"/>';
if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
$default_image="http://example.com/image.jpg"; //replace this with a default image on your server or an image in your media library
echo '<meta property="og:image" content="' . $default_image . '"/>';
}
else{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
}
echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

توجه: قبل از ذخیره کد بالا، در جاییکه گفته شده “Your Site Name Goes Here” به جای عبارت مذکور، نام سایت خود را قرار دهید. سپس به جای “http://example.com/image.jpg” آدرس تصویر پیش فرض خود را قرار دهید. در نهایت فراموش نکنید که به جای “YOUR USER ID” آیدی حساب کاربری فیس بوک خود را قرار دهید.

بعد از انجام تغییرات در کد بالا، حالا می توانید آن را ذخیره کنید.