Open Graph w WordPress2 min read
2 min read" >
Dziś pokażę jak w prosty sposób zaimplementować Facebookowy Open Graph na stronę WordPressa dla standardowych artykułów za pomocą wtyczki jak i bez jej pomocy. Zacznę może od wyjaśnienia czym jest Open Graph.
Opisuje on na naszej stronie dane w taki sposób aby Facebook mógł korzystać dokładnie z tych danych jakie mu wskażemy. Poniżej zamieszczam przykład przy Share artykułu:
1. Aby to zrobić należy w swoim szablonie strony w pliku functions.php umieścić poniższy kod:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function wp_opengraph_for_posts() { if ( is_singular() ) { global $post; setup_postdata( $post ); $output = '<meta property="og:typ" content="article" />' . "\n"; $output .= '<meta property="og:title" content="' . esc_attr( get_the_title() ) . '" />' . "\n"; $output .= '<meta property="og:url" content="' . get_permalink() . '" />' . "\n"; $output .= '<meta property="og:description" content="' . esc_attr( get_the_excerpt() ) . '" />' . "\n"; if ( has_post_thumbnail() ) { $imgsrc = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' ); $output .= '<meta property="og:image" content="' . $imgsrc[] . '" />' . "\n"; } echo $output; } } add_action( 'wp_head', 'wp_opengraph_for_posts' ); |
2. Następnie w pliku header.php znajdujemy nasz tag <html> i zamieniamy go na taki:
1 | <html <?php language_attributes(); ?> prefix="og:http://ogp.me/ns#"> |
Wtyczka do Open Graph
Jeżeli używasz All in Seo Pack (włącz i skonfiguruj dodatek Social Meta poprzez opcje wtyczki) lub Yoast SEO (SEO => Społeczności) możesz użyć ich funkcji do oznaczenia elementów dla FB.
WP Facebook Open Graph protocol
Przetestowałem kilka z nich i ta wydaje mi się najlepsza. Po zainstalowaniu do opcji dodaje nam się panel wtyczki w którym możemy znaleźć:
- User account ID – koniecznie wpisać trzeba ID swojego profilu/strony FB.
- Domyślny obrazek, który będzie wyświetlany jeżeli dany artykuł nie będzie posiadał żadnego.
- Wymuszanie korzystania przez Facebooka tylko z tego url obrazka podanej wyżej
- Zabezpieczenie WordPressa przed atakami hackerów - 10 lipca 2016
- Euro 2016 z perspektywy wyszukiwania informacji w Google - 5 lipca 2016
- Dodatkowe funkcje w edytorze wizualnym WordPressa - 20 maja 2016
- WordCamp 2016 w Gdyni - 19 kwietnia 2016
- Linkowanie wewnętrzne na stronie – porady - 1 marca 2016
- Wyświetlanie pól wpisów i taksonomii tworzonych przez Types - 17 lutego 2016
- Wtyczki do WP, których nie znasz a powinieneś cz.8 - 10 lutego 2016
- Redukcja współczynnika odrzuceń dzięki Reduce Bounce Rate - 15 stycznia 2016
- Posumowanie roku 2015 – najpopularniejsze artykuły w 2015 - 5 stycznia 2016
- Jak ukryć widgety na urządzeniach moblinych ? - 8 października 2015
BeLewap3 -
U mnie świetnie sprawdza się dodatek do All in One SEO Pack o nazwie Social Meta.
Podajemy ID profilu Facebook, wybieramy czy Description ma być generowany automatycznie na podstawie wpisu, czy tytuł ma być brany z All in One SECO oraz (dla mnie bardzo ważne), które zdjęcie wpisu ma być pobierane pod uwagę.
Korzystam z dodatku Social Meta, ponieważ nie muszę instalować kolejnej wtyczki, tylko dodatek do All in One SEO.
Wojciech Władziński -
Musze przetestować. Dzięki!
Piotr Skrzypczak -
Całkiem fajne rozwiązanie, jeśli chcemy od razu w szablon wbudować obsługę Open Graph. Osobiście korzystam z wtyczki WordPress SEO by Yoast, która posiada pełne wsparcie Open Graph, możemy dodać jakie zdjęcie, opis i tytuł ma się wyświetlać, albo wtyczka robi to za nas na podstawie treści i zdjęć z wpisu/podstron.
Acroart -
Witam serdecznie,
Próbowałem zrobić według zaleceń ale cały czas wyskakują mi niewłaściwe dane.
Skopiowałem do functions.php dokładnie to co umieściłeś. W headerze wkleiłem fragment kodu html.
Oto kod mojego przycisku który ma udostępniać post:
<a href="http://www.facebook.com/sharer.php?u= ” onclick=”window.open(‚http://www.facebook.com/sharer.php?u=’,’Facebook’,’width=600,height=300,left=’+(screen.availWidth/2-300)+’,top=’+(screen.availHeight/2-150)+”); return false;” class=”facebook-icons small-icons”>
Błąd który mi debbuger cały czas pokazuje:
Your page has meta tags in the body instead of the head. This may be because your HTML was malformed and they fell lower in the parse tree.
Please fix this in order for the tags to be usable.
Sprawdzałem w firebagu i mam meta dane w head a nie w body.
Próbowałęm też z pluginami ale ten sam problem.
Nie bardzo wiem jak sobie z tym poradzić.
Na twiterze , google plus, LinkedIn działa poprawnie.
Tylko na facebooku nie działa jak powinno.
Jakieś pomysły?
http://blog.acroart.eu to jest blog który napisałem.
Pozdrawiam
Acroart -
Tutaj prawidłowo wklejony przycisk – mam nadzieję