Pobranie treści strony niczym Facebook – PHP / jQuery

pobranie-tresci-strony-niczym-facebook-php-jquery

Z pewnością wszyscy widzieli i znają sposób dodawania adresów URL do naszych statusów na Facebooku lub Google+. Mam oczywiście na myśli sytuację, gdy po chwili od wklejenia adresu URL w okno, gdzie tworzymy nasz status sprarsowana zostaje i pobrana treść ze strony, której adresu użyliśmy. Jest to zarazem efektowne i bardzo użyteczne, bo od razu widzimy zajawkę informacji, która kryje się pod danym URL. Pokażę Wam dzisiaj prosty sposób, który wykorzystuje język PHP i bibliotekę  jQuery wraz z zapytaniem Ajax. Już dawno przymierzałem się do podobnego wpisu i wreszcie finalnie mogę go Wam przedstawić.

Zacznijmy od obsługi pola, gdzie użytkownik podaje swój adres URL. Obsługiwać będzie je oczywiście kilka linijek kodu w jQuery, gdzie w pierwszej kolejności sparsować musimy wprowadzoną treść oraz sprawdzić istnienie w niej poprawnego adresu URL, a następnie wykonać zapytanie Ajax do skryptu w języku PHP.

Pobieramy treść

$(document).ready(function() {
    var getUrl = $('#get_url') // url to extract from text field
        match_url = /\b(https?):\/\/([\-A-Z0-9.]+)(\/[\-A-Z0-9+&@#\/%=~_|!:,.;]*)?(\?[A-Z0-9+&@#\/%=~_|!:,.;]*)?/i // url to match in the text field
    ;

    getUrl.keyup(function() { // user types url in text field        
        // continue if matched url is found in text field
        if (match_url.test(getUrl.val())) {
            $("#results").hide();
            $("#loading_indicator").show(); // show loading indicator image

            var extracted_url = getUrl.val().match(match_url)[0]; // extracted first url from text filed

            // ajax request to be sent to extract-process.php
            $.post('extract-process.php', {'url': extracted_url}, function(data) {
                extracted_images = data.images;
                total_images = parseInt(data.images.length - 1);
                img_arr_pos = total_images;

                if (total_images > 0) {
                    inc_image = '<div class="extracted_thumb" id="extracted_thumb"><img src="' + data.images[img_arr_pos] + '" width="100" height="100"></div>';
                } else {
                    inc_image = '';
                }
                // content to be loaded in #results element
                var content = '<div class="extracted_url">' + inc_image + '<div class="extracted_content"><h4><a href="' + extracted_url + '" target="_blank">' + data.title + '</a></h4><p>' + data.content + '</p><div class="thumb_sel"><span class="prev_thumb" id="thumb_prev"> </span><span class="next_thumb" id="thumb_next"> </span> </div><span class="small_text" id="total_imgs">' + img_arr_pos + ' of ' + total_images + '</span><span class="small_text">  Choose a Thumbnail</span></div></div>';

                // load results in the element
                $("#results").html(content); // append received data into the element
                $("#results").slideDown(); // show results with slide down effect
                $("#loading_indicator").hide(); // hide loading indicator image
            }, 'json');
        }
    });
});

Wybieramy miniaturę

Skrypt w PHP “wypluje” nam takie dane jak tytuł, zajawkę oraz zdjęcie(-a) w formacie JSON. Jeżeli zdjęć jest kilka, to byłoby dobrze dać użytkownikowi wybór konkretnej miniatury.  Zróbmy to.

$(document).ready(function() {
    // user clicks previous thumbail
    $("body").on("click", "#thumb_prev", function(e) {
        if (img_arr_pos > 0)
        {
            img_arr_pos--; // thmubnail array position decrement

            // replace with new thumbnail
            $("#extracted_thumb").html('<img src="'+extracted_images[img_arr_pos]+'" width="100" height="100">');

            // replace thmubnail position text
            $("#total_imgs").html((img_arr_pos)+' of '+total_images);
        }
    });

    // user clicks next thumbail
    $("body").on("click", "#thumb_next", function(e) {
        if (img_arr_pos < total_images)
        {
            img_arr_pos++; // thmubnail array position increment

            // replace with new thumbnail
            $("#extracted_thumb").html('<img src="'+extracted_images[img_arr_pos]+'" width="100" height="100">');

            // replace thmubnail position text
            $("#total_imgs").html((img_arr_pos)+' of '+total_images);
        }
    });
});

HTML

Poniżej dosłownie 5 linijek HTML, który pozwoli użytkownikowi na wklejenie swojego aresu URL.

<div class="extract_url">
    <img id="loading_indicator" src="images/ajax-loader.gif" />
    <textarea id="get_url" placeholder="Enter Your URL here" class="get_url_input" spellcheck="false"></textarea>
    <div id="results"></div>
</div>

Czas na skrypt w PHP

Do pobrania treści z innej strony w naszym skrypcie PHP wykorzystamy PHP Simple HTML DOM Parser, który w niezwykle łatwy sposób pozwala sparsować drzewo DOM na podstawie przekazanego URL. Trzeba nadmienić, że wymaga on PHP w wersji 5+, ale chyba nie powinno być to dla nikogo problemem. Wszystkie zebrane dane są oczywiście zwracane w formacie JSON.

<?php
if (isset($_POST["url"])) {
    $get_url = $_POST["url"];

    // include PHP HTML DOM parser (requires PHP 5 +)
    include_once("include/simple_html_dom.inc.php");

    // get URL content
    $get_content = file_get_html($get_url);

    // get page title 
    foreach ($get_content->find('title') as $element) {
        $page_title = $element->plaintext;
    }

    // get body text
    foreach ($get_content->find('body') as $element) {
        $page_body = trim($element->plaintext);
        $pos = strpos($page_body, ' ', 200); // find the numeric position to substract
        $page_body = substr($page_body, 0, $pos); // shorten text to 200 chars
    }

    $image_urls = array();

    // get all images URLs in the content
    foreach ($get_content->find('img') as $element) {
        // validate image name
        if (!preg_match('/blank.(.*)/i', $element->src) && filter_var($element->src, FILTER_VALIDATE_URL)) {
            $image_urls[] = $element->src;
        }
    }

    // prepare for JSON 
    $output = array('title' => $page_title, 'images' => $image_urls, 'content' => $page_body);
    echo json_encode($output); // output JSON data
}
?>

Tym oto sposobem mamy gotowe rozwiązanie! Poniżej link do pobrania całości.

Pobranie treści strony niczym Facebook – PHP / jQuery

Autopost Facebook w PHP

FacebookWall

W dobie wszechobecnych serwisów społecznościowych jesteśmy w stanie wykorzystywać ich potencjał i zwiększać tym samym ruch na naszych stronach poprzez prowadzenie Fan Page lub tworzenie dedykowanych aplikacji. Największym beneficjentem takich działań jest oczywiście Facebook. Udostępnia on API, które przykładowo pozwala zarządzać naszymi Fan Page. Publikacja informacji oraz dzielenie się nią ze swoimi “fanami” (mam tutaj na myśli oczywiście lubiących naszą stronę) może odbywać się w sposób automatyczny.

Przykładowo – tworzymy wpis na naszej stronie, który zaraz po publikacji ląduje na Fan Page naszej strony na Facebooku. Nie musimy tym samym powtarzać tej czynności ręcznie, a na pewno nie zapomnimy jej wykonać w późniejszym terminie. Tak działa to na przykład u mnie. Publikując nowy wpis na blogu, wysyłany jest on automatycznie na Fan Page na Facebooku: https://www.facebook.com/mrzepinskipl

Dodatkowo – wykorzystując tagi Open Graph umieszczone w kodzie HTML  naszej strony, jesteśmy w stanie sprawić, by publikacja ta miała zakładaną przez nas formę.

  1. Pierwszym krokiem w realizacji naszego zadania będzie utworzenie aplikacji na stronie Facebook Developers (Apps -> Utwórz aplikację). Otrzymamy w ten sposób wymagane dane (app_id oraz app_secret), które wykorzystamy dalej.
  2. Następnie wchodzimy w opcję edycji naszej aplikacji (Edit app) i na stronie, która nam się załaduje musimy uzupełnić wszystkie wymagane dane,  a w szczególności parametr Canvas URL, którym musi być URL naszej strony, która obsługiwać będzie żądania HTTP wysyłane do Facebook.
  3. Wysyłamy pierwszy request do Facebook, w którym podajemy jakie uprawnienia chcielibyśmy uzyskać:
    https://www.facebook.com/dialog/oauth?client_id={app_id}&redirect_uri={redirect_url}&
    scope=manage_pages,offline_access,publish_stream

    , gdzie jako parametry podajemy:

    • app_id = Application ID -> z ustawień aplikacji
    • redirect_url = Canvas URL -> ten sam URL, który podawaliśmy wyżej

    Jeżeli całość przebiegnie poprawnie, to Facebook zwróci nam callback pod wskazany Canvas URL i za pomocą zmiennej $_GET będziemy mogli pobrać parametr code_string, który posłuży nam do wykonania kolejnego requestu.

  4. Kolejny krok, to wysłanie następnego requestu w ramach którego otrzymamy specjalny token. Posłuży on już finalnie do wysłania publikacji na nasz Fan Page wall.
    https://graph.facebook.com/oauth/access_token?client_id={app_id}&redirect_uri={redirect_url}&
    client_secret={app_secret}&code={code_string}
    • app_id = Application ID -> z ustawień aplikacji
    • redirect_url = Canvas URL -> ten sam URL, który podawaliśmy wyżej
    • app_secret = App Secret -> z ustawień aplikacji
    • code_string -> parametr code_string otrzymany w poprzednim requestcie

    W ten właśnie sposób powinniśmy otrzymać od Facebook parametr token.

  5. Pobieramy Facebook PHP SDK.
  6. Możemy w końcu zrealizować nasze zadanie i wysłać POST na nasz Fan Page wall:
    <?php
    require_once("path/to/facebooksdk/src/facebook.php");
    
    $facebook = new Facebook(array(
      'appId' => '{app_id}', // app_id -> z ustawien aplikacji
      'secret' => '{app_secret}', // app_secret -> z ustawien aplikacji
      'cookie' => true,
    ));
    
    // $token - otrzymany w poprzednim zadaniu HTTP
    $post = array(
      'access_token' => $token,
      'message' =>'wiadomosc',
      'name' => 'imieNazwisko',
      'description'=> 'opis',
      'picture' => 'http://static.obrazek.url/',
      'link' => 'http://link.pl/',
      'caption' =>'podpis'
    );
    try {
      $res = $this->tasks->api('/me/feed','POST', $post);
    } catch (Exception $e) {
      echo $e->getMessage();
    }
    ?>

Tym samym publikacja powinna pojawić się na waszym wallu.

Staż w Google – czemu nie!

The-Intership

Ten przewrotny tytuł dzisiejszego wpisu, to tak naprawdę namiastka tego co przygotowują dla nas twórcy filmu The Intership.

Wczoraj w sieci pojawił się pierwszy trailer, który obejrzeć możecie poniżej. Główne role zagrają Vince Vaughn i Owen Wilson, którzy znani są z roli w wielu komediach. Sam film również należeć ma do tego gatunku. Historia opowiadać będzie historię dwóch sprzedawców, którzy po zamknięciu firmy, w której pracowali spróbują swych sił właśnie na stażu w Google. Wszystkie śmieszne sytuacje związane będą z sytuacją starszych osób, które z technologią i Internetem mają mało wspólnego, a próbując szczęścia na stażu w Google poznają o wiele młodszych kolegów i szefów, którzy znacznie przewyższają ich swoją wiedzą.

[youtube_sc url=”https://www.youtube.com/watch?v=a8DjuGlVknQ”]

Przyznać muszę, że Google stara się dzięki temu filmowi zrobić niezły marketing swojej firmy. Wiele scen nagrywanych jest właśnie w głównej siedzibie Google w Mountain View. Zawsze intrygowało mnie jak to wygląda od środka i wprawdzie Google stworzyło wiele filmików na ten temat i są one dostępne w sieci, ale w tym wypadku mam nadzieję, że uda zobaczyć się jeszcze więcej. Tak jak Facebook nie identyfikował się z The Social Network, tak Google robi to w pełni i miejmy nadzieję, że w czerwcu 2013 przekonamy się o tym sami.

Pobranie ilości udostępnień danego URL dla Facebook, Twitter, Delicious, Pinterest, Google+ w PHP

Pobranie ilości udostępnień danego URL dla Facebook, Twitter, Delicious, Pinterest, Google+ w PHP

Ideą skryptu napisanego w PHP jest pobranie ilości udostępnień dla danego URL w popularnych serwisach społecznościowych oraz zwrócenie tych danych w JSON.

<?php
$url = $_GET['url'];
$finfo = json_decode(file_get_contents('http://api.ak.facebook.com/restserver.php?v=1.0&method=links.getStats&urls='.$url.'&format=json'));
$tinfo = json_decode(file_get_contents('http://urls.api.twitter.com/1/urls/count.json?url='.$url));
$dinfo = json_decode(file_get_contents('http://feeds.delicious.com/v2/json/urlinfo/data?url='.$url));
$pinfo = json_decode(preg_replace('/^receiveCount\((.*)\)$/', "\\1",file_get_contents('http://api.pinterest.com/v1/urls/count.json?callback=receiveCount&url='.$url)));
$gplus = gplus_shares($url);


// http://papermashup.com/google-plus-php-function/
function gplus_shares($url){
    // G+ DATA
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, "https://clients6.google.com/rpc?key=AIzaSyCKSbrvQasunBoV16zDH9R33D88CeLr9gQ");
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_POSTFIELDS, '[{"method":"pos.plusones.get","id":"p",
"params":{"nolog":true,"id":"' . $url . '","source":"widget","userId":"@viewer","groupId":"@self"},
"jsonrpc":"2.0","key":"p","apiVersion":"v1"}]');
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-type: application/json'));
    $result = curl_exec ($ch);
    curl_close ($ch);
    return json_decode($result, true);
}

