Kategorie: Wszystkie | Bajki | Ciekawe | Gry | Myśli | Obrazy | Pamiętnik | Poezje | Porady
RSS
poniedziałek, 30 stycznia 2012

 

…i gdyby tak mrówki budowały
Drogi asfaltowe i eseje pisały
O naukowych odkryciach 
I serc zdobyczach
To świat byłby 
Jak teraz zniszczony
Całe szczęście, że
Mrówki esejów nie piszą 


Tagi: wiersz
15:32, lindeczek , Poezje
Link Dodaj komentarz »
piątek, 27 stycznia 2012

Facebook

 

 

Facebook udostępnił kolejny widget, który jest dość przydatny zwłaszcza na platformę blox, choć równie dobrze można go zainstalować zgodnie z poniższą instrukcją na dowolnej stronie. 

Jak wygląda działanie widget'u Facebook - Rekomendacje? 

Na blogu KFK.blox.pl można poniżej wpisów zobaczyć jak on wygląda, ale opiszę na wszelki wypadek. 

Widget Facebook - Rekomendacje jest to blok w którym pojawiają się wpisy z naszego bloga (strony) polecane przez innych użytkowników facebooka. Jak na razie jest on w fazie Beta, czyli  testowej, aczkolwiek jak zauważyłem funkcjonuje pierwszorzędnie. 
W bloku pojawiają się zwykle ostatnie wpisy, które były polecane na facebooku. Jeśli nasz blog przegląda ktoś niezalogowany na facebooku, pojawi się na nim ikonka z możliwością zalogowania na facebooku, a wpisy polecane będą opatrzone informacją o ilości poleceń na facebooku. Jeśli natomiast nasz blog będzie przeglądać ktoś zalogowany na facebooku, wówczas nie będzie ikony logowania, wpisy za to będą opatrzone opisem kto z naszych znajomych polecał dany wpis na FB.

Widget Facebook - Rekomendacje jest o tyle przydatny ponieważ jego działanie jest jak zauważyłem stabilniejsze od działania widgetu LinkWithin (który potrafił się psuć i zamiast obrazków pojawia się czasami sama lista). Wpisy z naszego bloga na tej wtyczce pojawiają się w taki sposób w jaki umieściliśmy je na koncie naszego bloga na facebooku.

Dodatkową funkcją tego widgetu jest możliwość sprawdzenia jaka wtyczka generuje ma największy wpływ na ruch na naszej stronie, aczkolwiek tę funkcję pomijam ze względu na to, że funkcja ta nadal jest w fazie testów.

Pamiętać jednak należy, że widget będzie spełniał swoją funkcję jedynie wówczas gdy wpisy z naszego bloga są polecane na Facebook'u. To chyba jedyny warunek konieczny, aczkolwiek nawet nie używając Facebooka dla naszego bloga (strony), możemy zobaczyć czy tak właśnie jest nawet podczas generowania kodu widgetu :)

 

Instalacja widgetu Facebook - Rekomendacje

Jest dość prosta, bo wystarczy kilka kroków, aby wstawić podstawową wersję tego widgetu.

Należy wejść na stronę: 

Facebook Developers - Recommendations Box 
https://developers.facebook.com/docs/reference/plugins/recommendations/

...i ustawić konkretne dane dla widgetu jaki chcemy zainstalować na swoim blogu. Na poniższym obrazku widać przykład określania podstawowych danych widgetu dla bloga http://kfk.blox.pl i na tej podstawie opiszę jak należy postępować tworząc własny widget.

Widget Facebook - Rekomendacje  (instrukcja 1)

DOMAIN - w tym polu należy wpisać adres bloga dla którego tworzymy widget (naszego bloga)
(konieczne - trzeba wypełnić obowiązkowo)

