Uwaga! Wszystkie informacje i solucje zawarte w postach typu DYI mogą z czasem przestać być aktualne. Niektóre publikowane kody źródłowe, będąc zależnymi od używanych konfiguracji platform i sprzętu, mogą nie działać, lub działać nieprawidłowo u niektórych użytkowników. Stosując opisane rozwiązania przyjmujesz do wiadomości i zgadzasz się, że nie ponoszę odpowiedzialności za ich finalne efekty.
Dzięki „open graph” właściciel strony ma pełną kontrolę nad tym, jak kontent z jego witryny będzie prezentował się w social mediach. Z kolei technicznie rzecz ujmując, jest to zbiór metatagów, które umieszcza się w sekcji „head” danej strony internetowej. Tagi „open graph” zostały wprowadzone przez Facebooka w 2010 roku. Ich celem było ułatwienie integracji treści zawartych na stronie internetowej z najpopularniejszą platformą społecznościową na świecie. Z czasem okazało się, że używa ich nie tylko Facebook, lecz i inne serwisy, m.in. Twitter czy LinkedIn.
Najważniejszymi tagami tego standardu są:
<meta property=”og:title” content=”tytuł strony”>
<meta property=”og:description” content=”opis strony”>
<meta property=”og:image” content=”URL do obrazka strony lub posta”>
<meta property=”og:url” content=”URL strony”>
<meta property=”og:type” content=”website”>
Bez posiadania powyższych danych w kodzie strony, wiele serwisów społecznościowych będzie próbowało automatycznie zbudować podgląd treści. W takich przypadkach może być on mniej atrakcyjny wizualnie. Tak dzieje się np. na Facebook’u, który w przypadku braku tagów spróbuje wyciągnąć informacje z pierwszych kilku akapitów tekstu. Może to skutkować np. pokazywaniem przypadkowego obrazka lub jego całkowitym brakiem.
Szacuje się, że ponad 40% stron internetowych postawionych jest na WordPress’ie. Co ciekawe, ten CMS nie posiada natywnej obsługi standardu „open graph” pozostawiając dodanie tej funkcjonalności autorom wtyczek. Dobrze działającymi rozwiązaniami są pluginy do optymalizacji treści – choćby uznany „Yoast SEO”, czy „All in One SEO Pack”.
A co w sytuacji, kiedy z jakichś względów nie możemy lub nie chcemy używać Yoast’a i innych kombajnów? Można stworzyć własne rozwiązanie, które dostępne będzie w panelu edycji każdego z postów. Wyglądałoby to np. tak:
<?php
/*
Plugin Name: OpenGraph Image Plugin
Description: Dodaje opcję "Użyj obrazu w opengraph" do edytora wpisów, umożliwiającą wybór obrazka z biblioteki mediów i dodawanie tagów OpenGraph.
Version: 1.0
Author: Dariusz Staropiętka
*/
// Dodaj metabox do edytora postów
function opengraph_image_add_metabox() {
add_meta_box(
'opengraph_image_metabox', // ID metaboxa
'Użyj obrazu w opengraph', // Tytuł metaboxa
'opengraph_image_metabox_callback', // Funkcja wyświetlająca metabox
'post', // Ekran (post, page, etc.)
'side' // Kontekst (side, normal, etc.)
);
}
add_action('add_meta_boxes', 'opengraph_image_add_metabox');
// Dodaj filtr do modyfikowania HTML obrazka
function add_ogpix_class_to_image($html, $attachment_id, $size) {
// Dodaj klasę ogpix do obrazka
return str_replace(
'class="attachment-medium size-medium"',
'class="attachment-medium size-medium" style="height:auto; width:100%;"',
$html
);
}
add_filter('wp_get_attachment_image', 'add_ogpix_class_to_image', 10, 3);
// Callback wyświetlający zawartość metaboxa
function opengraph_image_metabox_callback($post) {
wp_nonce_field('opengraph_image_save_meta_box_data', 'opengraph_image_meta_box_nonce');
$value = get_post_meta($post->ID, '_opengraph_image', true);
echo '<label for="opengraph_image">';
echo 'Wybierz obrazek OpenGraph:';
echo '</label> ';
echo '<input type="hidden" id="opengraph_image" name="opengraph_image" value="' . esc_attr($value) . '" />';
echo '<button type="button" class="button" id="opengraph_image_button" style="width:100%; margin-top: 10px!important; margin-bottom:10px !important">Wybierz obrazek</button>';
echo '<div id="opengraph_image_preview">';
if ($value) {
echo wp_get_attachment_image($value, 'medium');
}
echo '</div>';
}
// Zapisz dane z metaboxa
function opengraph_image_save_meta_box_data($post_id) {
if (!isset($_POST['opengraph_image_meta_box_nonce'])) {
return;
}
if (!wp_verify_nonce($_POST['opengraph_image_meta_box_nonce'], 'opengraph_image_save_meta_box_data')) {
return;
}
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
return;
}
if (!current_user_can('edit_post', $post_id)) {
return;
}
if (isset($_POST['opengraph_image'])) {
$opengraph_image = sanitize_text_field($_POST['opengraph_image']);
update_post_meta($post_id, '_opengraph_image', $opengraph_image);
}
}
add_action('save_post', 'opengraph_image_save_meta_box_data');
// Dodaj tagi OpenGraph do nagłówka
function opengraph_image_add_meta_tags() {
if (is_single()) {
global $post;
// Ustawienie wartości tagów OpenGraph
$og_title = get_the_title($post->ID);
$og_description = get_the_excerpt($post->ID);
$og_url = get_permalink($post->ID);
$og_type = 'article'; // Można zmienić na inną wartość w zależności od typu strony
$og_image = get_post_meta($post->ID, '_opengraph_image', true);
$og_image_url = $og_image ? wp_get_attachment_url($og_image) : '';
// Wydrukowanie tagów OpenGraph
echo '<meta property="og:title" content="' . esc_attr($og_title) . '" />' . "\n";
echo '<meta property="og:description" content="' . esc_attr($og_description) . '" />' . "\n";
echo '<meta property="og:url" content="' . esc_url($og_url) . '" />' . "\n";
echo '<meta property="og:type" content="' . esc_attr($og_type) . '" />' . "\n";
if ($og_image_url) {
echo '<meta property="og:image" content="' . esc_url($og_image_url) . '" />' . "\n";
}
// Opcjonalnie dodaj fb:app_id, jeśli masz aplikację na Facebooku
$fb_app_id = 'YOUR_FB_APP_ID'; // Zastąp własnym identyfikatorem aplikacji Facebook
if ($fb_app_id) {
echo '<meta property="fb:app_id" content="' . esc_attr($fb_app_id) . '" />' . "\n";
}
}
}
add_action('wp_head', 'opengraph_image_add_meta_tags');
// Enqueue scripts
function opengraph_image_enqueue_scripts($hook) {
if ($hook != 'post.php' && $hook != 'post-new.php') {
return;
}
wp_enqueue_media();
wp_enqueue_script('opengraph-image-script', plugin_dir_url(__FILE__) . 'opengraph-image.js', array('jquery'), null, true);
}
add_action('admin_enqueue_scripts', 'opengraph_image_enqueue_scripts');
?>
Do tego trzeba jeszcze dodać plik javascriptu, który obsłuży integrację z Biblioteką Mediów WordPress’a:
jQuery(document).ready(function($){
var mediaUploader;
$('#opengraph_image_button').click(function(e) {
e.preventDefault();
if (mediaUploader) {
mediaUploader.open();
return;
}
mediaUploader = wp.media.frames.file_frame = wp.media({
title: 'Wybierz obrazek OpenGraph',
button: {
text: 'Użyj tego obrazka'
},
multiple: false
});
mediaUploader.on('select', function() {
var attachment = mediaUploader.state().get('selection').first().toJSON();
$('#opengraph_image').val(attachment.id);
$('#opengraph_image_preview').html('<img src="' + attachment.url + '" style="max-width:100%;"/>');
});
mediaUploader.open();
});
});
Jeśli komuś nie chce się tworzyć wielu plików, to można wszystko scalić do jednego fajla:
<?php
/* Plugin Name: OpenGraph Image Plugin
Description: Dodaje opcję "Użyj obrazu w opengraph" do edytora wpisów, umożliwiającą wybór obrazka z biblioteki mediów i dodawanie tagów OpenGraph.
Version: 1.0
Author: Dariusz Staropiętka */
// Dodaj metabox do edytora postów
function opengraph_image_add_metabox() {
add_meta_box(
'opengraph_image_metabox', // ID metaboxa
'Użyj obrazu w opengraph', // Tytuł metaboxa
'opengraph_image_metabox_callback', // Funkcja wyświetlająca metabox
'post', // Ekran (post, page, etc.)
'side' // Kontekst (side, normal, etc.)
);
}
add_action('add_meta_boxes', 'opengraph_image_add_metabox');
// Dodaj filtr do modyfikowania HTML obrazka
function add_ogpix_class_to_image($html, $attachment_id, $size) {
// Dodaj klasę ogpix do obrazka
return str_replace(
'class="attachment-medium size-medium"',
'class="attachment-medium size-medium" style="height:auto; width:100%;"',
$html
);
}
add_filter('wp_get_attachment_image', 'add_ogpix_class_to_image', 10, 3);
// Callback wyświetlający zawartość metaboxa
function opengraph_image_metabox_callback($post) {
wp_nonce_field('opengraph_image_save_meta_box_data', 'opengraph_image_meta_box_nonce');
$value = get_post_meta($post->ID, '_opengraph_image', true);
echo '<label for="opengraph_image">';
echo 'Wybierz obrazek OpenGraph:';
echo '</label> ';
echo '<input type="hidden" id="opengraph_image" name="opengraph_image" value="' . esc_attr($value) . '" />';
echo '<button type="button" class="button" id="opengraph_image_button" style="width:100%; margin-top: 10px!important; margin-bottom:10px !important">Wybierz obrazek</button>';
echo '<div id="opengraph_image_preview">';
if ($value) {
echo wp_get_attachment_image($value, 'medium');
}
echo '</div>';
}
// Zapisz dane z metaboxa
function opengraph_image_save_meta_box_data($post_id) {
if (!isset($_POST['opengraph_image_meta_box_nonce'])) {
return;
}
if (!wp_verify_nonce($_POST['opengraph_image_meta_box_nonce'], 'opengraph_image_save_meta_box_data')) {
return;
}
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
return;
}
if (!current_user_can('edit_post', $post_id)) {
return;
}
if (isset($_POST['opengraph_image'])) {
$opengraph_image = sanitize_text_field($_POST['opengraph_image']);
update_post_meta($post_id, '_opengraph_image', $opengraph_image);
}
}
add_action('save_post', 'opengraph_image_save_meta_box_data');
// Dodaj tagi OpenGraph do nagłówka
function opengraph_image_add_meta_tags() {
if (is_single()) {
global $post;
// Ustawienie wartości tagów OpenGraph
$og_title = get_the_title($post->ID);
$og_description = get_the_excerpt($post->ID);
$og_url = get_permalink($post->ID);
$og_type = 'article'; // Można zmienić na inną wartość w zależności od typu strony
$og_image = get_post_meta($post->ID, '_opengraph_image', true);
$og_image_url = $og_image ? wp_get_attachment_url($og_image) : '';
// Wydrukowanie tagów OpenGraph
echo '<meta property="og:title" content="' . esc_attr($og_title) . '" />' . "\n";
echo '<meta property="og:description" content="' . esc_attr($og_description) . '" />' . "\n";
echo '<meta property="og:url" content="' . esc_url($og_url) . '" />' . "\n";
echo '<meta property="og:type" content="' . esc_attr($og_type) . '" />' . "\n";
if ($og_image_url) {
echo '<meta property="og:image" content="' . esc_url($og_image_url) . '" />' . "\n";
}
// Opcjonalnie dodaj fb:app_id, jeśli masz aplikację na Facebooku
$fb_app_id = 'YOUR_FB_APP_ID'; // Zastąp własnym identyfikatorem aplikacji Facebook
if ($fb_app_id) {
echo '<meta property="fb:app_id" content="' . esc_attr($fb_app_id) . '" />' . "\n";
}
}
}
add_action('wp_head', 'opengraph_image_add_meta_tags');
// Enqueue scripts
function opengraph_image_enqueue_scripts($hook) {
if ($hook != 'post.php' && $hook != 'post-new.php') {
return;
}
wp_enqueue_media();
?>
<script type="text/javascript">
jQuery(document).ready(function($){
var mediaUploader;
$('#opengraph_image_button').click(function(e) {
e.preventDefault();
if (mediaUploader) {
mediaUploader.open();
return;
}
mediaUploader = wp.media.frames.file_frame = wp.media({
title: 'Wybierz obrazek OpenGraph',
button: {
text: 'Użyj tego obrazka'
},
multiple: false
});
mediaUploader.on('select', function() {
var attachment = mediaUploader.state().get('selection').first().toJSON();
$('#opengraph_image').val(attachment.id);
$('#opengraph_image_preview').html('<img src="' + attachment.url + '" style="max-width:100%;"/>');
});
mediaUploader.open();
});
});
</script>
<?php
}
add_action('admin_enqueue_scripts', 'opengraph_image_enqueue_scripts');
?>