Re: Facebook Like (en twitter) in Gallery?
Posted: Tue Mar 12, 2013 5:46 pm
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?
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.