Addthis social share dock HTML5 compatible help needed

Yomas · December 15, 2011 at 4:25 PM

Hi all !!
I was trying to add a Addthis social sharing dock on my tours, and the solutions I've found wasn't satisfactory at all.
I got it to work with the use of viewer.addParam set to transparent to get a <div> over my pano, but it's kind of slowing the tour
so I'd like to use the possibilities of linking the html code with XML.

Here's the deal :

PHP

<!-- my HTML page -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr">
        <script type="text/javascript" src="tour.js"></script>
	<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4ede519f0d89f3ad"></script>


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Eboovisite Démo Tour</title>
	<style>
		body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; background-color: #000000; margin: 0; padding: 0; text-align: center;			} 
		* html, * html body { overflow: hidden; }
		html, body, #pano { width:100%; height:99.9%; z-index:1;}
		a { color: #AAAAAA; text-decoration: underline; }           
		a:hover { color: #FFFFFF; text-decoration: underline; } 
		#align_centre { width: 20%; float: left; margin: 20% 40% 0 40%; background-color: #FFFFFF; border: 2px solid #FF0000; }
	</style>
</head>


<body>
	
        <!-- AddThis Buttons START-->
        <div class="addthis_toolbox addthis_default_style">
            <a class="addthis_button_google_plusone"></a>
            <a class="addthis_button_facebook"></a>
            <a class="addthis_button_twitter"></a>
            <a class="addthis_button_email"></a>
            <a class="addthis_button_compact"></a>
            <a class="addthis_counter addthis_bubble_style"></a>
            </div>
		<!-- AddThis Buttons END -->


      <!-- The tour itself-->
<script>
  var viewer = createPanoViewer({swf:"tour.swf",target:"pano"});
  viewer.addVariable("xml", "<?php echo $mypath; ?>");
  viewer.embed();
</script> 


<div id="pano">
		<noscript> 
			<div id="align_centre"> <br/> 
				<b>Attention:</b> <br/> 
				<br/> 
				Javascript is not activated. <br/> 
				<br/> 
				Please activate it to see the virtual tour <br/> 
				<br/> 
			</div> <!-- end of align_centre --> 
		</noscript> 
	</div>
       <!-- end of krpanoDIV --> 


</html>

Display More

What I'd like to do is link my AddThis Buttons in the html with image plugins in krpano like:

Code

<plugin name="facebook_button" url="img/facebook.png" crop="0|0|32[32" ondowncrop="0|32|32|32" onclick="Here I want to link with the concerned href in the html" />

Can someone give a tip cause I went trough the documentation and forum but very few information about all this !
That thing could be great cause no flash needed neither than overlay a div on the tour. Means it'll work perfectly on all devices
Thanks in advance I'll continue searching for a solution and let you know if I get one ^^
Regards.

sachagriffin · December 15, 2011 at 5:28 PM

You do or do NOT want an overlayed div? This is quite unclear.

otherwise, use openurl
onclick="openurl(url,target*)"

otherwise, do you want to ONLY show the div overlay onclick?
I don't think that gives any performance benefit, once you change the window mode, you are already down in performance, whether or not you have content showing does not matter.
"i think"

Yomas · December 16, 2011 at 1:30 AM

Hi sacha;-)
Thank you for your reply!
Sorry if I wasn't clear in my explanations ^^
In fact I do not want to use the wmode transparent cause of the performance.
The openurl isn't possible as you can see the href in the html page is managed by the addthis script.
I went further in my investigations on the addthis Javascript method to link it with krpano plugins.
I havn't found a solution yet
What I would like to do is create plugin buttons in my krpano tour, and get it linked with the href in the html...
I'm on my phone right now I'll post tomorow the things I've seen about the addthis script^^
Thanks again and have a good night...
Depends on where you live;-)
Regards.

sachagriffin · December 16, 2011 at 4:42 AM

Then you must try to get the url any way you can with javascript. Perhaps its outputted someplace in the dom.

Yomas · December 16, 2011 at 10:38 AM

Hi again;-)
Here is the addthis page link to Javascript usages:
http://www.addthis.com/help/client-api#rendering-js
I think the answer is not far from there^^
I continue working on it!!

