Facebook Like (en twitter) in Gallery?
Moderator: velden
Re: Facebook Like (en twitter) in Gallery?
Ik dacht om nog even terug te kijken naar het voorbeeld van Arnoud en ik zie in al zijn posts '--------' staan. Is daar een bedoeling mee?
Re: Facebook Like (en twitter) in Gallery?
Het is een poos puzzelen geweest, maar in Floatbox heb ik het voor elkaar 
Het stoeien met jquery en javascript, is een stapje te ver en binnen Floatbox kan je aan een caption html toevoegen en dat was het vertrekpunt om de oplossingsrichting in te zoeken. http://floatboxjs.com/instructions#captions
De oplossing zal zeker ruimte voor verbetering hebben, hoor die dan graag.
Hoe heb ik het opgelost?
In Gallery heb ik een nieuwe template gemaakt:
Het deel dat in commentaar staat, zou als id moeten kunnen worden doorgegeven aan Punt is, dat dan alleen de eerste image wordt doorgegeven en niet iedere image afzonder, iets wat nodig is voor het uniek doorgeven aan Facebook en Twitter.
Verder heb ik twee php files gemaakt en geplaatst in <website url>/include/
Allereerst tweet.php
En facebook.php
Een werkend voorbeeld http://www.uisge-beatha.eu/gallery/Wint ... st/45.html
Punten voor verbetering:
- de Like-button staat nu nog boven de image en die wil ik naast/onder de tweet-button
- Likes verschijnen niet op de Facebook Wall gepost, maar ik denk dat dit meer een Facebook issue is dan het aan mijn site ligt.
Dank aan Rolf en Arnoud om me op weg te helpen.
Het stoeien met jquery en javascript, is een stapje te ver en binnen Floatbox kan je aan een caption html toevoegen en dat was het vertrekpunt om de oplossingsrichting in te zoeken. http://floatboxjs.com/instructions#captionsDe oplossing zal zeker ruimte voor verbetering hebben, hoor die dan graag.
Hoe heb ik het opgelost?
In Gallery heb ik een nieuwe template gemaakt:
Code: Select all
<link type="text/css" rel="stylesheet" href="http://www.uisge-beatha.eu/modules/Album/css/UB_fluid_Album.css" />
<link type="text/css" rel="stylesheet" href="http://www.uisge-beatha.eu/modules/Album/templates/db/floatbox/floatbox.css" />
<div class="gallery">
{if !empty($gallerytitle)}<h3>{$gallerytitle}</h3>{/if}
{if !empty($gallerycomment)}<div class="albumcomment">{$gallerycomment}</div>{/if}
{if $imagecount != 0}
<p>{$imagecount}</p>
{/if}
<div class="pagenavigation">
{if $pages > 1}
<div class="prevpage">{$prevpage}</div>
<div class="nextpage">{$nextpage}</div>
{/if}
{if !$hideparentlink && !empty($parentlink)}<div class="parentlink">{$parentlink}</div>{/if}
{if $pages > 1}<div class="pagelinks">{$pagelinks}</div>{/if}
</div>
<ul class="picturelist">
{foreach from=$images item=image}
<li class="thumb">
{if $image->isdir}
<a href="{$image->file}" title="{$image->titlename}"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a><br />
{$image->titlename}
{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}&twurl={$image->file|escape:'url'|replace:'%2F':'/'}" nocache}
{assign var="facebooksrcurl" "http://www.uisge-beatha.eu/include/facebook.php?image={$imagefileurl}&name={$imagetitlename}" nocache}
<!-- <div id="TweetGallery" style="display:none;">
<__iframe style="width: 95px; height:30px; overflow: hidden; border:0px;float:left;" src="http://www.uisge-beatha.eu/include/tweet.php?text={$imagetitlename}&twurl={$imagefileurl}"></__iframe>
<__iframe style="width: 125px; height: 30px; overflow: hidden;" src={$facebooksrcurl} allowtransparency="true" scrolling="no" frameborder="0"></__iframe>
</div> -->
<a class="albumnav" href="{$imagefileurl}" title="{$imagetitlename}" rel="gallery-{$galleryid}" data-fb-options="caption:`<__iframe style="width: 95px; height:30px; overflow: hidden; border:0px;float:left;" src="http://www.uisge-beatha.eu/include/tweet.php?text={$imagetitlename}&twurl={$imagefileurl}"></__iframe>` caption2:`<__iframe style="width: 120px; height: 30px; overflow: hidden;" src={$facebooksrcurl} allowtransparency="true" scrolling="no" frameborder="0"></__iframe>`" ><img src={$imagethumburl} alt={$imagetitlename} /></a>
{/if}
</li>
{/foreach}
</ul>
<div class="galleryclear"> </div>
</div>Code: Select all
data-fb-options="caption:#TweetGallery"Verder heb ik twee php files gemaakt en geplaatst in <website url>/include/
Allereerst tweet.php
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Uisge Beatha || Tweet Image</title>
<__script__ type="text/javascript" src="http://platform.twitter.com/widgets.js"></__script>
</head>
</__body>
<?php
$tweeturl = ($_GET['twurl']);
$tweettext = ($_GET['text']);
?>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-url="http://www.uisge-beatha.eu/<?=urlencode($_GET['twurl'])?>" data-counturl="http://www.uisge-beatha.eu/<?=urlencode($_GET['twurl'])?>" data-text="Uisge Beatha || Photo <?php echo $tweettext; ?>" data-via="gjdegraaf" data-hashtags="uisgebeatha">Tweet</a>
<__script__ type="text/javascript" src="https://platform.twitter.com/widgets.js"></__script>
<__body>
</__html>Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<?php
$fburl = ($_GET['image']);
$fbtitle = ($_GET['name']);
?>
<title>Uisge Beatha || Facebook photo <?php echo $fbtitle ?></title>
<!-- This is a page redirect to override page FB meta tags
<meta HTTP-EQUIV="REFRESH" content="0; url=http://www.uisge-beatha.eu/<?php echo $fburl ?>"> -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:title" content="<?php echo $fbtitle ?>" />
<meta property="og:image" content="http://www.uisge-beatha.eu/<?php echo $fburl ?>" />
<meta property="og:url" content="http://www.uisge-beatha.eu/<?php echo $fburl ?>" />
<meta property="og:site_name" content="Uisge Beatha - Gregor's Hanse 311" />
<meta property="og:type" content="article" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Uisge Beatha" />
<meta property="fb:app_id" content="xxxxxxxxxx" />
</head>
</__body>
<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/nl_NL/all.js#xfbml=1&appId=175931732519501";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</__script>
<fb:like href="http://www.uisge-beatha.eu/<?php echo $fburl ?>" send="false" layout="button_count" width="200" show_faces="true" font="lucida grande"></fb:like>
<__body>
</__html>Punten voor verbetering:
- de Like-button staat nu nog boven de image en die wil ik naast/onder de tweet-button
- Likes verschijnen niet op de Facebook Wall gepost, maar ik denk dat dit meer een Facebook issue is dan het aan mijn site ligt.
Dank aan Rolf en Arnoud om me op weg te helpen.
Re: Facebook Like (en twitter) in Gallery?
Voor de tweet-button en de facebook-button roep ik nu twee afzonderlijk php-files aan. Er zijn wel wat praktische redenen te bedenken om geen externe files aan te roepen. Is er een mogelijkheid hetzelfde te bereiken, maar dan door het gebruik van een UDT op Global Content Block?
Thnks, Gregor
Thnks, Gregor
