udt in iframe aanroepen

[Gregor]

Hallo!

Is het mogelijk om vanuit een iframe een udt aan te roepen? En als het mogelijk is, ben ik benieuwd hoe

Thanks, Gregor

[Rolf]

Zoiets?

Code: Select all

echo "<__iframe></__iframe>";

[Gregor]

Precies andersom
<__iframe>{udt}</__iframe>
Op de beschikbare attributen leidt het tot foutmeldingen.

[Rolf]

Oeps LOL
Zou ik eens moeten testen...
Welke foutmelding krijg je dan?

[Jos]

Precies andersom
<__iframe>{udt}</__iframe>
Op de beschikbare attributen leidt het tot foutmeldingen.

Dat gaat ook niet werken, want een udt spuugt wellicht wat html code uit, maar een iframe tag wil daar geen html zien:
http://www.w3schools.com/tags/tag_iframe.asp

Je zou een aparte pagina kunnen aanmaken met alleen de udt en de url van die pagina aanroepen in de iframe

En waarom een iframe? Mogelijk volstaat een <div> met wat scroll-balken?

[Gregor]

Ik zoek een oplossing om geen externe php-files aan te roepen (zie ook de post over twitter en facebook aan floatbox toevoegen). Nu biedt floatbox je de mogelijkheid om dmv een caption extra gegevens zichtbaar te maken. Dit moet html zijn. (meer info http://floatboxjs.com/instructions#captions De syntax is:

Code: Select all

<a href="image1.jpg" data-fb-options="caption:`This is the first caption` caption2:`And this is the second caption`">...</a>

Ik was begonnen om aanroep van een foto uit een gallery zo aan te passen dat ik daar een facebook- ene een tweet button zichtbaar had. Een van de 'problemen' bij deze oplossing is, doordat ik een extern php-file aanroep, dat o.a. de metatags niet goed worden gezet. Iets waar facebook nogal pietluttig in is. Daarnaast veroorzaakt dit ook veel server requests omdat voor elke foto dat php-filetje wordt aangeroepen.

Mijn gedachte was om van dat php-programma een udt te maken. Dat is gelukt. Nu blijkt die caption geen udt te kunnen processen (het gebruik van ` of ' of " maakt geen verschil in deze):

Code: Select all

{else}
        {assign var="imagetitlename" {$image->titlename|replace:' ':'%20'} nocache}
        {assign var="imagefileurl" {$image->file|escape:'url'|replace:'%2F':'/'} nocache}
        {assign var="imagethumburl" {$image->thumb|escape:'url'|replace:'%2F':'/'} nocache}
        {assign var="tweetsrcurl" "http://www.uisge-beatha.eu/include/tweet.php?text={$imagetitlename}%26twurl={$image->file|escape:'url'|replace:'%2F':'/'}" nocache}
        {assign var="facebooksrcurl" "http://www.uisge-beatha.eu/include/facebook.php?image={$imagefileurl}&name={$imagetitlename}" nocache}
        
        {if isset($entry->canonical)}
   {assign var='canonical' value=$entry->canonical}
        {/if}
        {$canonical}
        
        <a class="albumnav" href="{$imagefileurl}" title="{$imagetitlename}" rel="gallery-{$galleryid}" data-fb-options="caption:{GalleryTweet} caption2:`<__iframe style="width: 120px; height: 30px; overflow: hidden;" src={$facebooksrcurl} allowtransparency="true" scrolling="no" frameborder="0"></__iframe>`" ><img src={$imagethumburl} alt={$imagetitlename} /></a>
        

Ok, wat dan als ik een die udt in een iframe stop en die aan caption: aanbied? Werkt evenmin. Het volgende wat ik probeerde is:

Code: Select all

........
        <div id="TweetGallery" style="display:none;">
           {GalleryTweet twtext={$imagetitlename} twurl={$imagefileurl}}
        </div>
       
........
        <a class="albumnav" href="{$imagefileurl}" title="{$imagetitlename}" rel="gallery-{$galleryid}" data-fb-options="caption:#TweetGallery caption2:`<__iframe style="width: 120px; height: 30px; overflow: hidden;" src={$facebooksrcurl} allowtransparency="true" scrolling="no" frameborder="0"></__iframe>`" ><img src={$imagethumburl} alt={$imagetitlename} /></a>
        

Dit werkt, behalve dat in alle tweet-buttons van een bepaalde Gallery de eerste foto aan de tweet wordt toegevoegd. Daar waar ik had verwacht (of gehoopt...) dat iedere keer de juiste foto aan de tweetknop werd toegevoegd. Ter illustratie: http://www.uisge-beatha.eu/gallery/Wint ... oi/45.html

Voor de volledigheid, de code van de udt is:

Code: Select all

echo '<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" ' . 'data-url='.'"'.'http://www.uisge-beatha.eu/' . $params['twurl'].'" ' . 'data-counturl=' . '" ' . 'http://www.uisge-beatha.eu/' . $params['twurl']. '" ' . 'data-text="Uisge Beatha || Photo ' . $params['twtext'] . '"' . 'data-via="gjdegraaf" ' . 'data-hashtags="uisgebeatha">Tweet</a>';

Aan de facebook button ben ik nog niet begonnen. Eerst dit maar eens werkend krijgen

Verduidelijkt dit de achtergrond van mijn vraag?

[velden]

Ik denk dat je heel dat <__iframe></__iframe> zou moeten laten vervallen. Je gebruikte het immers om de mogelijkheid te hebben een url aan te roepen en het resultaat daarvan te tonen binnen je eigen pagina.

Aangezien je nu toch weer zelf de code plaatst heb je dat ook niet meer nodig.

Nu heb ik je vorige topic niet helemaal begrepen, maar jij bent toch niet de enige die voor elkaar probeert te krijgen om een like en tweet button bij een popup-foto te krijgen lijkt me?

Je zou er wellicht ook nog voor kunnen kiezen om de buttons dynamisch te plaatsen met Javascript, nét voor of na de popup wordt getoond.

[Gregor]

@velden: al zoekend krijg ik de indruk dat ik wel de enige ben.
Hoe ik het met javascript voor elkaar moet krijgen, zou ik niet weten. Ben daar mee aan het stoeien geweest, maar dat is toch een taal die ik niet spreek.

De iframe heb ik thans voor het tweet deel laten vervallen. Zie het resultaat in de gallery van bijv. http://www.uisge-beatha.eu/gallery/Wint ... oi/45.html Wat ik niet begrijp, is waarom ik de url naar de eerste foto blijft wijzen terwijl ik in de source iets anders zie. Dat is best nog een puzzel

[velden]

Wat ik niet begrijp, is waarom ik de url naar de eerste foto blijft wijzen terwijl ik in de source iets anders zie. Dat is best nog een puzzel

Logisch: je verwijst naar een id en zoals je zou moeten weten moeten id's uniek zijn binnen één pagina...

Dus nu kiest de browser telkens dezelfde <div id="TweetGallery"..> voor je uit.

Dit zou je kunnen oplossen door de in de Gallery template gebruik te maken van bijvoorbeeld de foto-id, of de foreach index.

Code: Select all

...
 <a class="albumnav" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="gallery-{$galleryid}" data-fb-options="caption:#TweetGallery-{$image->fileid} 
 ...
    <li class="thumb">
	    <div id="TweetGallery-{$image->fileid}" style="display:none;">
 ...

Ik verwacht dat dat een hoop scheelt.

En gooi je pagina('s) eens een keer door een html validator (krijg nu 460 errors!)

[Gregor]

Wat ik niet begrijp, is waarom ik de url naar de eerste foto blijft wijzen terwijl ik in de source iets anders zie. Dat is best nog een puzzel

Logisch: je verwijst naar een id en zoals je zou moeten weten moeten id's uniek zijn binnen één pagina...

Hier moment bij stilgestaan. Dank dat je me daar op wijst.

Dit zou je kunnen oplossen door de in de Gallery template gebruik te maken van bijvoorbeeld de foto-id, of de foreach index.

Code: Select all

...
 <a class="albumnav" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="gallery-{$galleryid}" data-fb-options="caption:#TweetGallery-{$image->fileid} 
 ...
    <li class="thumb">
	    <div id="TweetGallery-{$image->fileid}" style="display:none;">
 ...

Ik verwacht dat dat een hoop scheelt.

Deze oplossingsrichting werkt idd

En gooi je pagina('s) eens een keer door een html validator (krijg nu 460 errors!)

I will

Nu eens kijken hoe ik die facebook button erin krijg....

[Gregor]

Code met de hint naar ID een heel eind kunnen versimpelen en werkend gekregen

Code: Select all

{else}
        {assign var="imagetitlename" {$image->titlename|replace:' ':'%20'} nocache}
        {assign var="imagefileurl" {$image->file|escape:'url'|replace:'%2F':'/'} nocache}
        {assign var="imagethumburl" {$image->thumb|escape:'url'|replace:'%2F':'/'} nocache}
        <div id="TweetGallery-{$image->fileid}" style="display:none;">
            {GalleryTweet twtext={$imagetitlename} twurl={$imagefileurl}}<br/>
            {GalleryFaceBook twurl={$imagefileurl}}
            {if isset($entry->canonical)}
                {assign var='canonical' value=$entry->canonical}
            {/if}
            {$canonical}
            {assign var='get_title' value={$imagetitlename}}
            {assign var='detail_page' value='fotoalbum'}
            {capture assign='fb_image'}{$image->file|escape:'url'|replace:'%2F':'/'}{/capture}
        </div>
           
        <a class="albumnav" href="{$imagefileurl}" title="{$imagetitlename}" rel="gallery-{$galleryid}" data-fb-options="caption:#TweetGallery-{$image->fileid}" ><img src="{$imagethumburl}"" alt="{$imagetitlename}" /></a>
    {/if}

De UDT {GalleryFaceBook} ziet er als volgt uit:

Code: Select all

echo '<fb:like href=' .'"'.'http://www.uisge-beatha.eu/' . $params['twurl'].'" ' . ' send="false" layout="button_count" width="200" show_faces="true" font="lucida grande"></fb:like>';

Facebook wil allerlei OpenGraph tags hebben om een like te kunnen verwerken. Blijkbaar worden de metatags niet uit de bestaande pagina overgenomen. Ik denk omdat de facebook like een iframe aanroept. Om de metatags toch mee te geven zou ik deze in de UDT kunnen opnemen. Kan ik dan volstaan met:

Code: Select all

echo '<meta property="og:url" content=' .'"'.'http://www.uisge-beatha.eu/' . $params['twurl'].'" ' . '  />';

of "moet" ik in de UDT een hele html-pagina met echo-statements opbouwen?

[velden]

Facebook kijkt waarschijnlijk naar de Open Graph tags van de pagina waarnaar jouw url verwijst.

Ik heb iets dergelijks een keer voor een nieuws-pagina moeten maken.

Daarbij werden alle nieuwsberichten op één pagina geplaatst (Summary template) en géén links naar een Detail-pagina.

http://tinyurl.com/c7tzsct

Maar de url die ik aan Facebook doorgeef is wél een link naar een detail-page. In het detailtemplate van die nieuwspagina zet ik dan allerlei variabelen voor de Open Graph tags, die vervolgens in de head van die pagina worden getoond.

Dat betekent volgens mij dan wel dat als de Like op een wall wordt geplaatst in Facebook, de link daar naar toe enkel naar dat plaatje verwijst.

Misschien kun je nog iets moois doen met een extra parameter in de url. Dat je die parameter uitleest vóórdat je het Gallery template start, en op basis van de waarde van de parameter de variabelen voor de Open Graph tags zet.
Uiteraard moet je die parameter(s) dan in de url aan Facebook meegeven.
Het zou dan ook mooi zijn als je pagina automatisch die foto 'popupt' als iemand op de Facebook link klikt...

[Gregor]

Facebook kijkt waarschijnlijk naar de Open Graph tags van de pagina waarnaar jouw url verwijst.

Ik heb iets dergelijks een keer voor een nieuws-pagina moeten maken.

Daarbij werden alle nieuwsberichten op één pagina geplaatst (Summary template) en géén links naar een Detail-pagina.

http://tinyurl.com/c7tzsct

Maar de url die ik aan Facebook doorgeef is wél een link naar een detail-page. In het detailtemplate van die nieuwspagina zet ik dan allerlei variabelen voor de Open Graph tags, die vervolgens in de head van die pagina worden getoond.

Dat betekent volgens mij dan wel dat als de Like op een wall wordt geplaatst in Facebook, de link daar naar toe enkel naar dat plaatje verwijst.

Misschien kun je nog iets moois doen met een extra parameter in de url. Dat je die parameter uitleest vóórdat je het Gallery template start, en op basis van de waarde van de parameter de variabelen voor de Open Graph tags zet.
Uiteraard moet je die parameter(s) dan in de url aan Facebook meegeven.
Het zou dan ook mooi zijn als je pagina automatisch die foto 'popupt' als iemand op de Facebook link klikt...

Als ik naar de facebook debugger kijk https://developers.facebook.com/tools/d ... 252007.jpg dan haalt hij in zijn geheel geen metatag-info op. Wel het plaatje. Als ik met een wendeveloper tool het element van de opgekomen foto bekijk, dan is de url een rechtstreekse verwijzing naar de foto die wordt binnen een <__iframe> wordt verwerkt.

Ondertussen geprobeerd wat er gebeurt als ik in de udt een html pagina opmaak, maar dat heeft geen effect op de metatags in de facebook debugger.

Als ik je goed begrijp, dan zou ik voor de facebook button een nieuwe pagina moeten aanmaken die vanuit de gallery template wordt aangeroepen waar dan vervolgens alle code instaat die aan facebook moet worden doorgegeven. En dus geen gebruik maken van de udt?

[velden]

Als ik je goed begrijp, dan zou ik voor de facebook button een nieuwe pagina moeten aanmaken die vanuit de gallery template wordt aangeroepen waar dan vervolgens alle code instaat die aan facebook moet worden doorgegeven. En dus geen gebruik maken van de udt

Ik heb niet de hele documentatie van Facebook gelezen en ik weet ook niet welke eisen er zijn om die Like button te laten werken. Je merkte zelf op dat het allemaal OpenGraph tags nodig heeft.

Als ik het zou moeten maken dan zou ik:
1. uitzoeken welke Open Graph tags er nodig zijn
2. de Tags aanmaken in de <head> van je pagina met als content een variabele

Code: Select all

<meta property="og:title" content="$og_title" />
<meta property="og:description" content="$og_description" />

3. Aan Facebook een url meegeven in de vorm van http://www.uisge-beatha.eu/gallery/Wint ... ge->fileid}
4. vervolgens in de Gallerytemplate binnen de foreach-loop

Code: Select all

{if $image->fileid == $smarty.get.imageID}
//zet OpenGraph variabelen
  {capture name='ogtitle' assign='og_title'}{$image->title}{/capture}
  {capture name='ogdesc' assign='og_description'}{$image->title}{/capture}
//etc. etc.
{/if}

5. tenslotte wellicht nog even wat js code genereren die het betreffende imageID automatisch popupt. Maar dat is een extraatje

6. zorg ervoor dat als imageID niet in de url wordt meegegeven de variabelen wél worden gevuld met algemene info over deze pagina!

Ik heb bovenstaande code maar zo bedacht en niet getest. Op deze manier hoef je geen nieuwe pagina te maken. Feitelijk zullen enkel Facebook, en bezoekers die via Facebook doorklikken gebruik maken van de imageID parameter. Maar dat geeft je dus wel de mogelijkheid om de Likes te gebruiken én te vormen zoals jij wilt.

Uiteindelijk wil je waarschijnlijk nog wel even de imageID parameter valideren/sanitizen voordat je er daadwerkelijk iets mee gaat doen! Security enzo...

[Gregor]

De OpenGraph codes worden al in de head van de site meegenomen doordat elders op de site ook van facebook gebruik wordt gemaakt (in CGBlog, misschien dat ik wel moet uitzoeken of ik metatags kan overschrijven). De huidige tags zou je eventueel kunnen zien als je de pagina opent en de source bekijkt http://www.uisge-beatha.eu/gallery/Wint ... oi/45.html Waar het naar mijn idee misgaat is, dat deze code:

Code: Select all

echo '<fb:like href=' .'"'.'http://www.uisge-beatha.eu/' . $params['twurl'].'" ' . ' send="false" layout="button_count" width="200" show_faces="true" font="lucida grande"></fb:like>';

een iframe aanroept waar vervolgens de verdere afhandeling lijkt te gebeuren (wat ik zie met webdeveloper kit kan ik helaas niet kopiëren; dat zou het verduidelijken).

De UDT krijgt wel de juiste image-id door en zet die ook juist door naar facebook. Mogelijk dat ik hier iets over het hoofd zie omdat de verwerking binnen een iframe plaatsvindt, maar daar ben ik niet zeker van.

Kijk ik naar de stap 3 dan heb ik dat feitelijk al opgelost door je suggestie van die id binnen de <div .....> Op dit moment doorzie ik nog even niet hoe ik die tags aan het frame waarin floatbox de foto toont, kan toevoegen. Althans ik neem voor nu aan dat het daarin moet gebeuren......