Facebook Like Box létrehozása

Mindenki látott már olyan honlapot, ahol van egy Facebookos "lájkolódoboz", angolul Like Box. Ha eddig nem láttál, hát most látsz, hiszen ezen a blogon is van ilyen. :)

Na de hogy került oda? Nézzük, hogy tudunk az oldalunkra Like Boxot varázsolni!

Fontos: likeboxa csak rendes rajongói Facebook-oldalnak lehet, magánembernek, magánember-formátumú "céges" profilnak NEM!

Honnan lehet megkülönböztetni a kettőt? Nagyon egyszerű:

1. Ha magánemberként regisztráltál, akkor ezt a sima űrlapot töltötted ki. 

2. Ha cégként, akkor pedig rajongói Oldalat hoztál létre. Egyébként Oldalat magánemberként is hozhatsz létre a saját Facebookos profilodon belül, sőt mi több: ha Oldal létrehozására adod a fejed, akkor mindenképpen a privát profilodhoz rendeld hozzá.

Miért is? 

Nekem 2 oldalamat is át kellett költöztetni, mert először külön mailcímmel, a privát profilomtól teljesen függetlenül hoztam létre őket. Így viszont nem tudtam meghívni az ismerőseimet, hogy lájkolják az oldalt! Elég gyéren is érkeztek a lájkok. Hát ezért. :)

Cégként nagyon gagyi dolog privát jellegű profilt létrehozni. Persze így jelölgetheted agyba-főbe az embereket (egy Oldal nem tud jelölni, csak lájkolható), de ez borzasztóan amatőr, ne tedd! Nem is beszélve arról, hogy ez spammelés tulajdonképpen, lájkolni viszont senki sem fog tudni téged.

Na de elég a rizsából, nézzük azt a Like Boxot végre!

Szépen látogasd meg ezt az oldalt: Facebook Developers

https://developers.facebook.com/docs/reference/plugins/like-box/

Ezt fogod látni:

Ez nem más, mint a Developers Like Boxa, és persze ezt kell úgy átírni, hogy a tiéd legyen belőle.

A Facebook Page URL-hez írd be a saját Facebook oldalad linkjét. Ekkor a jobb oldali kép átváltozik a saját Like Boxoddá, már csak apróbb változtatásokat kell végrehajtani rajta.

A Width (szélesség) és a Height (magasság) változtatható. Hogy mit írj ide be, azt igazából nem lehet pontosan megmondani, hiszen minden attól függ, hogy hova illeszted be, és ott pontosan milyen méretekre lesz szükség. Tehát írj be valamit, és majd utólag a kódban tudsz változtatni ezen az értéken, addig-addig, amíg megfelelő nem lesz a méret.

Ha a Show Faces-ben (Mutasd az arcokat) benne hagyod a pipát, akkor mutatja az oldaladat lájkolók egy részének arcát, ahogy azt a fenti képen is láthatod. Ez jól néz ki, benne szoktam hagyni. Érdemes úgy állítani a magasságot, hogy az alsó arcsort ne vágja ketté, hanem egészben meglegyenek, majd ezt akkor látod, ha már beillesztetted a boxot a honlapodra.

A Color Scheme (színséma)-ból van világos (light) és sötét (dark), szerintem utóbbi elég gagyi, nekem sötét háttér előtt is jobban mutatott a light, ha pedig fehér a honlapháttered, egyértelműen a light a nyerő.

A Show Stream (mutasd a hírfolyamot)-ból én ki szoktam venni a pipát, mert szerintem az összevissza tördelt szöveg iszonyat gagyin néz ki, de hát ízlések és pofonok. 

A Show Bordert hagyd benne (szegély), és a Headert is (fejléc, gyakorlatilag a Keress bennünket a Facebookon felirat).

Kész is van! Most már csak annyi a dolgunk, hogy a Get Code-ra kattintunk, hogy kiadja a kódot. A többféle kód közül válaszd az IFRAME kódot, és ezt illeszd be a honlapodra!

Itt, Blogspoton egy HTML/JavaScript modulba lehet ezt beilleszteni, Wordpressben pedig egy Szöveg widgetbe. 

Utólag is tudod ám módosítani az IFRAME kódot:

(ez egy példa, de mindig így néz ki)

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FKezd%C5%91-V%C3%A1llalkoz%C3%B3-Blog%2F141435126042017&amp;width=200&amp;height=332&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=true&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:332px;" allowtransparency="true"></iframe>

Példa: szélesség: csak írd át a számot (de vigyázz, 2 helyen kell)

magasság: ugyanígy

színséma: light helyére dark, vagy fordítva

a többinél pl.stream, border stb. a true az engedélyezés, a false a tiltás