APP ID - pole można pozostawić puste, dla zaawansowanych w tym polu należy wpisać numer ID strony na facebooku naszego bloga, numer ID to ten który jest na końcu adresu strony naszego bloga na facebooku 
(niekonieczne - można pozostawić puste)

ACTION - pole można pozostawić puste (wówczas domyślnie będą wyświetlać się wszelkie działania dotyczące naszego bloga na facebooku)
(niekonieczne - można pozostawić puste)

WIDTH - szerokość widgetu (300 to wartość minimalna, i polecam ustawić taką jak tekstu w szerokiej szpalcie własnego bloga, wówczas belka z napisem REKOMENDACJE będzie na całą szerkość z pozostawieniem odległości marginesów szerokiej szpalty... czyli Width = szeroka szpalta - marines lewy - margines prawy) Wartość ma wpływ tylko na wygląd widgetu

HEIGHT - wysokość widgetu (polecam ustawić więcej niż wyjściowe 300, ponieważ im wyższy widget tym więcej polecanych wpisów wyświetla widget)  

HEADER - nagłówek, czyli wyświetlanie paska z napisem Rekomendacje

COLOR SCHEME - schemat kolorów widgetu, i jak to zwyczajowo dla Facebooka, do wyboru są dwa: 
        LIGHT - jasny  (polecam dla blogów z jasną szeroką szpaltą)
        DARK - ciemny (polecam dla blogów z ciemną szeroką szpaltą)

LINK TARGET - forma otwierania linków z widgetu (polecam pozostawić domyślne _blank , czyli otwieranie w nowej karcie)

BORDER COLOR - kolor ranki widgetu (ostawiając taki jak kolor tła szerokiej szpalty będzie on niewidoczny) 

FONT - rodzaj czcionki używanej w tekście widgetu.

Po ustawieniu wszelkich danych widgetu, po prawej stronie powinien pojawić się podgląd naszego widgetu, wraz z listą polecanych (rekomendowanych) wpisów. Wówczas możemy nacisnąć przycisk na dole GET CODE, aby pobrać kod do wklejenia na bloga.

Wówczas wyświetli się okienko z podświetlonym HTML5, co będzie wyglądać następująco:

Widget Facebook - Rekomendacje  (instrukcja 1)

Z tego okienka kopiujemy obydwie części kodu (każdą z osobna) i obydwie wklejamy (pierwszą nad drugą częścią kodu) w okienku Edycji bloga o nazwie Dodaj pod każdym wpisem (którą znajdziecie w USTAWIENIA -> WPIS) ...zapisujemy i gotowe.

Jeśli nas interesuje wstawienie tego widgetu za pomocą kodu IFRAME, wówczas klikamy w tym okienku na napis IFRAME i wówczas powinno to wyglądać mniej więcej tak, choć ostatnio ta funkcja jest niedostępna dla platformy blox.pl, dlatego polecam powyższą z zastosowaniem HTML5:

Widget Facebook - Rekomendacje  (instrukcja 2)

...oczywiście treść wewnątrz ramki będzie odpowiednia dla tych ustawień jakie zrobiliście. Należy skopiować treść ze środka ramki. 

Wejść do Edycji bloga na blox i wkleić skopiowany kod w ramce Dodaj pod każdym wpisem (którą znajdziecie w USTAWIENIA -> WPIS) ...następnie zapisać i...GOTOWE.

Wówczas pod każdym wpisem będzie się wyświetlać lista wpisów z waszego bloga które są polecane na facebooku.

Miłego używania :)


Facebook

 

Co jakiś czas dostaję listy z zapytaniem jak zrobić taki sam Wysuwany Facebook Like Box jaki jest na KFK.blox.pl, czyli żeby się wysuwał z góry. Początkowo myślałem, że ewentualne zmiany mojego przepisu będą dość proste dla każdego, ale chyba się zagalopowałem. Dla mnie tego rodzaju zabawy są proste i przyjemne, ale za to są kwestie w których bez pomocy specjalisty też niewiele jestem w stanie zdziałać. Dlatego też poniżej podaję przepis na zainstalowanie Wysuwanego Like Boxa dla blox, który będzie się wysuwać z góry. Otóż trick jest dość prosty i wymaga zmian tylko kilku elementów kodu jaki znaleźć można we wpisie Wysuwany Facebook Like Box dla blox, lub też postępować zgodnie z tym co znaleźć można poniżej.

