Comment intégrer une application agorapulse sur son site web

Grâce à l’option d’intégration externe, vous avez la possibilité d’intégrer votre application Agorapulse sur votre propre site internet, et de bénéficier ainsi du trafic naturel de votre site pour acquérir de nouveaux fans qualifiés.
Pour cela, il y a 2 méthodes: l’intégration basique (IFrame) et l’intégration avancée (HTML+Javascript)

Ces 2 méthodes présentent plusieurs différences à prendre en considération en fonction de vos objectifs.

La première méthode (Intégration basique (IFrame)) affiche directement l’application dans la page: cela nécessite une page dédiée avec beaucoup d’espace.

La seconde méthode (Intégration avancée (HTML+Javascript)) passe par un lien: elle est donc plus adaptée pour une bannière par exemple. Elle peut néanmoins s’afficher facilement sur une page.

Comment faire?

Intégration basique (IFrame)

Sur une page dédiée, il vous suffit d’intégrer le code suivant:

<iframe src="URL d'intégration" height="630" width="860" seamless></iframe>

Attention : avec cette méthode, nous vous recommandons de ne pas intégrer votre application sur une page existante à fort trafic, comme votre page d’accueil par exemple. Dans ce cas, nous vous recommandons l’intégration avancée

Intégration avancée (HTML+Javascript)

La seconde méthode demande un peu plus de compétences techniques mais supporte davantage la charge si vous décidez d’afficher votre application sur une page à fort trafic.

Il faut intégrer les balises suivantes dans la balise <head> de votre site

<title>Integration Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/smoothness/jquery-ui.css" />

Il faut ensuite intégrer les balises suivantes dans le <body> de votre page:

<script type="text/javascript">
$(function() {
 var appUrl = "URL d'intégration";
 var appHeight = 630;
 var appWidth = 860;
 $("#appLink").click(function() {
 $("#appIFrame").attr("src", appUrl);
 $("#appDiv").show().dialog({height:appHeight, width:appWidth, modal:true});
 return false;
 })
 });
 </script>
 <div id="appDiv" style="display: none;">
<!-- Adapt height depending on the max height of your app -->
 <iframe id="appIFrame" height="650" width="820" frameborder="0" scrolling="no"></iframe>
 </div>
 <!-- Link or button to open dialog -->
 <a id="appLink" href="#appDiv">Launch app</a>

 

Questions les plus fréquemment posées sur l’intégration externe :

integration-site-web-application-facebook

– Où trouver mon URL d’intégration ? 

L’URL d’intégration est disponible en cliquant sur le bouton « Paramètres Application ». Il faut également activer l’intégration externe [ON]

– Combien coûte cette option?

Si vous avez une offre premium, ça ne vous coûtera rien de plus, c’est inclus!

– Est-ce que le visiteur est obligé d’avoir un compte Facebook pour participer sur la version intégrée?

Oui, les conditions seront les mêmes que sur Facebook. Le visiteur devra se connecter à son compte Facebook, devenir Fan et/ou remplir le formulaire de qualification si vous avez activé ces options.

– Pourquoi les étapes sont inversées sur cette version? Un visiteur « non-fan » voit la page d’accueil avant la page demandant le « j’aime »

C’est tout à fait normal. Sur Facebook, nous savons dès les départ si l’utilisateur aime ou non votre page. Sur la version intégrée, nous n’avons pas cette information tant que le visiteur n’a pas cliqué sur le bouton de participation et installé l’application. Une fois cela fait, nous renvoyons les visiteurs non fan sur l’étape qui rend le « j’aime » obligatoire.