Archyvas "Web Developer" kategorijos

Embeding Facebook nuotraukų galeriją savo interneto svetainėje

Sekmadienis, kovas 9, 2014 Nik

Kartais, todėl atrodė nereikšmingos užduotys tampa toks bauginantis. "Pridėti" Facebook "nuotraukų galeriją į savo svetainę", buvo tik toks uždavinys. Aš tiesiog nors ji būtų taip paprasta, kaip pridėti bet kokį kitą "Facebook" socialinių Plugins .

Aš pradėjau, darant prielaidą, kad ten tikrai būtų papildinys "Facebook" programų kūrėjų portale numatyta atlikti šią užduotį. Mano nuostabai nėra tokio plugin jei kaip dalis "Facebook" socialinio Plugins (Jei esate vienas iš tų, kuriems iki havn't naudotą Facebook socialinių Plugins, aš pridėjo pastabą šio posto pabaigoje tiesiog savo naudai) ,

Aš googled už sprendimą, ir aš supratau, kad yra keletas variantų, kaip eiti apie tai daro šią užduotį. Nebuvo sprendimai, kurie iš tikrųjų veda mane manyti, kad tai ne paprastą užduotį, po visiems. Yra sprendimai ten, rodančių kelis metodus, vienas taip pat turėjo tam tikrą sprendimą, naudojant "Facebook" Graph API ... Atvirai kalbant, aš žinau, kad tai būtų būdas eiti apie tai, bet ne kai paprastas sprendimas aš ieškojau.

Galiausiai, po ieškote keletą variantų (aš išvardyti kai kurie žemiau jūsų nuoroda), aš pagaliau rado vieną ... Mačiau šį įterptųjų Facebook nuotraukų galeriją apie kai puslapyje. Manyje kūrėjas, padarė Žiūrėti kodą ir rasti paprastą sprendimą aš ieškojau .... Tiesiog pridėkite šį kodą į savo HTML, kur jums reikia "Facebook" Albumas bus įdėta.

<div id=" fb-root "></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class=" fb-post " data-href=" https://www.facebook.com/media/set/?set=a.375518759212.157287.64037939212&type=3 " data-width=" 466 "><div class=" fb-xfbml-parse-ignore "><a href=" https://www.facebook.com/media/set/?set=a.375518759212.157287.64037939212&type=3 ">Post</a> by <a href=" https://www.facebook.com/chembur ">inchembur.com</a>.</div></div> 

Na! Kodas aukščiau rodomas FB Albumas, kaip nurodyta toliau ...

Įdėkite-facebook-photo-galerija-į-svetainės-02

Dabar tai vienas atrodė, kad viskas, Facebook socialiniai ryšiai, komentarai ir tt

Kitos trys geri būdai, kad aš ištirta ir kad būtų naudinga nedaug, žiūri skirtingų rūšies Look-n-jaustis, yra išvardytos žemiau

"Facebook" socialinė Įskiepiai

Tiems, kurie nežino, čia yra Socialinių Plugins teikiamų pagal nutylėjimą "Facebook", sąrašas, kad kūrėjas gali naudoti pridėti į bet kurį tinklalapį. Jos gana paprasta pridėti šiuos įskiepius į bet kurį tinklalapį galite kurti, taip paprasta, kaip "Ctrl-V & crtl-V. Žinoma, jei esate kūrėjas galite would'nt reikalauja, kad bet daugiau šaukštas kūdikį, nei tai ... tikslios kodus, kad jums reikės įdėti, aš siūlau jums apsilankyti Facebook "socialinio Plugins puslapį

Kaip mygtukas

Tegul žmonės akcijų puslapius ir iš svetainės turinį atgal į savo Facebook profilis su vienu paspaudimu, todėl visi jų draugai gali juos skaityti.

Dalintis mygtukas

Leiskite žmonėms dalintis "Facebook", pasidalinti su konkrečių draugais ar su grupe. Alternatyviai, jie gali keistis privačiame žinute.

Įterptosios Pranešimai

Įterptosios Pranešimai jums pridėti bet viešas įrašas iš "Facebook" į savo dienoraštį arba interneto svetainėje.

Skundai

Skundai įskiepiai leidžia žmonėms pakomentuoti bet turinio gabalas jūsų svetainę.

Siųsti mygtukas

Tegul žmonės privačiai siųsti turinį į savo svetainę į savo draugų.

Sekite mygtukas

Tegul žmonės prenumeruoti viešųjų atnaujinimus apie Facebook.

Aktyvumas kanalas

Rodo įdomiausią, naujausią veiklą vyksta jūsų svetainėje.

Rekomendacijos Feed

Rodo labiausiai rekomenduojamas turinį savo svetainėje.

Rekomendacijos Baras

Tegul žmonės kaip turinį, gauti rekomendacijas ir pasidalinti tuo, ką jie skaito su savo draugais.

Kaip Box

Ypatinga versija, pavyzdžiui, mygtuką tik "Facebook" puslapiuose.

Facepile

Rodyti profilio nuotraukas žmonių, kurie, susijusių su jūsų "Facebook" puslapyje arba app.


get ExpressingIT News by Email Prenumeruoti ExpressingIT Email arba Follow Me on Twitter


Jo apie "Web dizaineriai, kurie negali kodas"

Antradienis kovas 9, 2010 Iki nikhil

Su mano ribota įgūdžių rinkinys su įrankiais, pavyzdžiui, Photoshop ir Illustrator, galiu sąžiningai prisipažinti, kad aš geriau kūrėjas, nei aš esu dizaineris. Bet mano fonas su pagrindine (serverio pusėje) plėtrai, Java / PHP / COBOL, buvo labai teigiamas poveikis mano UI kūrimo įgūdžių. Ką reiškia, kuriant savo dizainą, ty, kai aš padaryti dizainą, manau, apie tai, kaip dizainas gali būti geriausias paverstas HTML CSS ir nors daro HTML CSS, duodu mintį apie posistemės technologijų ir padaryti pagrįstai įsitikinęs, kad HTML gali būti lengvai perkelta į XSL kilpomis arba PHP fragmentus ir tt

Per metus, man buvo įmestas galvą į dizaino iki UI dizainerių, kurie tikriausiai donot turėti clue, kas arba HTML CSS. Visus šiuos metus aš galvoju, kad norėčiau paprašyti per daug, jei aš tiesiog tikėtis, kad dizaineris, kuris bando shov jo "neįmanoma, kad kodas" dizainas žemyn mano gerklės, suprasti truputį kas jo dizainas bus konvertuoti į. Tai padėtų tiesa?

Tada aš atėjau visoje šio posto šiandien ... Web dizaineriai, kurie negali kodas ... Ačiū Viešpatie! Aš tik vienas iš daugelio, kurie jaučia tą patį ... virš artitle yra tiek ilgai kalbantis .. bet verta skaityti, kas tai žodis.

Ačiū Elliotas Jay Atsargos ... jaučiu palengvėjimą!

Štai keletas ištraukų iš Elliots straipsnį .

Oho, ką dieną! Jis pradėjo su viena mažai Čivināšana ir baigėsi diskusija, kad atrodė, kad nurašymas visoje web dizainas bendruomenei. Atrodo, yra keletas labai stiprių nuomonės laikomos, ar interneto dizaineriai turėtų galėti kodas Dalyko.
...
Taigi, prieš mes į tai, leiskite man greitai Priminti ką pasakiau apie šį rytą Twitter:

Sąžiningai, aš šokiruotas, kad 2010 aš vis dar eina per "web dizainerių", kurie negali kodą savo dizainą. Ne pasiteisinimas.

... Aš buvau šiek tiek daugiau specifinių mano Čivināšana. Aš kalbu apie dizainerių, kurie neturi net pagrindinių HTML ir CSS įgūdžius paversti plokščią dizainą į realų svetainėje. Ne žmonės, kurie sąmoningai renkasi ne kodą; Tiems, kurie negali. Ir aš taip pat kalbama tik front-end kodo čia; Žinoma, tai juokinga manyti, kad dizaineriai taip pat turėtų būti nuostabios back-end programuotojai ...

Mes gauname "web" dizaino siunčiami Illustrator, 300 dpi, neįmanoma kodas, be nuoseklumo / praktiškumo.
~ Amy Mahon

Tai vis per vėlai, ir aš turiu, į kuriuos vyniojami tai kažkaip. Žinau, kad bus daug žmonių, kurie nesutinka su manimi, ir mano tikslas nėra įžeisti ar sutrikdyti visiems, kurie gali ne kodas, bet tikiuosi, kad kai kurie iš to, ką aš sakė atspindi kai kuriuos dalykus, kurie visada sugalvoti kai pasinėrė į šios diskusijos.

Tuo dienos pabaigos, aš ne prarasti to, kas gali koduoti miegą ir kurie negali. Aš tiesiog tikrai nustebintas tiek daug dizainerių, kad trūksta front-end įgūdžius, kaip aš maniau, tai buvo praeityje.

Taip pat skaityti komentarus, ten buvo apie 320 komentarai, kaip aš rašau ... jie yra verta skaityti.
Prašome perskaityti Elliots visą pranešimą čia .. Web dizaineriai, kurie negali kodas


get ExpressingIT News by Email Prenumeruoti ExpressingIT Email arba Follow Me on Twitter


HTML & XHTML

Sekmadienis, spalis 18, 2009 Iki nikhil
  • Dokumento tipas deklaracija turi būti pateikti ne dokumento, kuris naudoja HTML sintaksė pradžioje. Tai gali būti pasirinktinai naudojami per XHTML sintaksę, tačiau tai nėra privaloma. XHTML dokumentas nereikia įtraukti DOCTYPE nes XHTML dokumentai, pristatomi tinkamai naudojant XML MIME tipą ir būtų tvarkomi XML naršyklių, visada teikiamos jokios Photoshop režimu.
  • Be XHTML, tag pavadinimai yra mažosios raidės ir paprastai apibrėžiamas būti parašytas mažosiomis raidėmis. HTML, tačiau žodį pavadinimai yra atvejis nejautrus ir gali būti parašytas visas didžiąsias ar mišraus atveju, nors dažniausia konvencija klijuoti su mažosiomis raidėmis. Iš pradžios ir pabaigos žymės atveju neturi būti tas pats, bet nuosekliai daro padaryti kodas išvaizdą švaresnis.

Privalumai naudojant HTML

  • Suderinami su esamais naršyklių
  • Autoriai jau esate susipažinę su sintakse
  • Švelniai ir atlaidus sintaksė reiškia nebus vartotojui priešiška " Geltona Screen of Death ", jei klaida netyčia ūgliai per
  • Patogus sutrumpinimas sintaksė, pvz autoriai gali praleisti keletą žymių ir atributų reikšmes

Privalumai naudojant XHTML

  • Griežtai XML sintaksė skatina autorius rašyti gerai suformuotą žymėjimo, kuris kai kurie autoriai gali rasti lengviau išlaikyti
  • Integruojama tiesiogiai su kitomis XML žodynų, pavyzdžiui, SVG ir MathML
  • Leidžia XML apdorojimo naudojimą, kuris kai kurie autoriai naudoja kaip dalį savo redagavimo ir / ar leidybos procesų

get ExpressingIT News by Email Prenumeruoti ExpressingIT Email arba Follow Me on Twitter


CSS2.1 User Agent Style Sheet Numatytasis

Antradienis, liepa 28, 2009 Iki nikhil

Vakar, po klausimu aš susidūrė su CSS Atstato "Google Chrome" ... aš maniau, kasti šiek tiek giliau į User Agent Style Sheets srityje ...
Surasta šią lentelę pagal nutylėjimą vertybių CSS2.1 User Agent Style Sheets ... (tiems, kurie nežino, kas yra "User Agent Style Sheets", tai laikytis Kas yra User Agent Style Sheets (specifikacija) .

Išsamų CSS 2.1 User Agent Style Sheets numatytuosius spauskite čia


get ExpressingIT News by Email Prenumeruoti ExpressingIT Email arba Follow Me on Twitter


User Agent Style Sheets: Mystery Paraštės "Google Chrome"

Pirmadienis, liepa 27, 2009 Iki nikhil

Vakar, kaip ir kiekvienas kitas "Ground Hog diena", aš dirbau kai kurių CSS / Tableless maketai. Viskas klostėsi taip gerai IE 7, FF 3 ir chromas, kol baigsis staiga pamačiau keletą un-ignorable maržas matyti tik "Google Chrome". Nors labai keista ir worring, buvo keletą naujų klaidą / problemą, kad aš atėjo šakų visame, buvo pagaliau kai mano žemiškas darbą prieskonių. Liūdna (bet gražus) ji gavo fiksuoto per kelias minutes nuo zondo ...

Iš esmės, tai atrodė "Google Chrome" ignoravo savo CSS Atstato (margin: 0px). Tai iš tikrųjų buvo padaryta vartotojo agentas stylesheet (-webkit-padding-pradžios: 40px). Taigi sprendimas buvo iš naujo šį stilių, nustatant padding: 0 pažeidęs elementų.
Geras būdas išvengti šios problemos vyksta bet kurio elemento yra naudoti pasaulinę CSS Rest taip

* {Margin: 0; padding: 0; }

Kas yra User Agent Style Sheets (specifikacija)?
Žemiau ištrauka yra paimta iš http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , atlikite nuorodą daugiau skaityti User Agent Style Sheets

CSS 1 pristato nurodydamas, kad kiekvienas vartotojas agentas (UA, dažnai "interneto naršyklė" arba "interneto kliento) turės numatytąjį stilių, kad pristato dokumentus protingą idėją - tačiau, be abejo, žemiškas - būdu. CSS 2 sako, kad atitinkantis vartotojo agentai privalo taikyti numatytąjį stilių (ar elgtis taip, lyg jie padarė), o vartotojas agento numatytasis stilius lapas turi pateikti dokumento kalba elementus būdais, kurie atitinka bendruosius pristatymo lūkesčius dokumento kalba; CSS 3 gali būti tos pačios nuomonės.

Kadangi CSS specifikacijos palikite jį iki realizacijos, ar naudoti "Real" stiliaus lapą numatytąjį ar ne, tai nenuostabu, kad jūs neturite rasti numatytąją stilių kiekvienoje naršyklės diegimo aplanke. Skirtingai Microsoft Internet Explorer, taip pat operos, pavyzdžiui (ir tiek, kiek aš žinau), Gecko naršyklės, pavyzdžiui, Firefox ir Netscape Navigator (surasti "html.css"), bet ir Konqueror padaryti gana paprasta suprasti savo numatytąjį stilių.


get ExpressingIT News by Email Prenumeruoti ExpressingIT Email arba Follow Me on Twitter


Kaip įjungti raštu Status Bar (window.status) Firefox

Pirmadienis balandis 6, 2009 Iki nikhil

Kitas senosios mokyklos atmintis papildomas ...

Kodėl mes, kad windos.status?
Javascripts galėtų būti košmaras, kai turite kažką derinti. "Firefox" turi keletą naudingų addons, kaip "Firebug" Thats daro mūsų gyvenimą lengvai ir to, už populiariausių debug technika JavaScript balsas turi eiti į "alert ()". Anywaz! Yra keletas atvejų, kai pridedant ALERT neturi derinti savo neteisingai elgiasi javascript yra tiesiog nėra gera idėja. Pavyzdžiui! turite dragble elementą, kurio pozicija turi būti įspėti .... NE NE! Dont do it! ... Jūs tiesiog gauti begalinis įspėjimus ar jūs įpratęs būti suteikta galimybė iš tikrųjų Drap savo dragable. Na! Yra daugiau gerų situacijų, kur galite rašyti iš debug tekstus būsenos juostoje, daug daugiau usful ... Patikėkite! Jo patirtis!

IE pagal nutylėjimą paliko rašote į naršyklės būsenos juostoje naudojant sintaksę "window.status = 'kažką derinti" ", bet Firefox nėra. Taigi, kad langai statuso pasikeitimas, tai galite padaryti vieną iš šių.

Atviras about: config naršyklėje (tipas "about: config", tai į adreso juostą) ir ieškoti
Namas. disable_window_status_change. Pakeiskite jį klaidinga ... tiesiog paspauskite ant užrašo perjungti savo valstybę.

Arba, alternatyviai

"Įrankiai → Funkcijos → Turinio → įjungti JavaScript / Išplėstinė → Pakeisti būsenos juostos tekstą"

Ir taip pat pažymi, kad ... rašyti būsenos juostoje savo Javascript, IE tik ok, jei jūs naudojate trumpas sintaksė ty statusą = 'kai derinti teksto ", bet Firefox, turite naudoti visą sintaksę ty window.status =' kažkas debug "


get ExpressingIT News by Email Prenumeruoti ExpressingIT Email arba Follow Me on Twitter


SevenUp! Skatinti pasaulį atsikratyti IE6!

Sekmadienis, kovas 22, 2009 Iki nikhil

"Google" pradeda judėti, greitas žmones sąvartynas IE6 ... Iki bugging IE6 vartotojams dėl puslapio apkrova laikiną langą ... negali būti labai gera idėja ... bet būdamas UI kūrėjas, turiu prisijungti prie šios juostos vagonas ... viena mažiau naršyklė man jaudintis ... Atsiprašome savanaudis jis yra! bet aš turiu įtraukti šią Javascript ... (TRY Šis puslapis IE6) ...
Ei! ir šviesesnę rašte ... Rodyti jis yra apie JAVASCRIPT POWER ekranas .... ji netgi gali sumažinti milžinišką (arba kai ji buvo)

Taigi ... Pagalba atsikratyti IE6 pasaulį su viena linija JavaScript!

http://code.google.com/p/sevenup/


get ExpressingIT News by Email Prenumeruoti ExpressingIT Email arba Follow Me on Twitter


Pasaulinis Vertėjas Įskiepis Jūsų WordPress blog

Sekmadienis, kovas 8, 2009 Iki nikhil

Aš taip susijaudinęs apie didėjantį skaičių puslapių peržiūrų mano dienoraštyje, kad aš patikrinti savo "Google Analytics" beveik kasdien. Aš pastebėjau, kad mano dienoraštis yra nurodytos svetainės, daugelyje kitų kalbų ir žmonių visame pasaulyje. So nice !!!!
Norėdami padaryti gyvenimą šiek tiek lengviau mano NE ANGLŲ žiūrovas laivo, aš pridėjo Google Widget / Plugin vadinamas "Pasaulinis Vertėjas".

Pasaulinis Vertėjas sako, kad jis "Automatiškai verčia į 41 skirtingų kalbų dienoraštį vyniojimo keturis skirtingus vertimo internete variklius (" Google "vertimas Variklis, Babelfish Vertimas sistema, FreeTranslations.com, promt)" ... Jei norite pridėti jį prie savo WordPress diegimo ... Check it out Čia http://www.nothing2hide.net/wp-plugins/wordpress-global-translator-plugin/

Nežinote, kaip gerai vertimas, bet aš nuoširdžiai tikiuosi, kad tai padeda kelis kolegoms kūrėjams ten, kurie galų gale pasiekė savo dienoraštį, tik turi būti nusivylęs, kad tai yra lietuvių ....

Vertėjas nuorodos yra iš Side Bar Bottom ....


get ExpressingIT News by Email Prenumeruoti ExpressingIT Email arba Follow Me on Twitter


Kreipiamės į kelis langus įkėlimo funkcijas JavaScript

Šeštadienis, kovas 7, 2009 Iki nikhil

Štai dar šiek tiek peice JavaScript gudrybė, kad man teko kasti aplink, nes situacija commaned ją. Viename iš mano interneto svetainių, aš turėjau šią situaciją, kai turėjau įgyvendinti "windows.onload" du kartus. Pirmas dalykas, kad būtų atėjo nepatyręs proto kaip mano (turiu sąžiningai pasakyti, kad, nes aš naudoju javascript struktūras ir bibliotekas, aš forgotton daryti paprastus dalykus on my own ... liūdna bet tiesa), yra šis metodas ...

 window.onload = onloadfn1;
 window.onload = onloadfn2;
 window.onload = onloadfn3;
 ir tt ...

Atsiprašome pasakyti, bet šį įpratęs dirbti ... dont wanna aptarti vykdymo mokslas Javascript daug ... bet pagal mano pastarojo laikotarpio patirtį, tik paskutinis funkcija (onloadfn3) bus blogai tikrai gauti įvykdytas.

Įprastomis situacijas, skirtingai kasyklos (kurį aš kalbėti apie šiek tiek vėliau) ... galite padaryti vieną iš šių veiksmų atlikti mutliple įkėlimo funkcijas ....

Ar kažkas panašaus į tai

 funkcija doOnLoad () {
         onloadfn1 ();
         onloadfn2 ();
         onloadfn3 ();
 }
 window.onload = doOnLoad;

Nes mano dabartinę padėtį, aš negaliu naudoti vieną iš aukščiau ...
Kodėl man reikia skambinti windows.onload du kartus, o kad skambina dvi funkcijas vienoje įkėlimo funkciją? Čia yra greitas žvilgsnis mano problema pareiškimą ...

"Mano svetainės puslapiuose yra struktūrizuoti kaip WordPress tema .... ty yra bendra header.php ir footer.php kad gauna įtraukti į visas svetainės puslapiuose. Yra įkėlimo funkcija implementaion į footer.php padaryti kai bendrus įkėlimo funkcijas. Ir ten yra keletas puslapių, kurie turi kažką savo įkėlimo, išskyrus tuos, kurie padaryti bendros įkėlimo funkciją. Jei aš priskirti skambinimo funkcijas tiesiogiai window.onload prižiūrėtojas, jis turi pranašumą anksčiau pavestas iššūkius, į footer.php "

.... Ar mano problema suprantama :) ?

Na! yra keletas sprendimų, kad aš rasti. Jie visi yra labai panašūs ir daugiausia implementions tirpalo tikrą Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Sprendimas:

Tiesiog pridėkite šį kodą javascript į svetainę ...

 funkcija addLoadEvent (func) {
     var oldonload = window.onload;
     jei (typeof window.onload! = 'funkcija') {
        window.onload = func
     } Else {
        window.onload = function () {
            jei (oldonload) {
                   oldonload ()
           }
           func ()
        }
    }
 } 

Ir tai vadiname vietoj įprastų "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Daugiau kodui veikti puslapyje apkrova *
 }); 