W przypadku KaFKowego Like Boxa wysuwającego się z góry kod jaki zamieściłem w CSS jest taki:

.facebook{
        float: top left;
        width: 310px;
        height: 575px;
        background: url("ADRES_PLIKU_Z_OBRAZEM_TŁA_DLA_LIKE_BOXA");
        background-repeat: no repeat;
        background-position: 0px 0px;
        display: block;
        padding:0;
        position:fixed;
        top: -556px;
        z-index:10000;  }

 

INSTALACJA pkt 1

Powyższy kod (ten na szarym tle) kopiujemy. W miejscu czerwonego tekstu wpisujemy adres pliku tła jakie zrobiliśmy i umieściliśmy w zasobach naszego bloga. Cały i uzupełniony tekst kopiujemy i wklejamy do polna na CSS naszego bloga (Wygląd->Edycja CSS).

..i jest to kod który określa box w którym zamieszczony jest Facebook Like Box. Mówiąc prościej ten box, czy też element będzie się wysuwał, a wraz z nim zamieszczony w nim widget facebooka jakim jest Like Box. Wymiary tego boxa (WIDTH, HEIGHT) określić możecie sami, ponieważ są to wymiary obrazka który jest tłem. Co ważne Like Box facebooka w schemacie kolorów LIGHT (białym) ma przeźroczyste tło i to dlatego trzeba dodać obrazek tła. Obrazek ten będzie też wystawać (tutaj na 20 pixeli), aby mógł się wysuwać i jeśli będziecie robić go sami to pamiętajcie, że ta część obrazka tła najlepiej jeśli będzie częściowo przeźroczysta (tak jest w przypadku mojego obrazka). Jeśli macie ochotę go pobrać ode mnie to oto link:

OBRAZEK TŁA DO WYSUWANEGO LIKE BOX FACEBOOKA (z góry) 

To była część dotycząca boxa, teraz trzeba dodać go do naszego bloga czyli do elementów bocznej szpalty i zamieścić w nim kod naszego Like Boxa. Dla tego przykładu, czyli takiego jaki jest na KFK.blox.pl wygląda to następująco:

<div class="facebook">
<div style="color:#fff; padding: 1px 0 20px 0;">
***w miejsce tego tekstu oraz "gwiazdek" wklejamy wygenerowany dla naszego bloga kod IFRAME ze strony Facebook Developers - Like Box (lub inny widget)***
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">    $(function (){        $(".facebook").hover(function(){            $(".facebook").stop(true, false).animate({top:"0"},"medium");        },function(){            $(".facebook").stop(true, false).animate({top:"-556"},"medium");        },10000);    });
</script>

</div>
</div>

       

INSTALACJA pkt 2

Powyższy kod (ten na szarym tle) kopiujemy. Usuwamy tekst na czerwono (razem z gwiazdkami), a na jego miejsce wklejamy wygenerowany kod Like Boxa dla naszego bloga (strony). Całość kopiujemy i wklejamy w Polu na dodatkowy HTML bocznej szpalty (Ustawienia->Boczna Szpalta).

Jak widać zmiany w porównaniu z przepisem jaki podałem w poprzednim przykładzie na Wysuwany Like Box dla blox wysuwanym z lewej strony na ten wysuwany z góry są niewielkie. Oprócz zmian wymiarów samego boxa doszły podstawowe dwie.

