O Internecie, oprogramowaniu oraz moich własnych małych projektach...
Blog > Komentarze do wpisu

Lista odnośników społecznościowych dla bloga w Blox.pl

Opisując metodę ostylowania listy odnośników społecznościowych obiecałem przygotowanie tego typu dodatku dla Bloksa. Prezentuję zatem skrypt JavaScript, który pozwala dodać taką listę do bloksowych notek.

Osoby, które pobrały skrypt przed 18 marca godz. 21:30, proszę o ponowne jego pobranie i instalację wraz z poprawionym arkuszami CSS.

Efekt działania skryptu blox.soclinks.js

Po co Ci taka lista?

Serwisy społecznościowe pozwalają gromadzić i wymieniać się informacjami o ciekawych miejscach w sieci. Link do Twojego wpisu, dodany przez czytelnika do jednego z takich serwisów, może być znaleziony przez innych jego użytkowników. Serwisy te pozwalają zatem na dotarcie do nowych czytelników, którzy w inny sposób mogliby nie trafili na Twojego bloga.

Niektóre serwisy potrafią generować krótkotrwały duży ruch, a inne niewielki, ale w miarę stały. To jak duży ruch wygeneruje dany serwis zależy zazwyczaj od liczby osób, które dodały ten sam link (lub zagłosowały na już dodany). Im więcej, tym oczywiście lepiej. Warto zatem ułatwić czytelnikom dodanie wpisu do tych serwisów i do tego właśnie służy prezentowana tu lista.

Instalacja

Skrypt, jak to zwykle bywa, należy pobrać (link dalej), dodać do zasobów bloga, a następnie umieścić w polu na kod HTML następujący wpis:

<script src="/resource/blox.soclinks.js" type="text/javascript">
</script>

Oprócz pliku ze skryptem należy dodać do arkusza CSS kod z podstawowym formatowaniem listy, a do zasobów bloga plik z ikonami serwisów - zobacz punkt ostylowanie listy.

Ostylowanie listy

Przygotowałem kilka szkieletowych szablonów CSS dla listy:

  • podstawowy - wyświetlający listę w postaci ikon bez tytułu;
  • ztytułem - podstawowy z włączonym wyświetlaniem tytułu listy;
  • tekst - lista z odnośnikami w formie tekstowej (nie wymaga dodawania grafiki do zasobów);

Należy wybrać tylko jeden z powyższych szablonów (znajdują się w plikach o identycznej nazwie) i ich zawartość skopiować do pola na CSS w panelu administracyjnym Bloksa. Przykładowe szablony zawierają komentarze opisujące przeznaczenie poszczególnych selektorów, a zatem pomijam już tutaj ich opis.

Pobierz archiwum zip z potrzebnymi plikami.

Zmiana parametrów skryptu

Chcąc zmienić zachowanie skryptu można edytować (w pliku ze skryptem) kilka zmiennych:

  • title - określa tytuł listy;
  • mainPaige - przypisanie jej wartości true powoduje wstawianie listy odnośników także na głównej stronie bloga (nie zalecam jeżeli zdarza Ci się dzielić wpisy);
  • SOCIAL - tablica zawierająca obiekty opisujące poszczególne linki - patrz modyfikacja listy.
  • imgSize - określa szerokość ikony (przyda się jeśli zechcesz wstawiać większe niż 16x16px)

Modyfikacja listy

Informacje o poszczególnych linkach są zapisane w formie obiektów, których pola to:

  • name - nazwa serwisu, która będzie widoczna w opisie linku;
  • pos - pozycja ikony na obrazku; UWAGA! pierwsza ikona ma indeks 0, druga 1 itd.
  • url - adres URL wywołania metody dodającej nowy link, bez adresu notki (warto podejrzeć w pliku ze skryptem);
  • title - zmienna określająca czy API obsługuje pole title (true - obsługuje, false - nie obsługuje). Jeżeli nie masz pewności ustaw wartość na false.

Modyfikując kolejność poszczególnych obiektów lub dodając nowe można dostosować zawartość listy do własnych potrzeb.

Zmiana kolejności linków

Zmiana kolejności linków w skrypcie

