maandag 14 maart 2011

Een eigen unieke webpagina binnen een facebook pagina

Dit leek me een perfecte oplossing: Facebook.com is inmiddels zo ongeveer de best bezochte website van de wereld en groeit alleen maar in populariteit. Maar een facebook pagina kan niet concurreren met een eigen persoonlijke en professionele webpagina. Daarvoor is facebook niet serieus genoeg en wordt er nog teveel onzin verkocht en geschreven. Maar een combinative leek me perfect: een eigen persoonlijke en professionele webpagina binnen een facebook (bedrijfs) pagina. En het is me gelukt. Het resultaat is te zien door:

  • In te loggen in facebook.com
  • Zoeken op ' Spiderman Webdesign' en vervolgens zie je aan de linkerkant van die pagina een aantal linken met ' webpagina, webpagina2, webpagina3, webpagina4, webpagina5….' ; Klik op een link om het resultaat te zien;
  • Sneller is de directe link: http://www.facebook.com/pages/Spiderman-Webdesign/187978994572024 (om op pagina van Spiderman Webdesign te komen) of http://apps.facebook.com/spidermanwebdesign/ om een voorbeeld van een geintegreerde website die hier geplaatst is als applicatie binnen facebook.com (maar dat is een technisch verhaal wat u mogelijk niet nodig heeft).

Wat ik hier verder schrijf is als eerste voor mezelf bedoeld. Het duizelt me nogal. Ik ben blij dat het me gelukt is deze unieke functie te activeren en mij facebook pagina ziet er nu tenminste wat professioneler uit dan het kale facebook design. Maar hoe heb ik dit gedaan? Ik heb gebruik gemaakt van twee verschillende mogelijkheden. 1) Static FBML en 2) iframe applicatie waarbij nummer 1 heel wat makkelijk is. Maar het slechte nieuws is dat facebook vanaf 18 maart geen nieuwe FMBL applicaties meer accepteert. Dat is dan ook de reden dat ik vandaag via FBML nog even snel een lijstje met website designs ga integreren zodat die in ieder geval nog dit jaar zichtbaar zijn voor klanten van Spiderman Webdesign. Maar optie 2 is dus eigenlijk belangrijker omdat deze optie ook na 18 maart de geldende optie zal blijven. Het stappenplan hiervoor:

  1. Aanmelden op facebook en in zoekbalk van facebook zoeken op ' developer' ; deze applicatie toevoegen aan pagina
  2. Naar de applicatie toegaan en nieuwe applicatie aanmaken
  3. Alle gegevens invullen.
  4. Het design en websitebestanden uploaden naar een bepaalde map op de server
  5. De canvas URL binnen developer applicatie aanpassen; Ziet er zo uit bij mij:

    Canvas Pagehttp://apps.facebook.com// (dit is een zelfbedachte naam om later de applicatie en bijbehorende webpagina makkelijk terug te vinden)

    The base URL of your app on FacebookCanvas URL (de root map van het design)

  6. Onder tab 'mijn toepassingen' klikken op de aangemaakt toepassing en onderin staat een link

Zie er als volgt uit: Voorbeeldcode

Snel aan de slag met wat voorbeeldcode!

  1. Klikken op die link, de getoonde code kopieren naar een nieuw aan te maken index.php bestand (via notepad++) en dit nieuwe bestand ook uploaden naar de rootmap van het design op de server.
  2. De bestanden downloaden zoals getoond op de applicatiepagina onderaan. " Download the client library" ; deze uitpakken, de map uploaden naar de root van het design en de naam van de map op de server aanpassen zoals getoond in ' voorbeeldcode' .
  3. En toen bleek de pagina zichtbaar te worden via http://apps.facebook.com/spidermanwebdesign/ terwijl ik gewoon de andere facebookactiviteiten zoals chat kan voortzetten.

dinsdag 1 maart 2011

Importeren van complete html website in weebly sitebuilder

