Premium, Social Media

Jak dodać miniaturkę do udostępnianej strony na Facebooku?

  • Poziom trudności:

Pomogłem rozwiązać Twój problem? Wspieraj moje działania bym pisał więcej:

10 PLN

Nie wszystkie kupione szablony posiadają szczegółowe metadane dla Facebooka. Gdy takich danych zabraknie, wtedy udostępniany wpis może nie posiadać ilustracji albo co gorsza mieć ilustrację inną niż wcześniej zakładaliśmy. Aby zapanować nad Facebookowym rozgardiaszem warto poznać fragment kodu, który korzystając z konstrukcji metadanych używanych przez FB oraz wywołań poszczególnych elementów w WordPressie pozwoli w pełni skonfigurować Twoją stronę na WordPressie pod algorytmy Facebooka.

W zasadzie jedyne co musisz zrobić to umieścić w części <head> strony (najlepiej tam gdzie znajdują się inne metadane) poniższy fragment kodu:

<!-- METADANE FACEBOOKA -->
	<?php
	$thumb = get_post_meta($post->ID,'_thumbnail_id',false);
	$thumb = wp_get_attachment_image_src($thumb[0], false);
	$thumb = $thumb[0];
	$default_img = get_bloginfo('stylesheet_directory').'/img/fb-logo.jpg';
	?>
	
	<?php if(is_single() || is_page()) { ?>
	<meta property="og:type" content="article" />
	<meta property="og:title" content="<?php single_post_title(''); ?>" />
	<meta property="og:url" content="<?php the_permalink(); ?>"/>
	<meta property="og:image" content="<?php if ( $thumb[0] == null ) { echo $default_img; } else { echo $thumb; } ?>" />

<?php  } else { ?>

	<meta property="og:type" content="article" />
        <meta property="og:title" content="<?php bloginfo('name'); ?>" />
	<meta property="og:url" content="<?php bloginfo('url'); ?>"/>
	<meta property="og:description" content="<?php bloginfo('description'); ?>" />
        <meta property="og:image" content="<?php  if ( $thumb[0] == null ) { echo $default_img; } else { echo $thumb; } ?>" />
<?php  }  ?>

Krok 1: wklejenie kodu

Aby umieścić ten fragment kodu przejdź do sekcji Wygląd -> Edytor do sekcji header.php i wyszukaj znacznika </head> i umieścić powyższy fragment kodu przed zamknięciem tego znacznika.

Teraz przyjrzyjmy się wklejanemu fragmentowi kodu. Linie od 2 do 7 odpowiadają za określenie zmiennych $thumb i $default_img. Druga z tych zmiennych w linii 6 ma podaną ścieżkę domyślnej grafiki, która wyświetli się wtedy, kiedy we wpisie albo na stronie głównej nie będzie zdjęć. Przykładowo domyślną grafikę dla tej strony znajdziesz pod tym adresem.

Krok 2: Wgranie przygotowanej grafiki

Proponuję przygotować grafikę o rozmiarach 1200 x 627px, ewentualnie 600 x 315px a minimum 470 x 246px, ewentualnie w kwadracie, aczkolwiek prostokąt o powyżej wymienionych rozmiarach będzie ładniej się prezentował na tablicy Facebooka.

Jeśli chcesz pozostawić ścieżkę taką jak rozpisałem w powyższym fragmencie kodu  wtedy wrzuć obrazek w formacie JPG na serwer pilnując aby ścieżka zgadzała się z tym co jest napisane w linii 6 czyli ikona była umieszczona w /img/ w katalogu z motywem.

Gdybyś jednak chciał skorzystać z sekcji Media -> Dodaj nowy umieść w Bibliotece mediów ilustrację dla strony, a następnie skopiuj adres URL ilustracji i wklej go w linii 6 tak aby ta linia miała konstrukcję:

$default_img = 'http://adrestwojejstrony.pl/wp-content/uploads/2017/04/fb-logo.jpg';

Między 9 i 13 linią wyświetlany jest właściwy kod interpretowany przez algorytmy Facebooka. WordPress wie, że kod ma być brany pod uwagę tylko w przypadku szablonu pojedynczego wpisu (single.php) oraz statycznej strony (page.php). Jeśli masz wątpliwości, które to strony, możesz zainstalować wtyczkę What The File i uzyskać taką informację na górze w pasku admina poszczególnej strony.

Linie od 17 do 21 wyświetlają kod dla szablonu, który nie jest pojedynczym wpisem i stroną czyli w skrócie dla wszystkich pozostałych, m.in dla strony głównej, która nie ma zadeklarowanej grafiki.

Gdyby ta metoda nie pomogła możesz zawsze spróbować skorzystać z wtyczki Yoast SEO albo Simple Facebook OG image.

Krok3: Debugger i odświeżanie ustawień – pozbądź się wątpliwości

Jeśli nie wiesz jak Facebook wyświetla udostępnioną stronę – sprawdź ją w Debuggerze udostępnionym przez Facebooka:

https://developers.facebook.com/tools/debug/

Debugger działa bardzo prosto. Wystarczy, że umieścisz w polu „Enter the URL to see the information that is used when it is shared on Facebook” adres swojej strony aby sprawdzić czy poprawnie dodawany jest do niej tytuł, opis oraz miniatura.

Możesz też wkleić link w oknie dodawania statusu na Facebooku. Po wciśnięciu spacji powinieneś móc podejrzeć czy zmiana została wprowadzona. Zachęcam jednak aby korzystać z Debuggera, dlatego że pozwala on na odświeżenie zapamiętanych przez Facebooka ustawień, a to może być konieczne aby wprowadzić poprawki do wpisanych wcześniej metadanych.

UDOSTĘPNIJ

Pomogłem rozwiązać Twój problem? Wspieraj moje działania bym pisał więcej:

10 PLN
Tagi: , ,