Poszczególne obiekty opisujące odnośniki znajdują się w wierszach, których kolejność decyduje także o kolejności linków na liście (patrz rysunek). W pliku ze skryptem część z tych linii została zakomentowana ( znaki // na początku wiersza). Odkomentowanie ich sprawi, iż na liście pojawią się nowe odnośniki.

Istotne dla prawidłowego działania skryptu jest jednak aby każda linia (z wyjątkiem ostatniej) opisująca link była zakończona przecinkiem. Ostatnia niezakomentowana linia (bez znaków // na początku) nie może zawierać na końcu przecinka (powoduje to błąd w IE). Modyfikując domyślny wygląd należy więc zwrócić uwagę, aby wymogi te pozostały spełnione.

Dodawanie nowych linków

Dodając nowy odnośnik należy najpierw zmodyfikować plik z ikonami, dodając do niego ikonę serwisu. Zapamiętaj, która w kolejności jest nowo dodana ikona, aby prawidłowo wpisać jej pozycję w pliku ze skryptem.

Mając już zaktualizowany plik z ikonami trzeba zmodyfikować jeszcze plik ze skryptem. Należy dodać w nim kolejną linie z obiektem go opisującym. Najlepiej skopiować opis jednego ze zdefiniowanych odnośników i wkleić go na końcu listy (przed znakiem ] ). Pola zmieniamy podając dane zgodnie z podanym wcześniej opisem. Należy pamiętać, aby prawidłowo podać numer ikony (patrz opis pola pos).

Podsumowanie

Starałem się aby podstawowa instalacja była maksymalnie prosta, aby każdy mógł zainstalować najprostszy wariant. Osoby bardziej zaawansowane mają również możliwość modyfikacji listy, przy niewielkim nakładzie pracy.

Mam nadzieję, że skrypt okaże się przydatny.

tagi/klucze: ,
czwartek, 13 marca 2008, s.z.y.m.o.n
Tagi: blox

Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
patrykgaluszka
2008/03/18 17:13:16
swietny pomysl i w ogole czekalem na cos takiego, ale mam jakies problemy... wszystko zrobilem zgodnie z instrukcja - i gdy probuje dodac strone do blip.pl - po zalogowaniu przekierowuje mnie na "strona nie istnieje"... gdzie moze lezec problem?

nie wiem czy dotyczy to ktoregos z innych serwisow, sprawdzilem jeszcze tylko del.icio.us - nie bylo problemow...

jeszcze jedno pytanie - jak odsunac nieco ikony od tekstu, ktory jest powyzej? tak by miedzy tekstem a ikonami byla linijka przerwy? najprosciej byloby po tekscie dodac w kazdym wpisie jedna linie pusta, moze jest jednak jakas automatyczna metoda?
dzieki.
-
s.z.y.m.o.n
2008/03/18 18:15:08
Błąd z blipem wynikał z umieszczenia przeze mnie starego adresu do kokpitu. Wrzuciłem już poprawioną wersję skryptu.

Blok z ikonami odsuniesz dodając w CSS-ie, dla selektora .socialicons (jest opisany jako blok listy), linię:
margin-top:1em;
-
eirena
2008/03/18 20:12:31
A mi się kompletnie popieprzyło (za przeproszeniem). Na głównej pod wpisem się wszystko porozsuwało, nie widać ikon (po najechaniu wyświetlają się linki, ale samych ikon nie widać). Po wejściu we wpis już się nie rozjeżdża, ale ikon nie widać. To w Mozilli.
W IE w ogóle nie ma tego wiersza, strona się ładuje, na pasku na dole jest już gotowe a a strony nie widać - jest biało, strona wyświetla się dopiero po jakimś czasie, a na dole na pasku jest "Błąd na stronie"... Zajrzysz do mnie? Może coś ewidentnie schrzaniłam...
-
eirena
2008/03/18 20:25:48
Dobra, ikony już się wyświetlają (mój błąd), ale pozostałe problemy zostały - rozsunięcie w Mozilli na głównej i błąd na stronie w IE.
-
s.z.y.m.o.n
2008/03/18 21:23:40
Znalazłem przyczynę błędu (przecinek). Kolejna poprawka już wrzucona.

Co do rozepchnięcia, to zmień poniższy zapis w CSS podając nową wartość (2.5)
.socialicons{
height:1.5em; // <== zmień wartość z 1.5 na 2.5
}
-
eirena
2008/03/18 21:41:21
Wielkie dzięki za pomoc, wartość zmieniona, plik skryptu podmieniony i wszystko działa jak należy. Dzięki Twoim skryptom jeszcze się nie przeniosłam na inną platformę blogową :)
-
s.z.y.m.o.n
2008/03/18 22:01:12
@eirena
Dzięki Twoim skryptom jeszcze się nie przeniosłam na inną platformę blogową :)
Miło mi słyszeć, a właściwie to czytać, że są przydatne ;)