Pierwszą jest umiejscowienie samego boxa, czyli w pierwszej części (w kodzie CSS) element float:left; zmienił się na float:top left; Co prawda dodałem jeszcze opis umiejscowienia tła no repeat i padding, ale to tylko kosmetyka. 

Drugą jest w określenie animacji boxa, czyli w drugiej części (w kodzie Java) wśród funkcji animate. Zmieniłem .animate({left:"0"} na .animate({top:"0"} czyli funkcję animacji z lewej na górną i wystarczyło tylko określić "długość" na jakiej ma zachodzić animacja, czyli zmieniłem .animate({left:"-240"} na .animate({top:"-560"} dzięki której to zmiennej funckja Javy jest określona jak daleko ma schować nasz box (wartość zależna od rozmiarów boxa!!!).

Mam nadzieję, że przepis będzie pomocny i ...tym razem jednak pojawi się więcej komentarzy o zainstalowaniu wysuwanego Like Boxa Facebooka według mojego przepisu. Ucieszę się również jeśli dodacie mój blog w zakładkach na swoich blogach. 


    Znalazłem sposób na to jak zrobić wysuwany Facebook-Like Box w serwisie blox i przedstawiam go poniżej. Opisana metoda może posłużyć do dodania również innych widget'ów na blox w formie wysuwanego okienka. Sztuczka względnie prosta i stosowana przez większość bloxerów w celu wstawienia dowolnego widgetu. 

    Przedstawiam przykład umieszczenia wysuwanego okienka Facebook'owego Like Box'a na blogach serwisu blox. 

    Tworząc taki wysuwany Facebook'owy widget, jak Like box z wyświetlanymi wszystkimi elementami (-faces, - stream, -header) i szerokości - 240px (width), musimy wykonać trzy kroki:


– obraz tła (w przykładzie o wymiarach 260x600);

2 - utworzyć w kodzie CSS naszego blogu element, w którym później umieścimy obiekt skryptu Java. W elemencie tworzonym w CSS można umieścić praktycznie dowolny obiekt jak np.: obrazek, film, playlistę ...etc.). Kod CSS znajdziemy w zakładce edycji bloga - wygląd/Edycja CSS. Tam właśnie wklejamy poniższy kod (najwygodniej na samym końcu) elementu CSS o treści:
Kod do wklejenia w oknie "Edytor CSS":

.facebook{
        float:left;
        width:260px;
        height:600px;
        background: url("http://ADRES.blox.pl/resource/NAZWA_PLIKU_Z_OBRAZEM_TŁA");
        display:block;
        left:-245px;
        padding:0;
        position:fixed;
        top:10px;
        z-index:10000;
    }


gdzie:
.facebook - jest nazwą elementu css;

{ .... }- zawartość takich nawiasów jest określaniem stylów i innych atrybutów elementu w kodzie CSS;
width - szerokość elementu;
height - wysokość elementu;
background: url("adres url obrazu tła") - obraz tła powinien mieć wymiary zgodne z rozmiarami elementu CSS. Mówiąc w skrócie - tak wstawiamy w elemencie CSS obraz tła, czyli dowolny obrazek na swojego bloga;
left - położenie od lewej krawędzi (w tym przypadku od okna przeglądarki w stanie oczekiwania);
top - położenie od górnej krawędzi (w tym przypadku określa od okna przeglądarki);
ADRES - wstawiamy adres naszego bloga (bez końcówki blox.pl, bo już jest, prawda?)
NAZWA_PLIKU_Z_OBRAZEM_TŁA - nazwa pliku z obrazem tła zamieszczonym w zasobach.


Mając już utworzony element CSS musimy jeszcze…

3 wstawić do elementu CSS obiekt Facebook Like Box, który pobieramy ze strony Facebook Developers - Like box. Oczywiście wcześniej musimy "umieścić" naszą stronę w serwisie Facebook (ponieważ to facebook'owy adres strony należy podać podczas tworzenia Like Box'a).
     Przykład podałem dla obiektu Facebook Like Box o szerokości 240px i z marginesami ustawionymi na 5px od krawędzi górnej i prawej, a od lewej 0 (czyli wartości atrybutu: padding). Skrypt jest ustawiony w taki sposób, że obraz tła elementu CSS wystaje o 15px z prawej strony (czyli po najechaniu na niego myszką, okno z obiektem Facebook Like Box się wysunie). 
    Obiekty skryptów Java umieszcza się w kodzie HTML, tak więc musimy to zrobić w jedynym miejscu udostępniającym nam dostęp do kodu html, czyli zakładce - Ustawienia/Boczna szpalta (tak jest w serwisie blox, bo w serwisie blogspot ma się większy dostęp do kodu html). Poniżej podany kod wystarczy skopiować i wkleić na końcu listy w oknie: "Pole na dodatkowy HTML". ...i już mamy gotowe.
Kod do wklejenia w oknie "Pole na dodatkowy HTML":

<div class="facebook">
<div style="color:#fff; padding:5px 5px 0 5px;">
***w miejsce tego tekstu oraz "gwiazdek" wklejamy wygenerowany dla naszego bloga kod IFRAME ze strony Facebook Developers - Like Box (lub inny widget)***
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">    $(function (){        $(".facebook").hover(function(){            $(".facebook").stop(true, false).animate({left:"0"},"medium");        },function(){            $(".facebook").stop(true, false).animate({left:"-240"},"medium");        },500);    });</script>
</div>
</div>

        


gdzie:
NAZWA_ELEMENTU_CSS - nazwa utworzonego w poprzednim punkcie elementu CSS (w przykładzie był to zwrot .facebook );

- pomiędzy znacznikami

i ostatnim znajduje się kod określające atrybuty i/lub funkcje skryptu Java (najczęściej sam kod widgetu, w podanym przykładzie wysuwanego okna dochodzi jeszcze funkcja animacji na akcję najechania myszką). Mówiąc w skrócie w tym miejscu wklejamy dowolny widget (jego kod), a w tym przypadku kod Facebook Like Box'a;

- atrybut padding określa marginesy od krawędzi okna elementu CSS (należy pamiętać o tym, że: 

marginesy + wymiary_obiektu_Java = wymiary_elementu_CSS

    Polecam samemu ustawić odpowiednie marginesy dla obiektu Like Box i samemu utworzyć sobie obraz. Jako wyzwanie i własny wkład w tworzenie swojego bloga (marginesy pomogą ustawić odpowiednio obiekt na tle). 
    Ja obraz tła wykonałem programem GIMP, co jest stosunkowo proste, ale można to zrobić w wielu innych programach. Ważne jest, że aby kawałek wystający w oknie przeglądarki miał wygląd wysuwanej zakładki musi być przeźroczysty, w miejscu gdzie ta zakładka ma być niewidoczna. 

    Oczywiście po każdej z operacji w panelu administracyjnym blox naciskamy przycisk "zapisz" celem zatwierdzenia dokonanych zmian. W sumie u mnie zadziałało, tak więc sobie myślę, że powinno u innych użytkowników blox'a. Jednakże uprzedzam instalacja na własne ryzyko... ja tam jestem tylko amatorem. Dlatego też polecam podczas wszelkich operacji w kodach CSS i HTML wcześniejsze zapisanie kopii zapasowej w osobnym pliku tekstowym (txt). Dla leniwych podpowiem, że można ten obrazek ściągnąć ode mnie z bloga, tu - Obraz tła wtyczki Facebook Like Box.
Jeśli się ktoś zdecyduje na instalację wysuwanego Like Box'a wg mojego przepisu to bardzo proszę o dodanie informacji w komentarzach, czy działa i gdzie :)


Tagi






Internetowa Telewizja





AUTOR
Mariusz Łokietek



Lindeczek na Youtube
Related Posts Plugin for WordPress, Blogger...