METHODE 1 :
Nous proposons un widget intégré au plan Widget Panel Radio qui permet d'ajouter un onglet à votre page Facebook, consulter le Player Radio Facebook
METHODE 2 :
Voici une des méthodes pour intégrer le widget web player disponible dans votre manager webradio sur une page facebook existante :
- Allez sur votre page facebook
- Dans la zone de recherche en haut de la page facebook, tappez ou collez "Static HTML: iframe tabs" (sans les " ") puis aller sur cette page (attention ce plugin nécessite 2000 like sur votre page facebook)
- Cliquez sur le bouton vert "Add Static HTML to a page"
- Une nouvelle page s'ouvre en vous proposant d'Ajouter un onglet de page et on vous demande dans une boîte déroulante de choisir la page en question
- Sélectionnez votre page facebook de la radio et cliquer sur le bouton "Ajouter un onglet de page"
- Vous revenez sur la gestion de votre page facebook avec un bouton vert "Set up tab" cliquez dessus pour configurer l'onglet de page
- En premier on va changer le nom de l'onglet de base "Welcom" en cliquant sur la petite flèche à coté du lien "Actions", une liste de lien s'affiche cliquez sur "Edit name and image"
- Le champ de saisie du nom de l'onglet s'affiche, changez le par le nom de l'onglet de votre page souhaité, exemple : Player radio Pray For Me
- Enregistre en cliquant à droite sur "Save tabe name"
- Maintenant pour éditer le contenu de l'onglet cliquez sur "Content" pour revenir à l'éditeur de contenu. L'éditeur se décline en trois sous-onglet. Index.html qui est ouvert d'office, puis si vous passez la souris à sa droite vous verrez apparaître style.css et scripts.js
Sur la page index.html vous avez la possibilité de mettre du cote html comme pour créer une vraie page web. Ceci requière des connaissance en HTML et CSS mais pour mettre le webplayer le plus simplement possible voici la méthode :
- Sélectionnez le contenu texte déjà présent dans index.html et supprimez le avec la touche supprime de votre clavier
- Copiez ces lignes :
<html>
<head>
<script language="javascript" type="text/javascript" src="https://radio.pro-fhi.net:2199/system/recenttracks.js"></script>
<script language="javascript" type="text/javascript" src="https://radio.pro-fhi.net:2199/system/player.js"></script>
<script language="javascript" type="text/javascript" src="https://radio.pro-fhi.net:2199/system/streaminfo.js"></script>
[[style.css]]
</head>
<body>
<div class="cc_player" data-username="XXXXXXXX" data-autoplay="true">Chargement ...</div>
</body>
</html>
- Changer XXXXXXXX par le nom d'utilisateur de votre manager webradio. Vous pouvez générer ce code depuis votre manager webradio dans la section "Widgets > Web player" afin notamment de sélectionner un skin (une apparence du player) différent
Explications : les balises html, head, body sont les balises classiques et indispensable pour déclarer une page web html, sans le <head></head> ce sont les codes javascript qui vous sont fournis dans les widgets de votre manager radio. Celui de player.js vous permet d'afficher le player et les autres peuvent vous servir plus tard si vous souhaitez afficher d'autres widget comme le titre en cours, les titres récents. Le code [[style.css]] sert à indiquer à la page d'insérer le code qui sera écrit dans l'onglet style.css pour ajuster la forme de l'affichage (le visuel couleur, taille des textes et emplacements des objets sur votre page). Ce qu'il y a entre la balise head est non visible par l'internaute. Entre la balise <body></body> c'est le corps de la page, les éléments que l'on est censé voir en affichant la page. Il y a donc le code de la balise div que vous donne le widget de votre manager webradio.
- A ce stade vous pouvez cliquez en au à droite sur le bouton "Preview" pour avoir un aperçu de ce que ca donne. Vous devriez voir votre player qui se lance automatiquement en lecture puisque qu'il a été ajouté dans la balise div du widget data-autoplay="true"
Si vous souhaitez centrer le player, nous allons sur l'onglet style.css et il faut ajouter ce code css simple : .cc_player { text-align:center;}
Si vous souhaitez ajouter le titre en cours de diffusion en dessous du player ajoutez ce code dans index.html en dessous du premier div : <div id="cc_strinfo_song_cookerseb" class="cc_streaminfo">Chargement ...</div>
Puis dans l'onglet styles.css ajouter à la suite : .cc_streaminfo { text-align:center;} pour centrer le titre.
Si vous n'utilisez pas de code css dans style.css il faut retirer [[style.css]] des balises head de la page index.html
Pour finir la page, enregistrer les changements et publier il faut cliquer sur le bouton "Save & Publish"
Note : vous remarquerez que tous les insertions de liens ou pages externes doivent être en https et non http
En allant sur votre page facebook les visiteurs pourront donc voir dans le menu de gauche un nouveau lien (onglet) au nom que vous avez donné à votre onglet en debut de ce tuto.
Vous en tant qu'éditeur de la page vous pourrez depuis ce même lien accéder directement à la modification de l'onglet.
Notez aussi que nous proposons un pack appli mobile web player pour Android et Iphone
