Evalueringssenter
Er TYPO3 for deg?
Hvordan legge inn sosiale bokmerker på en side med TypoScript
Det å bruke sosiale bokmerker på sidene er blitt mer og mer populært, og som du ser har vi til og med lagt det inn på typo3.no. Men søker man i TYPO3 sitt "extension" repository, vil du kun finne 2 muligheter, hvor faktisk ingen er nødvendigvis så egna til alle sin bruk. Så selv om det faktisk her på typo3.no er brukt en av de, er den så modifisert at den egentlig ikke trengs, TypoScript gjør all jobben.
Hva gjør egentlig en sosial bokmerke link?
For å si det enkelt, så tar den bare å henter ut linken til den sida du er på, kombinerer denne med linken til en spesiell side på den sosiale siden, f.eks. Facebook slik at man ved denne både går til sida på Facebook og har med seg linken som man skal dele.
Linken blir f.eks. seende slik ut.
www.facebook.com/share.php=http://home.linnearad.no/meg.html&title=Om%meg
Og i TYPO3 er dette mulig å få til uten å kode en linje PHP eller bruke Javascript.
Så la oss gå i gang med å lage disse linkene.
Hente linken og tittel fra den sida vi er på
Å ha TS maler i egen mappe gjør det enklere å administrere TypoScript og oppsett
Uansett om vi bare skal ha en link til Facebook, eller linker til mange av disse tjenestene, er det to ting vi må klare.
- Det første er å hente ut linken til sida vi står på.
- Det andre er å hente ut tittelen på sida.
Intet av dette er noen stor heksekunst med TypoScript, og i og med at måten å hente ut en denne linken på er identisk for alle linkene, er det lurt å lage et objekt som vi kan gjenbruke. Ellers er det en god ide når man lager en slik funksjon å legge TS-en i en egen katalog som en ext mal. Så det første man gjør er å lage denne mappen (om man ikke har en fra før), samt lager en mal (Template). Jeg har gitt den navnet #501 Social Bookmarks. Jeg skal koble den opp senere. Som man ser av bildet, legger jeg langt mer i denne mappen.
Så får vi begynne med å selve TS Setup. Som sagt, det vi trenger er å hente den komplette linken, og for å få til det trenger vi å hente to elementer, det ene er url til selve nettstedet (domenet) og det andre er linken til selve siden (index.php?id=8) uten domenenavnet.
Domenenavnet kan vi klare å hente ved hjelp av getText datafunksjonen, i dette tilfellet getIndpEnv: HTTP_HOST (se side 8 i TSref). Og for å hente ut selve sidelinken, så kan vi bruke typolink funksjonen (TSref side 35). Og koden blir som følger.
temp.getLink = COA
temp.getLink {
10 = TEXT
10.wrap = |
10.data = getIndpEnv: HTTP_HOST
10.rawUrlEncode = 1
20 = TEXT
20.typolink.parameter = {page:uid}
20.typolink.parameter.insertData = 1
20.typolink.addQueryString = 1
20.typolink.returnLast = url
20.rawUrlEncode = 1
}
Jeg skal forklare litt mer i detalj.
Først definerer vi et temporært Typoscript objekt av typen Content Object Array (COA), her kalt temp.getLink. Deretter så fyller vi dette objektet med to stk Content Object av typen TEXT (TSref side 74 ff). Det første objektet (10) gjør som følger.
- sier at dataene som hentes skal wrappes i http:// | /
- henter nettstedets url (data = ...)
- kjører dataene gjennom PHP-funksjonen rawurlencode (altså ren url)
Det neste objektet (20) gjør som følger.
- typolink.parameter = {page:uid} henter uid til sida
- typolink.parameter.insertData = 1 setter dataene inn i objektet
- typolink.addQueryString = 1 henter ut eventuelle L ,cHash m.f. verdier slik at man kan få korrekte linker til enkeltnyheter, bildegalleri med mer.
- typolink.returnLast = url forteller at vi bare skal hente selve verdien av linken
Da var det objektet på plass! Men vi har også bruk for å hente tittelen på sida, og til det laget vi et nytt Content Object.
temp.getTitle = COA
temp.getTitle {
10 = TEXT
10.data = page : subtitle // page : title
10.insertData = 1
10.rawUrlEncode = 1
}
Og det dette gjør er som følger, henter navnet på sida fra feltet subtitle i sideegenskaper (er det tomt hentes sidenavnet), og setter inn dataene.
Så da er vi ferdig med trinn 1, og skal begynne å sette sammen det nødvendige.
Så setter vi inn en link
Før vi begynner å sette sammen linkene, kan det være lurt å laste opp de nødvendige ikoner til en filmappe slik at vi kan referer til disse.
Og deretter legger vi enn følgende kode i samme TS Setup som tidligere. Et nytt Content Object.
temp.socialBookmarks = COA
temp.socialBookmarks {
10 = COA
10 {
10 = COA
10.htmlSpecialChars = 1
10.wrap = #1 se nedenfor
10 {
10 = TEXT
10.value = www.facebook.com/share.php
20 = COA
20.wrap = ?u=|
20 {
10 < temp.getLink
}
30 < temp.getTitle
30.wrap = &title=|
}
20 = IMAGE
20.file = fileadmin/templates/eriksverden/icons/art-facebook.png
20.altText = Del på Facebook
20.titleText = Del på Facebook
20.params = class="facebook"
30 = TEXT
30.value = Facebook #2 se nedenfor
}
}
- #1: wrappen skal her være: <li><a href="|" target="_blank">
- #2: wrappen skal her være: <span>Facebook</span></a></li>
- Ett eller annet "ødela" disse inne i selve koden, så jeg må vise de utenfor.
Det meste her burde vel være greitt å forstå, men om ikke så er forklaringen kort som følger.
- Lager første et Content Object for Facebook.
- Inni dette setter jeg sammen tre objekt, først et som lager linken og setter den inn i href i a-taggen, deretter henter jeg et icon/bilde og til slutt skriver jeg ut teksten Facebook.
- La oss se på det første elementet først (ikke det aller første 10 = COA)
htmlSpecialChars er funksjon for å behandle spesielle tegn rett.
wrap er den funksjonen som legger linken inn i href="|". Så uten å skrive minst <a href="|"> blir det ingen link i det hele. Selve linken avsluttet senere, slik at den omslutter bilde og tekst.
Den neste delen gjør som følger:- Skriver ut linken til rette side hos Facebook
- Legger til strengen ?u=
- Henter linken til sida på nettstedet fra objektet temp.getLink og legger det til etter 2
- Henter tittelen på sida inklusive &title= og legger dette til etter 3.
- Det andre elementet, av typen IMAGE, henter Facebooksymbolet og legger til alt-tekst etc til dette.
- Det tredje elementet, av typen TEXT, skriver ut teksten Facebook og avslutter linken.
Sette inn på siden
Koble opp social bookmark malen i rotsida
Slik det kan se ut på en side (uten CSS-styling)
Nå kan det jo være greit å sette dette inn på en side eller slik at det vises på alle sider. Og det settes inn slik som TS innhold vanligvis settes inn. I og med at det ikke er en plugin, kan det ikke settes inn som en vanlig plugin.
Trinn en for å få det til å virke er at vi må knytte opp TS malen vi har laget med malen på rotsida til nettstedet. Velg Mal (Template) i venstre meny, rotsida og rediger hele malen. Velg Includes, basis template og legg inn (link opp) malen du har laget. Du ser hvordan det skal se ut i backend i bildet til venstre (versjon 4.2)
Personlig bruker jeg TemplaVoila til å definere sidelayout, slik at koden vil bli f.eks som følger (eller nå hva som måtte passe).
lib.socialBookmarks >
lib.socialBookmarks < temp.socialBookmarks
lib.socialBookmarks.wrap =
- #wrap kan f.eks være: <ul> | </ul>
Om andre metoder brukes er det uansett bare å knytte temp.socialBookmarks til rette elementet i rotmalen.
Flere linker (Nettby og Kudos)
Å legge til flere linker er egentlig bare å kopiere innholdet fra # Facebook og lime det inn før den siste }. Og deretter rette på nødvendige deler av koden, jf under. Bare endringer er vist, resten vises med ....
} #kopiert inn etter sluttaggen for FaceBook
# Nettby
20 = COA
20 {
........
10 {
........
10.value = www.nettby.no/user/edit_link.php
.......
20.wrap = ?url=|
.......
30.wrap = &name=|
}
....
20.file = fileadmin/templates/eriksverden/icons/nettby.png
20.altText = Del på Nettby
20.titleText = Del på Nettby
20.params = class="nettby"
........
}
# Kudos
30 = COA
30 {
.......
10 {
......
10.value = www.kudos.no/giKudos.php
......
20.wrap = ?url=|
......
30.wrap = &tittel=|
}
.......
20.file = fileadmin/templates/eriksverden/icons/kudos.png
20.altText = Del på Kudos
20.titleText = Del på Kudos
20.params = class="kudos"
......
}
}
Ja, og slik kan man fortsette til man har lagt inn de linker man måtte ønske.
Og så er det jo behov for å pynte opp utseende med litt bruk av CSS, men det går jeg ikke inn på akkurat her.
Javascript og tips en venn
På typo3.no er de sosiale bokmerkene lagt inn slik at de kan vises/skjules. Dette er gjort med en liten stubb javascript med følgende kode.
page.headerData = CARRAY forteller at dette er noe vi legger inn i headeren på siden.
page.headerData = CARRAY
page.headerData {
10 = TEXT
10.value (
<script type="text/javascript">
</script>
)
}
Og så setter vi sammen de ulike elementene på følgende måte
temp.socialBookmark = COA
temp.socialBookmark {
10 = TEXT
10.value = <div class="rightElement"><a href="#" //
onclick="toggle_visibility('social');return false;" //
class="socialToggle">Del/tips en venn</a>
20 < temp.socialBookmarks
20.wrap = <ul id="social" class="socialBookmarks" style='display:none;>|
30 < plugin.tx_tipafriendplus_pi1
30.code = TIPLINK
30.typolink.parameter = 252
40 = TEXT
40.value = </ul></div>
}
Men igjen står det å style elementet.
Det var slutten på dagens lille artikkel om sosiale bokmerker.