Tak na marginesie, to zaktualizuj sobie również skrypt ostatnich komentarzy. Masz starą wersję, która strzela fochy przy spotkaniu z IE7. Teraz informacje o aktualizacjach są dostępne w oddzielnym kanale RSS, więc na blogu raczej nie wspominam już o nich.
-
never6
2008/03/18 22:22:26
chciałabym rozszerzyć listę linków przez ich "odkomentowanie" (chyba dobrze zrozumiałam Twoją instrukcję?), ale nie mogę "otworzyć" skryptu; chodzi, rozumiem, o skrypt wrzucony do zasobów? Pozdrawiam n
-
s.z.y.m.o.n
2008/03/18 22:29:36
@never6
Skrypt znajduje się w archiwum zip. Należy go wypakować, zmodyfikować (tu odkomentować dodatkowe dane linków) i dopiero wówczas dodać do zasobów.

Zwróć tylko uwagę na przecinki!! - patrz pogrubiony fragment instrukcji
-
eirena
2008/03/18 22:31:44
Przydatne są wielce. Ty i Eskey odwalacie naprawdę dobrą robotę.
O widzisz, muszę zaktualizować w takim razie. Dzięki za zwrócenie uwagi.
-
never6
2008/03/19 01:47:12
przepraszam, że Ci zawracam głowę; po odpakowaniu archiwum wrzucam skrypty tam gdzie trzeba i wszystko działa ok, tzn działa siedem odkomentowanych linków; ale nie mogę otworzyć pliku blox.soclinks, żeby zmodyfikować skrypt o inne linki; mogę skrypt zobaczyć tylko w zasobach blogu - ale tam nie mogę go zmodyfikować; a na dysku przy próbie otwarcia wyskakuje ramka "Host skryptów systemu Windows" z meldunkiem: Błąd: brak definicji 'document'; próbowałam przekopiować skrypt z zasobów do Worda, zmodyfikować go, zmienić nazwę i z powrotem wrzucić do zasobów, ale one go nie widzą (Wd oczywiście dopisuje swoje rozszerzenie); jestem za głupia, aby sobie z tym poradzić. n
-
never6
2008/03/19 01:56:41
Postscriptum do wcześniejszego: działa w Firefoxie, w IE 6 w ogóle ikonek nie widać. Pozdrawiam n
-
s.z.y.m.o.n
2008/03/19 02:00:59
never6
Windows próbuje wykonać skrypt i stąd problem. Otworzysz plik do edycji za pomocą menu kontekstowego (prawy klawisz myszy klik) i wybierając opcję Edytuj.

Najnowsza wersja (1.1.2) działa prawidłowo w IE 6 - pobierz jeszcze raz archiwum.

P.S. W przypadku dalszych problemów pisz na gazetowego maila.
-
2008/03/19 10:13:30
jeśli mogę coś powiedzieć to już dawno się pogubiłam w tych dodatkach...
-
eirena
2008/03/19 15:21:35
@s.z.y.m.o.n
Niestety nowy skrypt w IE6 nadal się wywala - po wejściu we wpis ikonek nie ma, jak się na nie najedzie na głównej to znikają i nadal wywala na dole paska błąd. W mozilli też coś szwankuje bo linki z lewej szpalty - pisz bloga, blog należy do syndykatu wyświetlają się raz jako linki z samym tekstem, raz jako ikonki (przed aplikacją skryptu tego nie było).
-
never6
2008/03/19 16:44:50
u mnie w ff wszystko jest ok (trochę mi wyrzuca poza ramki winietę z tytułem bloga, ale może jest inna przyczyna?); w IE6 blog wgrywa się wolno i nie zawsze wyświetlają się wszystkie ikony. pzdr n
-
s.z.y.m.o.n
2008/03/19 17:57:23
@eirena
Najwyraźniej nie skopiowałem poprzednio wszystkich poprawek z eksperymentalnego skryptu. Obecnie wrzuciłem przetestowaną ponownie wersję i lista jest już widoczna.

Co do znikania ikon, to nie mam pojęcia jak temu zaradzić, więc tak już chyba zostanie (zazwyczaj jednak jest to efekt migania, bo po chwili się pojawiają).