Zephyr · December 16, 2011 at 10:55 AM

Add the addthis bar like you normally would in html. Apply a css style of display:none to it. The block is hidden now, but still in the DOM.

Create your own buttons (download the ones from add this or something)

create a plugin

in the html you create a javascript function:

function share(link_class){
window.open($(link_class).attr('href'));
}

the idea is, that every link in the addthis has a class. With this class you can reference to the link.

I haven't researched this. But I think this is the only solution. This will only work if the links are references to domains, not javascript. To get the number of tweets/facebook likes, you perhaps could do some extra DOM reads from the element.

Addthis is ment as a javascript plugin, that adds DOM elements through an api. I dont think it will work nicely in krpano, unless you put your own wrapper around it. I usually solved such problems by creating a border/frame like experience around the panorama. In this html frame, I have room for html objects like addthis.

Yomas · December 16, 2011 at 4:56 PM

Hi Zephyr !!
Thank you for your help !
I've try your example code but no surprise it didn't work, it would have been such perfect if it did ^^
In fact I think I'm just gonna make some xml custom buttons for sharing cause in all case i'll have to set the wmode to transparent using addthis,
cause of it's pop up :
When hovering the addthis logo it opens a kind of pop up, wich passes behind the tour if not settle to wmode transparent :'(
And even using as you say an area of the HTML to make them visible without the wmode transparent activated, the addthis popup problem persists.
I'm so disappointed !
I'll have to get throughtout each social network ducumentation to make a simple share button dock...
Crap !!
Otherwise I was thinking about another solution : I'm using a lightbox to show my tours, and maybe it's possible to put the sharing buttons on the lightbox top,
like in the following screenshot attachement.
I'm searching furthur and I'll let you lnow if i find an issue ^^
Thanks again !
Regards.

Yomas · December 16, 2011 at 6:52 PM

Okay hi again again !!
I found a starting of solution using addthis using the Addthis Sharing Endpoints.
This may work on a openurl button in krpano xml ^^ (not tested yet !)
Furthur I think the best way for me is to be able to add the addthis api on top of my lightbox...
More complicated but I'll try !!!
Here is the lightbox I use if you want to have an idea : HERE
And the sharing addthis models : HERE.
I'll get back when done, and be thankfull for a little help ^^
Have a nice weekend !!
Cheers.

Yomas · January 9, 2012 at 11:50 AM

Hi all ^^
After many tries I've opted for your solution Zephyr
I made a HTML template around my tours so that the sharing dock appears in top of it ^^
You can see it here click on any picture you want ^^
Furthur I'd be happy if you could give me your oppinions about the global website, I'm working on the traduction so actually is only French ^^
Thanks in advance and have a nice day.
Regards.

Zephyr · January 9, 2012 at 4:56 PM

Hi,

Your site looks great :) The share icons on top work nice too. One issue I came accross, but not much you can do about is: When you hover over the icons, they enlarge, but when moving down to the panorama, they stay enlarged, this is because the onmouseout doesnt get triggered. Small issue.

I alsoo liked your previous site (the long gallery hall, which sliding pages :)).

I see you use the Ipad Interface. Hows that working? I've been thinking to pick that up too, to learn some code here and there.

Yomas · January 9, 2012 at 6:48 PM

Glad you appreciate it ^^
I changed the website theme cause of an smart concurrent (I'm ironic here) who has used the same one
I will improve the gallery page when I get a little bit time using the same jquery effect to render a gallery wall
The default of the previous template was that all the pages were loaded at once with Ajax, that wasn't that great for SEO cause I only had one page for the all site ^^
For the issue about the social dock I've noticed it too but there's not much I can do here so...

Therfore about the iPad interface, it's working perfectly, the only thing I'd reproach is that on iPhone the help button is hard to click, but that's not so bad ^^
The interest of that interface is that it's very qick to make a new tour, and I think that using only one template for the demo tours on the site is better than have
many different templates, so that visitors get used to it.
I have a demo folder on the other side with the different works I've made to show my clients the things we can do with krpano
Hoping to read you soon ^^
Regards.

sachagriffin · January 9, 2012 at 9:26 PM

Turn off the log key and that will fix that.

Participate now!