$output = array(
    'facebook'=> isset($finfo[0]) ? $finfo[0]->total_count : NULL,
    'twitter'=> isset($tinfo->count) ? $tinfo->count : NULL,
    'delicious'=> isset($dinfo[0]) ? $dinfo[0]->total_posts : NULL,
    'pinterest'=> isset($pinfo->count) ? $pinfo->count : NULL,
    'googlePlus'=> isset($gplus[0]['result']) ? $gplus[0]['result']['metadata']['globalCounts']['count'] : NULL

);

header('Content-Type: text/javascript');

echo "[".json_encode($output)."]";
?>

Roundup #2 – Circle Hover, AuthManager, HTML5 File Upload, CSSComb, HubSearch, canvas-charts, Motown

Roundup #2Circle Hover

Serwis Codrops jak zawsze dostarcza nam ciekawych artykułów. Tym razem jest to tutorial o tym, jak stworzyć ciekawe efekty :hover w formie kółek z wykorzystaniem animacji CSS oraz przejść 3D w CSS3.


AuthManager - Open Source User Authentication & Management

AuthManager

Jest to bilbioteka Open Source dla PHP. W oparciu o bazę MySQL pozwala ona na autentykację oraz zarządzanie użytkownikami, wykorzystując przy tym możliwości jakie daje nam integracja z serwisami społecznościowymi, takimi jak Facebook. Jest to narzędzie bardzo podobne do innej biblioteki dla PHP, jaką jest HybridAuth.

  • Protect your content with just few lines of code.
  • Login via Facebook Connect.
  • Spam protection using reCAPTCHA.
  • Google Analytics integration.
  • User access logs.
  • Email Templates.
  • Translation ready. Can be translated in any language.