A végeredmény egy olyan lájkolódoboz, mint amit itt az oldalon is látsz - és ha eddig nem tetted volna meg, most lájkolj bennünket :)

Wordpress: zárt oldal létrehozása + egyedi belépő oldal

Újabb Wordpress problémamegoldások következnek!


Ha online tanfolyamot indítasz, és Wordpress felületet használsz arra, hogy elhelyezd a leckéket, akkor nyilvánvalóan a lényeg, hogy ne láthassa akárki azokat az oldalakat, csak a résztvevők.

A tanfolyam anyagához létre kell hozni egy aloldalt a Softaculousban, és külön Wordpresst telepíteni:
pl. honlap neve: kiskutya.hu
Akkor létrehozunk egy ilyet: kiskutya.hu/oktatas - ezen tehát külön Wordpress lesz telepítve, azaz a főoldaltól teljesen függetlenül szerkeszthető, más sablon lehet hozzá stb.

Az alábbi képet egy másik posztból vettem kölcsön, ott pont arról volt szó, hogy főoldalas WP-telepítésnél a pirossal jelölt maradjon üresen. Az aloldalas telepítésnél viszont pont hogy ki kell tölteni, a beírt név lesz az aloldal neve (fenti példa: oktatas).

A honlapnak ez az aloldala láthatatlan lesz, csak azok fogják látni, akik regisztrálnak oda, és belépnek.

A Vezérlőpultban a Beállítások / Olvasásnál jelöljük be a "Megtiltjuk a kereső motoroknak, hogy bejárják az oldalunkat" opciót! Így optimális esetben a Google nem fogja nézni ezeket az oldalakat.

(Ezt akkor is érdemes bejelölni, amikor még csak félkész oldalunk van, mert ellenkező esetben a Google indexeli a félkész oldalakat, és az elég hülyén mutat kereséskor a találatok között.)

Töltsük le az Authenticator nevű bővítményt! Utána más teendőnk nincs is vele, mint hogy bekapcsoljuk. Ezután az adott oldal linkjét beírva a beléptető oldal jelenik meg, így valóban csak azok fogják látni az oldalakat, akik regisztráltak és be tudnak lépni.

Nem lehet egyszerűbben?

Az első ötletem az volt, hogy mi van, ha egyszerűen csak jelszóval védem le az oldalakat. Ezt egyenként meg lehet csinálni minden oldallal.
Amiért ez nem jó:

• Így sokkal könnyebben juthatnak hozzá az anyaghoz illetéktelenek.
• Másrészt ha csak jelszó védi az oldalt, akkor belépés (=regisztráció) nélkül nem lehet jól megoldani a hozzászólást. Persze így is hozzá lehet szólni, de akkor mindig egyenként be kell írni a nevet, e-mail címet, nagyobb az esély rá, hogy az emberek elfelejtik, hogy korábban mit írtak be, és így átláthatatlanná válik egy idő után, hogy ki kicsoda, ki mit írt. Vagy egyszerűen nem is szólnak hozzá, mert kényelmetlen állandóan beírogatni az adatokat.

Egy másik nagyon hasznos bővítmény a belépési oldal módosításában segít, ez pedig a Pie Register. Ha letöltöd, és bekapcsolod, a vezérlőpulton külön menüpontként jelenik meg.

Mit kezdhetsz vele?
A teljesség igénye nélkül:

• lehetővé teszi, hogy a regisztrálók azonnal a saját jelszavukkal regisztráljanak, ne kelljen a Wordpress által először elküldött krikszkraksszal kínlódniuk
• jelszóerősség-mérőt lehet kitenni
• saját logót lehet feltölteni a Wordpress logó helyett
• Paypal-fizetéshez lehet kötni a regisztrációt
• e-mail megerősítést lehet kérni
• regisztrációkat admin jóváhagyásától függővé lehet tenni
• plusz adatmezőket lehet kitenni (pl. vezetéknév, keresztnév külön, magadról, weboldal stb.)

Szóval igen hasznos kis plugin.

Gyorssegély: Social plugin Wordpressre

Egyesek szóvá tették, hogy a Kreatív Álláskeresés Blogon nem lehet lájkolni a posztokat. Na, hát ebben speciel tök igazuk volt, mert tényleg nem lehetett. :D
Találtam viszont egy igazán jó fej plugint, ami megoldotta a problémát, reméljük. Ez pedig a Lazy Social Buttons nevű plugin. Mivel magyarember úgysem nagyon használ mást a Facebookon kívül, szerintem ez tökéletes. De azért van Twitteres és Google+-os gombja is.
Úgyhogy nyomd meg a gombot, kapsz egy libacombot :)

Nagyon egyszerűen felvarázsolhatjuk a honlapra: megkeressük a bővítményeknél, telepítjük, bekapcsoljuk, és már kész is. 

Illusztráció:

Képproblémák a Wordpressben

Ebben a posztban kétféle, képekkel kapcsolatos problémáról lesz szó:

1.
Amikor elhelyeztem a honlapon a különféle illusztrációkat, először elégedetten dőltem hátra, és egészen addig tartott nyugalmi állapotom, amíg nem szóltak nekem, hogy nem ártana csinálni valamit, mert a képek fehér háttere és a sablon fehér háttere eltérő színű.

Ez nekem fel sem tűnt, mert az én gépemen, Chrome böngészővel teljesen jól jelentek meg a színek. Aztán amikor megnéztem őket egy másik gépen Explorerrel, dobtam egy hátast: húúúú, tényleg nagyon gázul nézett ki, a képek fehér háttere sokkal világosabb volt. Ez nem maradhatott így, muszáj volt vele valamit csinálni. De mit?

Két lehetőségem volt: vagy a sablon háttérszínén változtatok, vagy a képekén. Egyik jobb, mint a másik...

Az első lehetőséget azonnal kizártam. Még ha át is tudom írni a kódot, mennyit kellene próbálgatni, hogy pontosan ugyanolyan legyen a színe, mint a képek háttere? Nem is beszélve arról, hogy képből sok van, és egyáltalán nem biztos, hogy egyforma fehér a hátterük. Maradt tehát a másik lehetőség, a képekkel való machinálás. 
Szóval egyedüli optimális megoldásnak az tűnt, hogy az összes kép fehér hátterét egyenként átlátszóvá kell varázsolni. Fogalmam sem volt róla, hogy ezt hogyan is kell csinálni, úgyhogy irány az internet. Nem bonyolult ez a dolog, íme egy részletes leírás, amiből bárki megértheti:

1. Először is szükség van egy képszerkesztő programra, lehetőleg ingyenesre. Én a Gimpet választottam, amit te is letölthetsz például innen.

2. Ha telepítetted a gépeden a Gimpet, indítsd el, és egy ilyen ablakot fogsz látni:

És persze szükség van a képre, amit szerkeszteni akarsz, én most ezt a bárányosat választottam ki erre a célra. Íme képnézegetőben, hogy látszódjon, ennek még fehér a háttere:

3. Most pedig következzenek a konkrét lépések! Biztosan van több lehetőség is, én azt írom le, ahogyan én csináltam:

Fájl / Megnyitás / Tallózással kikeresem a képet, ami megjelenik a szürke ablakban:

Eszközök / Kijelölő eszközök / Szín szerinti kijelölés, majd a háttér fehér színére kell kattintani. Akkor jó, ha körbe vannak szaggatott vonalazva a fehér részek. Ha a képen belül is vannak fehér részek, akkor onnan ki kell venni a kijelölést, mert azokból is átlátszót csinál. (Megjegyzés: ha a honlap háttere fehér, akkor ezzel felesleges foglalkozni, de ha nem fehér, akkor sajnos figyelni kell erre is.)

Jobb katt a kijelölt fehér részen / Kijelölés / Invertálás
Szerkesztés / Másolás
Fájl / Új - ekkor egy ilyen ablak nyílik meg:

Speciális lehetőségek / Kitöltés ezzel: Átlátszóság, OK
A megnyíló ablak így néz ki:

Szerkesztés / Beillesztés, és már kész is van:

Végül el kell menteni a képet, mégpedig png formátumban:
Fájl / Exportálás...
a megnyíló ablakban balra lent: 

Fájltípus kiválasztása / PNG-kép / Exportálás / Exportálás. 
És már kész is :)
Így már nyugodtan feltehetőek a képek a honlapra. Kicsit fárasztó ezt végigjátszani minden egyes képpel, de egy idő után már úgyis rutinból kattingat az ember.
(És igen, biztosan egyszerűbb lett volna egy videót készíteni erről, de én jobb szeretem így, egyelőre.)

2.
A második probléma: csupán egy apró beállítás kérdése, hogy a szövegbe helyezett képekre kattintva mi történik.

Megtehetjük, hogy hozzárendelünk egy linket, és a képre kattintva a megfelelő oldalra navigál bennünket. De amikor csak simán annyit akarunk, hogy a kép egy illusztráció legyen a szövegben és nehogy elvigye bárhova is az olvasót, akkor oda kell figyelni arra, hogy nem az alapbeállítás a jó!

Ez számomra akkor derült ki, amikor a sales oldal megrendelő formjánál a "tesztalanyaim" izomból elkezdtek a mozgó nyílra kattintani, ami csak illusztráció, illetve a figyelemfelkeltő hatás miatt van ott. Persze ezt ők nem tudhatták, és ha rákattintottak, akkor egy külön oldal nyílt meg, amin csak a nyíl volt. (Haha, de jó lett ez a mondat!)