Vandaag is weer eens een dag dat het onmogelijk waarheid lijkt te worden. Even zoeken op internet leert ons dat het niet mogelijk is een complete website te importeren in de gratis weebly.com sitebuilder. Dat zegt Weebly. Logisch. Stelt u eens voor: u koopt een mooi design (via www.dewebmeester.nl voor 19 Euro,éénmalig) en stopt dit in de gratis weebly sitebuilder en vervolgens maakt u fluitend uw website verder op……. Wat heeft Weebly daar aan? Niets. Het resultaat zou zijn dat hun servers overspannen zouden raken. Nou, beste Weebly, maak uw borst maar nat! (Vreemde uitdrukking overigens….). Het lukt me. Op het eerste gezicht heel veel makkelijker dan gedacht maar in tweede instantie toch nog wel een hele klus om dit goed te doen. Maar het bericht gaat de wereld in: via www.dewebmeester.nl kunt u voortaan uw bestaande website of design laten importeren in de online en zeer professionele websitebuilder van www.Weebly.com . Natuurlijk ga ik hier het proces beschrijven en ik wil iedereen vragen die dit leest en zelf gaat proberen om bevindingen te plaatsen in dit blog (heel makkelijk, gewoon een commentaar schrijven en na goedkeuring wordt uw bijdrage geplaatst; inclusief linken).

Voorbeelden

Ok, eerste het bewijs. Ik nam een willekeurige HTML pagina (zie foto hiernaast) en heb dit ontwerp aangepast zodat het past binnen weebly.com. Het resultaat is dan ook te zien op: http://dewebmeester.weebly.com Wat is nu bereikt: Gratis hosting. Ja, niet verkeerd natuurlijk alleen moet u er wel rekening mee houden dat er onderaan de pagina een kleine link verschijnt. --à Create a free website with Weebly
ß-- Het laten verwijderen van deze link kost iets van 4 dollar per maand maar via www.dewebmeester.nl krijgt u hier al snel 50% korting op. (Let op: kijk goed onder aan de pagina van de hier getoonde voorbeelden en u zult zien dat de link ontbreekt.)

Vervolgens was mijn vraag of het mogelijk is een design inclusief javascript te importeren in Weebly. Ja, ook dat is me gelukt. Het voorbeeld is te zien op http://spidermanweb.weebly.com ; Uw vraag: ik heb een eigen domeinnaam en wil niet een domeinnaam met 'weebly' daarin, kan dat? Ja natuurlijk. De voorbeelden zijn alleen om te laten zien dat ik deze templates/ design werkelijk host onder www.weebly.com en dus onderdeel uitmaken van de weebly sitebuilder binnen mijn (gratis) weebly account.

Maar helaas: het lijkt nu wat makkelijk dan het is. Ik was iets te snel blij met het resultaat. Wat ik was vergeten was dat het design binnen de sitebuilder niet was aan te passen (al werd de website prachtig weergegeven) wat de sitebuilder dus nutteloos maakte. En dus ging ik op zoek naar de oplossing…….

Werkwijze om website te kunnen onderhouden binnen www.weebly.com

Nu wordt het spannend. Wat als eerste opvalt bij het openen van het design binnen de sitebuilder (vraag even om inlogcodes bij info@dewebmeester.nl om zelf dit alles te bekijken en te proberen )was dat er geen werkbare blokken waren binnen het design. Opnieuw: logisch. De aanpassingen kon ik doen via het schakelen tussen en standaard weebly design (die met die wolkenlucht bovenaan is prima) en mijn geïmporteerde design. Eerst naar het standaarddesign, (via tab 'design') en klikken op 'edit HTML/CSS' daar onder tab 'HTML' zie je de code voor het plaatsen van 'editable blocks' binnen de webpagina.

//// <div class="body-content">
    <div id="content-main">
             %%CONTENT%%
          </div>
     </div>////

Deze code kopieer ik, klik op 'cancel', schakel terug naar eigen design, opnieuw klikken op 'edit HTML/CSS' en ik plak de code binnen de content van de website waar ik content wil weergeven. Klikken op 'save' en we zijn weer terug bij ons design waar niets gebeurd lijkt te zijn. Geen nood. Ik schakel weer terug naar standaard design, klik op 'elements' en 'drap and drop' een element op de plaats waar ik de code voor het contentblok heb geplaatst. Als het goed is zie je nu dat het element blijft 'plakken'. Nu weer terug schakelen naar eigen design en element aanpassen naar eigen wensen. Ik zal proberen zo snel mogelijk een instructie filmpje te plaatsen op www.youtube.com en ook binnen dit blog.