publikuj: Opublikuj w wykop.pl Opublikuj we flaker.pl Opublikuj na OSnews.pl Opublikuj w delicious wydrukuj
skomentuj »

TAGI: facebook , wordpress , tips & tricks

2011-08-22 13:21  |  Paweł Gazda

Jak zintegrować Facebook Open Graph z Wordpressem?

Jak zintegrować Facebook Open Graph z Wordpressem?

Facebookowy protokół Open Graph pozwala na dzielenie się zawartością twojego bloga nie tylko z twoimi czytelnikami, ale również z ich znajomymi z Facebooka. Najlepsze jest to, że jak tylko ktoś polubi coś z twojego bloga, to automatycznie opublikuje się to na ich ścianie w Facebooku.

 

Krok 1. tworzymy aplikację na Facebooku

  • Zaloguj sie do Facebooka i przejdź do strony "Twórcy aplikacji" (na dole strony).
  • Wybierz odnośnik "Aplikacje" z górnej części strony, a następnie odnośnik "Utwórz aplikację". Przejdź przez wszystkie kroki weryfikacyjne (hasło, numer telefonu lub karta kredytowa).

  • W zakładce Website dodaj URL do swojego bloga.

  • Zanotuj App ID i zapisz zmiany.

Na obecną chwilę to wszystko w tym kroku, resztę danych można uzupełnić później.

 

Krok 2. podmiana tagu <HTML>

  • Po zalogowaniu do WordPressa przejdź do zakładki Wygląd, a z niej przejdź do Edytora.
  • W edytorze odnajdź i otwórz plik header.php (pamiętaj o stworzeniu kopii zapasowej).
  • Odnajdź kawałek kodu:
 
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
  • Zamień go na ten kod:
 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">

Nie zamykaj jeszcze pliku header.php

 

Krok 3. Wstawiamy <meta> tagi OG

  • Wklej poniższy kod zaraz po otwarciu tagu <head> lub przed tagiem zamykającym </head>:
 
<?php if (have_posts()):while(have_posts()):the_post(); endwhile; endif;?>

<!-- the default values -->
<meta property="fb:app_id" content="your_fb_app_id" />

<meta property="fb:admins" content="your_fb_admin_id" />
<!-- if page is content page -->

<?php if (is_single()) { ?>
<meta property="og:url" content="<?php the_permalink() ?>"/>

<meta property="og:title" content="<?php single_post_title(''); ?>" />
<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />

<meta property="og:type" content="article" />
<meta property="og:image" content="<?php if (function_exists('wp_get_attachment_thumb_url')) {echo wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID)); }?>" />

<!-- if page is others -->
<?php } else { ?>

<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />

<meta property="og:type" content="website" />
<meta property="og:image" content="logo.jpg" /> <?php } ?>
  • Podmień następujące wartości:

A) linia 3: Zamień your_fb_app_id na App ID zanotowane w Kroku 1.

B) linia 4: Możesz „wydobyć" swój parametr your_fb_admin_id w statystykach Facebooka. Po przejściu na stronę kliknij zielony odnośnik Wgląd do twojej strony i skopiuj kod, a następnie wklej go w edytowanej linii.

C) linia 12: tutaj określany jest obrazek dołączany do treści. Jeśli skórka z której korzystasz działa z WordPress Post Thumbnails, to problem z głowy, ale jeśli tak nie jest - sprawdź porady w kroku 3B.

D) linia 19: zamień logo.jpg na URL do loga twojego bloga.

 

Krok 3B. kiedy metoda "wp_get_attachment_thumb_url" nie zadziała.

Jeśli metoda wp_get_attachment_thumb_url() nie zadziała to winny jest za to pusty atrybut content widoczny poniżej.

 
<meta property="og:image" content="" />
  • Najprościej poradzić sobie z tym zastępując linię 12 następującym kodem:
 
<meta property="og:image" content="<?php if (function_exists('catch_that_image')) {echo catch_that_image(); }?>" />
  • Następnie otwieramy plik functions.php i dodajemy następujący kod:
 

function catch_that_image() {

global $post, $posts;

$first_img = '';

ob_start();

ob_end_clean();

$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);

$first_img = $matches [1] [0];

if(emptyempty($first_img){

//Defines a default image

$first_img = "/images/default.jpg";

}

return $first_img;

}

Ten kod zastępuje próbę użycia funkcji catch_that_image() do pobierania obrazków (na zasadzie pierwszy, który napotka zostaje użyty). Zamień linię 10 na URL do domyślnej grafiki jeśli funkcja nie znajdzie żadnej grafiki.

 

Krok 4. Wstawiamy Facebook Javascript SDK

Kod javascript poniżej daje Ci dostęp do wszystkich opcji Graph API. Pozwala na integrację pluginów Facebooka takich jak np. przycisk Lubię to.

  • Kod osadź w pliku header.php zaraz po <body>:
 
<div id="fb-root"></div>

<script>
window.fbAsyncInit = function() {

FB.init({appId: 'your_fb_app_id', status: true, cookie: true,
xfbml: true});

};
(function() {

var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +

'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);

}());
</script>
  • Zamień your_fb_app_id w linii 4 na App ID zapisane w Kroku 1.

 

Krok 5: Testujemy

Wszystkie czynności zostały już wykonane, teraz pora na testy.

  • Test 1: sprawdź kod źródłowy jednego z wpisów blogowych, powinieneś znaleźć tam linie podobne do tych:

foto źródło: hongkiat.com
  • Test 2: Zainstaluj Like Box

Jeśli jeszcze tego nie zrobiłeś to teraz jest dobra pora na instalację przycisku Lubię to. Porady odnośnie przycisku Lubię to dostępne są TUTAJ.

  • W pliku single.php umieść następujący kod:
 
<fb:like href="<?php the_permalink() ?>" layout="button_count" show_faces="false" width="450" action="like" colorscheme="light"></fb:like>
  • Następnie poproś znajomego o polubienie treści, powinieneś zobaczyć coś takiego na jego ścianie:

foto źródło: hongkiat.com

 

źródło: hongkiat.com

publikuj: Opublikuj w wykop.pl Opublikuj we flaker.pl Opublikuj na OSnews.pl Opublikuj w delicious wydrukuj
skomentuj »

Warto przeczytać

Krótkie porównanie na czym zarabiają Google i Facebook
Z okazji wypuszczenia akcji Facebooka przypomnijmy sobie, kim jest Zuckerberg
Facebook -11% w drugim dniu, ale wstrzymajmy się z ogłaszaniem pękniętej bańki
Sztuka ignorowania w mediach społecznościowych

Popularne 7 dni 30 dni

Społeczność komentarze forum

Polecane książki

Praca

Czytaj Webhosting

Chcesz być na bieżąco z naszymi informacjami? Zapisz się na Newsletter.

Zarejestruj domenę

Sprawdź dostępność swojej domeny:

.pl: 0 zł   .com: 19.90 zł
.com.pl: 0 zł   .eu: 19.90 zł