Privalumai šį kodo fragmentą ...
1. Visų pirma, jis leidžia jums turėti keletą windows.onload renginius, vadinamus iš atskirų dalių savo kodą, be overridding ankstesnį apibrėžimą
2. Tai tikrai nekrenta į akis. Jis gali būti dedamas į failą su jūsų kitų scenarijų arba į atskirą failą.
3. Jis veikia net jei window.onload jau nustatytas.


get ExpressingIT News by Email Prenumeruoti ExpressingIT Email arba Follow Me on Twitter


Kaip įtraukti PHP kodą viduje Smarty Šablonas

Antradienis, vasaris 24, 2009 Iki nikhil

Maniau, kad tai vienas bus Doodle rasti Google, nes daugelis tu mus UI ir scenaristams reikės tai padaryti ant kasdien, tai apima peice PHP kodo fragmentą (Php) tiek į Smarty šablonų (.TPL). Aš supratau, kad lengviau / populiarus savo užklausą, dar sunkiau rasti tikslaus atsakymo ... milijoną paieškos rezultatus, tačiau dauguma jų Italai į "failą" apima Smarty ... kuri turi tokią sintaksę

{Įtraukti failą = "include / header.php"}

Tai iš tiesų inlcuded failų baudą, bet kaip tekstą, ką aš norėjau buvo įtraukta failą rezultatas. (Pastaba aukščiau naudojamas įtraukti šabloną viduje šablono failą). Galiausiai su bitų persiverance .... Aš szarpnęły visoje slighty modifikuoto sintaksę, kuri buvo mano reikalavimas atsakyti ... todėl čia ji yra ... jei havn't rasti vieną, jau


{Include_php failas = "include / header.php"}


get ExpressingIT News by Email Prenumeruoti ExpressingIT Email arba Follow Me on Twitter


Prenumeruoti ExpressingIT RSS
get ExpressingIT News by Email Prenumeruoti ExpressingIT Email
Follow Me on Twitter