Twoje problemy z odnośnikami graficznego bloksa i syndykatu są zapewne związane z dzisiejszą niewydolnością serwerów (przynajmniej u mnie bloks chodzi wolno). Przeglądarka nie dostała zapewne grafiki i wyświetliła tekst z atrybutu alt.
-
eirena
2008/03/19 18:37:54
@s.z.y.m.o.n
Już wszystko działa, ikonki nadal migają, ale może kiedyś ktoś na to wpadnie ;) Można z tym żyć :)
Co do linków pewnie masz rację, jakoś nie powiązałam tego z tym, że blox się dzisiaj sypie straszliwie.
-
visegrad
2008/03/20 19:01:52
jak zwykle wspaniały widżet, bardzo dziękuję:)
-
maxell-showtime
2008/03/21 13:38:50
U mnie nie chce działać. Dodałem wymagane pliki do zasobów, wrzuciłem do css i do pola na kod html i nic się nie wyświetla na blogu.
Proszę o pomoc
-
bartoszewsky
2008/03/21 18:47:54
Skorzystałem. Dziękuję bardzo. :)
-
ael93
2008/03/22 20:25:42
Dzięki za za fajny gizmo :) Dodałem sobie :)
-
s.z.y.m.o.n
2008/03/25 14:43:37
@maxell-showtime
Skrypt działa prawidłowo. Zapomniałeś jednak dodać plik z ikonami (socialicons.gif) do zasobów, więc ich nie widać.
-
guslarka
2008/04/09 14:52:32
Dodałam, dziękuję, działa jak złoto.
-
guslarka
2008/04/14 02:10:42
...ale znowu mam głupie pytanie. Jak to się dzieje, że dodana przez Ciebie w css przezroczystość socialicons działą pod IE, a gdy odpowiadający za nią kawałek kodu chciałam odnieść do miejsc w wąskiej szpalcie - działa pod operą i mozillą, a pod IE nie raczy? No wierzyć mi sie nie chce, żeby na wyświetlanie przezrovczystości i reakcję hover w IE wpływał parametr display: block :|.
Kawałek CSSA jest ten sam, w dziób, po prostu skopiowany. I działa inaczej.(jak bredzę coś, to przepraszam, ja jestem tylko amator eksperymentator, ja sie na teoprii nie wyznaję)
-
guslarka
2008/04/14 03:00:21
No zawsze narobi hałasu zanim sprawdzi... Przepraszam. Jak dodałam że chodzi o img, to i IE posłuchał. Z czystym sumieniem możesz się pozbyć ostatnich dwóch moich komentarzy :D

Tak czy siak, za skrypty wielkie dzięki, zainspirowały mnie do przerobienia bloxa mojego żeby już nie wyglądał tak ptrzsestarzale i nieudolnie ;)
-
2008/04/22 11:30:21
Bardzo dziekuje, dziala! Mam jednak dwa pytania, na ktore nie znalazlem odpowiedzi ani tu na forum, ani w tekscie:

1. zamiast ikonki facebooka wyswietla mi sie ikonka stumbleupon - dlaczego? Ikonka facebooka w formacie .ico nie chce mi sie zaladowac do zasobow bloxa, mam komunikat, ze niewlasciwy format pliku. Chcialbym jednak wlasciwa ikonke...

2. Czy jest jakis sposob, zeby podpis moj pod notka nie byl "przesuwany" na prawo, obok listy ikonek, jak teraz na moim blogu?

B. dziekuje za odpowiedzi!
-
s.z.y.m.o.n
2008/04/23 21:58:03
@ma_ku:
Co do ikonki - numerów ikony nie zmieniamy! O kolejności ikon decyduje kolejność linii kodu. Przeniosłeś linię facebooka poprawnie, ale zmieniłeś nr ikony na 7, a w pliku z grafiką indeks 7 (liczony od 0) ma ikona SU. Zmień numer na 12, a będzie ok.

Jeżeli chodzi o przesuwanie, to pomorze dodanie w CSSie:

.socialicons{margin-bottom:1em}
-
ma_ku
2008/04/24 16:06:35
Bardzo dziekuje! :-) To naprawde spora pomoc, i swietny dodatek. Przy okazji, zapraszam od czasu do czasu do siebie: swiatinaczj.blox.pl
-
Gość: @nn, *.ssp.dialog.net.pl
2008/05/22 17:09:51
Super widget ;) a mógłby ktoś mnie oświecić w jaki sposób zbudować poprawnie linki do serwisów żeby dodawało od razu link z konretnym wpisem ?
-
kruszyzna
2008/07/25 08:14:48
wybacz lamerskie pytanie, ale w którym miejscu do kodu CSS należy wkleić odpowiedni kawałek (ja wybrałam ten z tytułem)? kod html dodany, pliki dodane do zasobów bloga i na stronie nic nie widać.
Ten fragment css wkleiłam po takim czymś:
#BlogSzerokaSzpalta A:hover {
-
kruszyzna
2008/07/25 08:16:46
dodam jeszcze, że korzystam z linuksa a przeglądarka to Opera.
-
kruszyzna
2008/07/25 09:26:10
O ja oferma, już działa :)
-
Gość: Wojtasek27, *.rcb.vectranet.pl
2008/08/15 21:59:01
Działa fajnie. Ale jak dać takie coś na Blogspot?
-
wojtekb.1
2008/09/02 15:29:53
Pobrałem skrypt. Działa. Planujesz może kolejne skrypty na blogi?
-
Gość: fiedzio, *.neoplus.adsl.tpnet.pl
2008/11/01 23:13:07
sorrki że tak się wtrącę :( nie lepiej używać skryptów dodajdo.com?, nie dość że mają wszystkie no może większość serwisów social bookmarkingowych, dodatkowo wyświetlają osoby odwiedzające serwis coś na wzór mobloglog to jeszcze promują najczęściej czytane newsy z serwisów korzystających z dodajdo :) może warto rozważyć?
-
malkos_i_chrostula
2009/07/06 10:15:49
A ja mam problem, wszystko zrobiłem tak jak w opisie i niestety nie działa.
-
hrjakchorwacja
2009/09/11 12:28:32
Raz ikonki są widoczne, a raz nie. Co może być przyczyną?
-
s.z.y.m.o.n
2009/09/20 16:15:51
Trudno powiedzieć, co jest przyczyną. Musiałbym uzyskać ten sam błąd u siebie, aby móc zbadać sprawę :(

Pod jaką przeglądarką występuje błąd (istotna również wersja) - to kluczowa sprawa.
-
hrjakchorwacja
2009/09/20 17:11:19
Pod Safari. 4.0.3 Jak potem doczytałem, nie tylko u mnie to się dzieje (vide komentarze powyżej). Przepraszam więc, że hałasowałem bez czytania.
pozdr
HR jak CHorwacja
-
jawojtko
2009/11/19 22:24:48
nie będę tu gadał bez sensu, na to przyjdzie czas jak zacznę próby użycia Twoich specjałów. Na razie, po wstępnej lekturze Twoich wpisów powiem/napiszę tylko krótko: JESTEŚ WIELKI :-)
-
jawojtko
2009/11/22 20:57:01
to jeszcze raz ja. Mógłbyś się odezwać do mnie mejlem? Nie znam Twojego adresu, a mam prośbę techniczną. Jeśli będziesz tak miły to napisz proszę na wjk(at)wojtko.pl czy mogę Ci zawrócić głowę :)
-
Gość: SocialEngine, *.neoplus.adsl.tpnet.pl
2010/01/03 17:11:28
Ja bym dodał do listy jeszcze SocialEngine - skrypt do tworzenia serwisów społecznościowych w PHP
-
fortart
2010/02/07 22:30:25
Dziękuję, fantastyczny wynalazek. Z domyślnych serwisów brakuje śledzika Naszej Klasy.
Czy można zmienić lokalizację paska? Tak by pokazywał się na samym dole, pod podpisem, poniżej paska BlogFrogu?
-
cytat24
2010/03/27 13:24:44
Faktycznie z tym śledziem by się przydało, ale poza tym bardzo ładnie działa. Dodałem, wielkie dzięki.
Skrypt ostatnie komentarze w nowej wersji
Po sporych perturbacjach skrypt wraca do życia. Teraz z prostym generatorem kodu do w klejenia na blogu!
Wszyskich zainteresowanych zapraszam do ponownej instalacji.
Czytaj dalej...
Promuj swojego bloksa
Czytelnicy mogą promować Twojego bloga umieszczając linki do notek w serwisach społecznościowych. Ułatw im to zadanie dodając na blogu listę odnośników, która tą czynność sprowadzi do jednego kliknięcia.
Czytaj dalej...