Create a HTML5 Drag & Drop File Uploader with jQuery

HTML5 File Upload

Kolejny tutorial. Serwis InsertHTML opublikował poradnik, który pokazuje nam jak za pomocą HTML5, jQuery i kilku linijek w PHP możemy zbudować upload plików wykorzystujący technikę Drag & Drop oraz Local Storage z HTML5.


Greatest tool for sorting CSS properties in specific order

CSSComb

Jestem pewien, że każda osoba, która związana jest z pisaniem styli w CSS doceni to narzędzie. W Internecie jest wiele podobnych, darmowych serwisów, które są w stanie uporządkować nieco nasz arkusz styli. Żaden jednak nie potrafi zrobić tego w określonym porządku i wedle określonych zasad, które sami jesteśmy stanie stworzyć. To podejście stara się zmienić serwis CSSComb, który pozwala na sortowanie i robienie porządku w naszym ‘styles.css’ wedle określonej kolejności, którą definiujemy w prosty sposób przed samym użyciem narzędzia.


HubSearch is a GitHub search interface built with Bootstrap, Underscore, jQuery

HubSearch

Jest to niezależny interfejs dla GitHuba zbudowany przy użyciu między innymi Backbone, Underscore i jQuery. Pozwala na przeszukiwanie repozytoriów pod kątem konkretnego języka i słów kluczowych.


canvas-charts

Biblioteka JavaScript, która – wykorzystując HTML5 Canvas API – pozwala na budowanie wykresów. Typy tworzonych grafów to nic innego jak dodatkowe pluginy, które możemy dołączyć do interfejsu renderowania w naszym kodzie.


Motown

Kolejna biblioteka, dająca tym razem możliwość tworzenia interfejsów opartych o Metro, które pojawi się nam jesienią razem z najnowszym Windows 8. Całość zbudowana została przy użyciu  HTML, CSS i JavaScript.


[1], [2], [3], [4], [5]