Dodajemy Wykop do Bloggera

Wykop to serwis do którego możemy dodawać ciekawe strony. Każda dodana informacja jest oceniana i dyskutowana przez społeczność internautów. Od niej zależy czy dany wpis będzie popularny czy też nie. Jednym ze sposobów wzbogacenia Bloggera o możliwość dodawania wpisów do wykopu jest mój gadżet Podziel się. W tym poście przedstawię drugą możliwość. Na stronie wykopywarki mamy dostępne kilka kodów, które można umieścić bezpośrednio w szablonie naszej strony. Informacja o osobach, które również uznały nasz post za ciekawy (wykopały go) będzie na bieżąco aktualizowana. Pytanie tylko gdzie go wkleić. Możliwości jest kilka, albo na początku treści posta, albo w jego nagłówku, albo pod postem. Przyjrzyjmy zatem się standardowej wykopywarce (duża ikona z ilością wykopów). Zmodyfikujmy trochę kod tak, aby edytor Bloggera przyjął go bez zastrzeżeń.

<script language='javascript'>
var wykop_url=location.href;
var wykop_title=document.title; 
var wykop_desc=encodeURIComponent('Podaj opis');
var widget_bg='FFFFFF';
var widget_type='normal';
var widget_url='http://www.wykop.pl/widget.php?url='+(wykop_url)+'&amp;title='+(wykop_title)+'&amp;desc='+(wykop_desc)+'&amp;bg='+(widget_bg)+'&amp;type='+(widget_type);
document.write("<div style='float: right;'><iframe border='0' frameborder='0' scrolling='no' src='"+widget_url+"' style='border:none;width:72px;height:65px;overflow:hidden;margin:0;padding:0;'/></div>");
</script>

Dodałem dodatkowo umiejscowienie ikony (prawa strona - <div style='float: right;'>) oraz zamieniłem kilka znaków, które powodują błędy Bloggera. Mając już kod, spróbujmy go dodać do naszych postów, a dokładnie do tytułu posta. Logujemy się do Bloggera, wybieramy Układ/Edytuj kod HTML. Zaznaczamy Rozszerz szablony widżetów. W podglądzie źródła naszego szablonu szukamy (Ctrl+F) następującego fragmentu:

1.<b:includable id='post' var='post'>

2. <div class='post hentry uncustomized-post-template'>

Wklejamy poniżej zmodyfikowany kod wykopu. Wszystko funkcjonuje prawidłowo przy wyświetlonych pojedynczych wpisach. Na stronie głównej naszego bloga ikonka wykopu będzie niestety starała się dodać adres bloga, a nie poszczególnych postów, więc....wykorzystamy wyrażenie warunkowe, które będzie dodawało wykopywarkę tylko na stronach postów, a nie na stronie głównej.

<b:if cond='data:blog.pageType != "index"'>
 Nasz zmodyfikowany kod wykopu
</b:if>

Efekt widoczny na moim blogu. Oczywiście możemy zmienić miejsce dodania ikony jak i również jej położenie (do prawej, do lewej, na środku itd.). Na przykład dodanie ikony do treści posta, to odnalezienie w szablonie następującego kodu:

1.<div class='post-body entry-content'>

...i wstawienie poniżej tego co poprzednio. Sposób ten umożliwia, w zależności od naszych preferencji, dodanie ikon/linków do dowolnych serwisów (zobacz np. serwis Wyczaj to)

Jeśli nie odpowiada nam duża ikona to możemy wybrać z wykopywarki kod obsługujący wersję compact.

9 Komentarzy - Dodajemy Wykop do Bloggera

Irek pisze...: u mnie nie działa; 1 grudnia 2009 01:21
Devon pisze...: W ogóle nie działa czy dostajesz jakieś błędy? Sprawdź raz jeszcze czy wszystko poprawnie wklejasz, a jak tak to podeślij szablon bloga, zobaczę :) Działać na pewno działa (widać na blogu).; 1 grudnia 2009 01:28
Anonimowy pisze...: a mozecie mi pomoc jak w blogerze dodać post do konkretnej strony ktora wczesniej stworzylam.
mianowicie mam kilka stron utworzonych a nie mam pojecia jak do nich dodawac posty teraz
pomozcie gg 2968033
moj blog http://estradowaorkiestra.blogspot.com
bede wdzieczna.
pozdrwawiam i czekam na info :P; 22 września 2010 18:58
ichigo pisze...: Ja mam ten sam problem co kolega/koleżanka u góry. Pomooocy; 2 listopada 2010 16:42
Katarzyna Kulma pisze...: chcialam zapytac gdzie powinnam wkleic zmodyfikowany kod wykopu (
Nasz zmodyfikowany kod wykopu
), tak by polecane byly posty ze strony glownej (a nie adres blogu w ogole)?; 21 lutego 2012 23:08
Unknown pisze...: hej,

dodalem wszystko tak jak powyzej,

jednak button wykopu jest jakby nieaktywny,

jakis pomysl?; 14 lipca 2012 08:01
Unknown pisze...: sprawdzilem, ze nie dziala w chromie ale juz np w explorerze jest ok.

pozdr; 14 lipca 2012 08:26
Unknown pisze...: Dzięki! Trzeba było trochę podłubać, żeby guzik pokazywał się tam gdzie chcę. Najlepiej w JavaScripcie znaleźć po klasie konkretny element do którego chcemy doczepić guzik.

Przykładowo, w szablonie AwesomeInc dodałem coś takiego na samym końcu, tuż przed </body>:

<b:if cond='data:blog.pageType != "index"'>
<script language='javascript'>
var wykop_url=location.href;
var wykop_title=document.title;
var wykop_desc=encodeURIComponent('Podaj opis');
var widget_bg='FFFFFF';
var widget_type='normal2';
var widget_url='http://www.wykop.pl/widget.php?url='+(wykop_url)+'&title='+(wykop_title)+'&desc='+(wykop_desc)+'&bg='+(widget_bg)+'&type='+(widget_type);
wykopstr = "<div id='wykop' style='float: right;'><iframe border='0' frameborder='0' scrolling='no' src='"+widget_url+"' style='border:none;width:56px;height:60px;overflow:hidden;margin:0;padding:0;'/></div>";
document.getElementsByClassName('column-left-inner')[0].insertAdjacentHTML('afterbegin', wykopstr);
</script>
</b:if>

To dodaje guzik na górze posta po lewej stronie:

http://www.what-if.pl/2013/06/sekundy-przestepne.html; 13 czerwca 2013 02:10
Zapytaj o wykop pisze...: A Zapytaja umiałbyś dodać?; 18 sierpnia 2013 14:47