Mutatom, hogyan kell ezt kiiktatni:

Menjünk be a Wordpressben az adott oldal szerkesztőfelületébe, ahol a képre kattintva az elsötétül, és megjelenik két apró ikon, nekünk a baloldali, képet ábrázoló ikon kell majd, kattintsunk rá:

És megjelenik egy ilyen ablak: 

No, itt a Hivatkozás URL sorra kell koncentrálnunk:

• Ha szeretnénk, hogy a kép elnavigáljon valahová, akkor ide írjuk be a cél-URL-t.
• Ha pedig nem szeretnénk, akkor ebből a sorból töröljük ki azt, ami alapértelmezettként benne van, vagy csak  egyszerűen nyomjuk meg az Egyik sem gombot (spórolunk vele 3 másodpercet). Frissítés, és a képünk szépen belesimul a szövegbe és kattinthatatlanná válik. 

Lesznek még hasonló okosságok, egyelőre elég ennyi mára.

Én és a Wordpress, az összeférhetetlen páros

Jellemző, hogy ezt a blogot is a Bloggeren írom: számomra sokkal áttekinthetőbb és logikusabb, mint a Wordpress. Persze üzleti célú honlap készítésére nem használhattam egy kizárólag blogformátumú oldalt. Így a domainnév és tárhely megvásárlása után evidens volt, hogy Wordpress motort telepítek, és Wordpress segítségével készítem el a honlapomat.

Már az elején sikerült elakadnom. Először egyáltalán nem is értettem, hogy miért kell tárhelyet vásárolnom, amikor a Wordpress is ingyenes. Türelmes környezetemnek sikerült eltolnia az agyamig, hogy a tárhelyre telepített Wordpress motor, meg az interneten létező ingyenes Wordpress blog két külön dolog. 

Az első sokkhatás akkor ért, amikor sikerült telepítenem a Wordpresst, de mégsem jelent meg megfelelően a honlapom. 
Így próbálkoztam: 
Telepítettem a Wordpresst a honlapomon a www.kreativallaskereses.hu/tanfolyam aloldalra. Igen ám, de én azt akartam, hogy rögtön a főoldalon jelenjen meg az a tartalom, ami most az aloldalon volt látható. Komolyan mondom, közel egy hónapon keresztül téptem a hajam, és agyaltam sikertelenül a probléma megoldásán, ami azzal végződött, hogy elkezdtem kódokat átírni, és mivel marhára értek hozzá, sikeresen elszállt az egész honlap. Csodás. Kezdhettem elölről az egészet, mert persze annyira okos voltam, hogy biztonsági mentés sem készült a honlapról.
De nem is ez volt az igazi probléma, mert nem volt még túl sok minden a honlapon, így nem tartott túl sok ideig a helyreállítás sem, a gond az volt, hogy még mindig gőzöm sem volt róla, hogy kellene megoldani azt a problémát, amivel már hetek óta szenvedek.

A megváltást egy kedves ismerős hozta el, aki 3 egész órát áldozott rám az értékes hétvégéjéből, és így sikerült végre rájönni a titok nyitjára. Egészen banális volt, sikítottam, amikor kiderült, hogy mi volt a baj, és csak azért nem vertem a fejem a falba, mert eufóriaszerű öröm kerített a hatalmába, amiért végre, VÉGRE sikerült megoldani ezt a már-már megoldhatatlannak tetsző problémát...

Ezt megosztom veletek, mert ha csak 1 emberen is segítek, és megmentem őt a hetekig tartó kétségbeesett hajtépéstől, már megérte.
Amikor tehát a tárhelyedhez tartozó Control Panelben garázdálkodsz, és a Wordpress telepítésébe kezdve a Softaculoust használod, egy ilyet fogsz látni:

Na, hát ahol a piros nyilat látod, azt a mezőt üresen kell hagyni, ha azt akarod, hogy a főoldaladon jelenjen meg az általad gondosan elkészített tartalom!
Ha a "wp"-t benne hagyod, vagy átírod valamire, akkor arra az "aloldalra" telepíti fel a Wordpresst, és ott jelenik meg a tartalom, míg a főoldalon valami gyökérkönyvtárszerű zagyvaság látható csak.

Tehát ha mondjuk átírom a wp-t tanfolyamra, akkor a www.kreativallaskereses.hu/tanfolyam oldalon látható a tartalmam.
Ha nem írom át, akkor a www.kreativallaskereses.hu/wp -n.
Ha pedig kitörlöm, akkor rendesen és azonnal megjelenik az oldalam, amikor beírom a www.kreativallaskereses.hu -t!

Egy szó kitörlése vagy benne hagyása - ezen múlott egy havi szenvedésem. Csoda, hogy nem vált a szívem csücskévé a Wordpress-féle honlapkészítés?