Jak mogę kontrolować obraz podobny do Facebooka? [Zamknięte]

Mam bloga z niektórymi wpisami, a każdy post ma osadzony przycisk podobny do Facebooka . Naciśnięcie przycisku powoduje otwarcie okna dialogowego, dzięki czemu moi goście mogą udostępnić post na Facebooku z komentarzem.

Jednak podczas udostępniania obraz wybrany przez Facebook jest ogólną ikoną poczty, a nie miniaturą postu.

Jak mogę kontrolować obraz używany podczas udostępniania?

Obraz używany do udostępniania jest pobierany z fragmentu kodu w nagłówku witryny, który będzie wyglądał mniej więcej tak:

<link rel="image_src" href="path/to/theme/screenshot.png" />

Zwykle prowadzi do zrzutu ekranu Twojej witryny w motywie. Jeśli usunąłeś kod z nagłówka pliku i na single.php umieściłeś go w pętli i nazwałeś swoją miniaturę postu elementem href, wierzę, że to zadziała. Więc wyglądałoby to tak:

<link rel="image_src" href="<?php the_post_thumbnail(); ?>" />

Oznaczałoby to, że jeśli masz podobne przyciski na stronach z listą wielu postów, prawdopodobnie nie będziesz mieć obrazu. Jeśli podasz jakiś kod warunkowy, który usunął go tylko na single.php, będziesz mieć normalny obraz na dowolnej stronie z wieloma postami i podobnym przyciskiem oraz miniaturę postu, gdy używany jest szablon single.php. Zatem kod nagłówka to:

<?php if ( is_single() ) { /* do nothing on single pages */ } else { ?>
<link rel="image_src" href="path/to/theme/screenshot.png" />
<?php } ?>

Wtedy nadal używałbyś tego kodu, aby dołączyć miniaturę postu do single.php.

Facebook używa teraz protokołu opengraph. Możesz dodawać obrazy za pomocą:

<meta property = "og: image" content = "http: // YOUR_IMAGE_URL" />

Dodaj ten wiersz do nagłówka strony.

Alternatywnie możesz użyć mojej wtyczki, aby zrobić to automatycznie.

Po prostu wykonuje to zadanie i nie są potrzebne żadne ustawienia.

http://shailan.com/wordpress/plugins/facebook-meta-tags-plugin/

Musisz użyć protokołu Facebook Open Graph. Nie jestem pewien, dlaczego zaakceptowana odpowiedź nie jest jedną z wielu odpowiedzi związanych z OG: (które głosowałem), ale jest błędna.

http://developers.facebook.com/docs/opengraph/

Możesz dostosować wiele rzeczy, w tym tytuł, obraz, opis, kategorię, ostatnią aktualizację itp., Jeśli używasz Open Graph. Jeśli użyjesz tych innych pół-rozwiązań, stracisz cały obraz.

Gdybym nie postępował zgodnie z Protokołem OG dla całej mojej pracy na FB, zostałbym zwolniony.

Jeśli wykonasz następujące czynności:

<link rel="image_src" href="<?php the_post_thumbnail(); ?>" />

Przekonasz się, że Wordpress generuje html wymagany do wyświetlenia obrazu, a nie tylko SRC, który jest tym, czego naprawdę chcesz.

Robiąc coś takiego:

<?php

// Featured Image for FB Like
$feature_image = get_the_post_thumbnail($post->ID);

// Get image source
$doc = new DOMDocument();
$doc->loadHTML($feature_image);
$imageTags = $doc->getElementsByTagName('img');

foreach($imageTags as $tag) {
        $image_url = $tag->getAttribute('src');
    }
?>
<link rel="image_src" href="<?php echo $image_url; ?>" />

dostaje tylko adres URL. Jest to prawdopodobnie długa droga i prawdopodobnie może być skrócona, ale zdecydowanie rozwiązuje problem.

Mam nadzieję, że to postawi cię na dobrej drodze.

Matt.

Upewnij się, że podałeś tutaj swój adres URL, jeśli określony obraz nie wyświetla się poprawnie:

http://developers.facebook.com/tools/lint/

Jeśli chcesz użyć pierwszego obrazu posta jako miniatury z rezerwą czegoś podobnego do logo, wypróbuj moją wtyczkę - http://wordpress.org/extend/plugins/facebook-like-thumbnail/ Wyjaśnienie dotyczące dodawania obraz zapasowego logo znajduje się na stronie http://blog.ashfame.com/?p=888

<meta property="og:image" content="http://YOUR_IMAGE_URL" />

Ta metoda działa dla „jak”: s, ale później, jeśli chcesz udostępnić link w swoim logu (na przykład.), To zdjęcie jest automatycznie wybierane.

Bez tego metatagu możesz wybierać spośród wszystkich zdjęć w połączonej witrynie.

Czy ktoś zna jakikolwiek sposób, aby zachować statyczny obraz „jak”, ale nadal każe wybrać obraz podczas udostępniania adresu URL?

OK, napisałem trochę javascript, aby zapełnić obraz Meta og: obrazem wybranego przeze mnie obrazu. To jednorazowy hack dodawany do pliku nagłówka.

W moim poście WordPress dodaję id „featured-image” (wiem, że w późniejszym wordpressie jest to wbudowane, jestem na starym).

<xmp><img src="http://mysite.com/catphoto.jpg" id="featured-image" /></xmp>

Piszę metatag dla obrazu og: z symbolem zastępczym, takim jak mój dziennik blogu. Dodaj „id =” meta-image ”do znacznika, tj

<meta property="og:image" src="http://mysite.com/logo.jpg" id="meta-image" />

Następnie dodaj ten kod JavaScript w nagłówku:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"> </script>

<script type="text/javascript">
$(document).ready( function(){
    var featured_image = $("#featured-image").attr("src");
    $('meta[property="og:image"]').attr("content",featured_image);
});