Ressources web

Toujours dans la lignée des intégrations de réseau social dans votre site web, nous vous montrons comment créer une interaction entre Instagram et votre site web.

Dans un premier temps, vous pouvez facilement insérer un badge Instagram à votre site :

Pour vous aider à créer des liens avec votre profil Instagram et le mettre en avant, nous avons créé des badges que vous pouvez utiliser.

Il suffit de se connecter à la partie « Badges » de votre profil et de copier coller le lien désiré :

Un exemple d’intégration de badge :

Dans un second temps, vous pouvez aussi intégrer des posts Instagram très facilement via la fonction « intégrer » qui apparaît sur chaque post :

Pour accéder à ceux-ci, vous devrez passer par votre navigateur sur Instagram. sachez que WordPress intègre nativement les post Instagram simplement en insérant l’URL de celui-ci :

[pastacode lang= »markup » message= » » highlight= » » provider= »manual »]

https://www.instagram.com/p/bNd86MSFv6/

[/pastacode]

Et voici un exemple d’intégration :

Code code code !

Une photo publiée par CreaZo (@creazo) le 18 Févr. 2016 à 11h02 PST

Intégrer une vidéo

Leader parmi la vidéo sur internet, Youtube a su s’imposer facilement. Partager ses vidéos sur son site internet est une chose relativement simple, il vous suffit simplement de récupérer vos codes d’intégration. Pour cela sous chaque vidéos Youtube, vous trouverez l’onglet « Partager » puis « Integrer »

Il ne vous reste plus qu’à copier coller le code de votre vidéo pour obtenir le résultat suivant :

Utiliser l’option spécifique de WordPress

L’autre solution à partir du CMS WordPress est de cliquer sur le bouton « Ajouter un média » puis « Insérer à partir d’une adresse web »

Intégrer une playlist

Pour intégrer une playlist, vous devez d’abord en créer une puis y accéder pour cliquer sur « Partager » puis « Intégrer » comme ci-dessus :

Des détails de configuration supplémentaire sont accessible sur la page dédié de Youtube :

• Activer le mode de confidentialité avancé
• Lancer automatiquement la lecture d’une vidéo intégrée
• Démarrer une vidéo intégrée à un moment T
• Ajouter des sous-titres à une vidéo intégrée
• Désactiver l’intégration pour vos vidéos

SoundCloud a été créé en 2007, sous l’impulsion de deux spécialistes allemands du son : Alex Ljung et Eric Wahlforss. L’idée, à la base, est simple : permettre aux musiciens de partager facilement n’importe quels sons sur la web.

Pour partager un morceau, rien de plus simple, il suffit de cliquer sur le bouton « share » sous chaque morceaux proposé par vos artistes favoris :

Il ne vous plus qu’à choisir l’option « embled » pour disposer du code d’intégration sachant qu’il existe deux formes de lecteur possibles :

La case à cocher « WordPress code » vous servira pour WordPress.fr et sera sous forme de shortcode.
Petit plus, vous pouvez jouer avec deux options :les couleurs et lancer la lecture automatiquement :

L’intégration d’une liste de lecture suivra la même logique.

L’exemple avec l’intégration :

L’intérêt de Paypal est de pouvoir recevoir et envoyer de l’argent assez facilement et de façon sécurisée, vous pouvez ajouter un bouton « Don » sur votre site sans vraiment de problème via la page suivante, attention vous devez disposez d’un compte Paypal obligatoirement.

Petite précisons de Paypal :

• Pas de frais d’installation, d’abonnement, ni d’annulation. Commissions sur les paiements reçus uniquement.
• Les donateurs n’ont pas besoin de compte PayPal pour effectuer leurs dons.
• Après avoir créé vos boutons Faire un don, vous pouvez les placer sur votre site pour lever des fonds. Cependant, pour accéder aux fonds que vous recevez, il vous faut un compte Premier ou Business.

3 étapes sont à respecter afin de disposer de votre bouton :

• Étape 1 : choisissez un type de bouton et saisissez les détails de votre paiement
• Étape 2 : enregistrez vos boutons (facultatif)
• Étape 3 : fonctions de paiement (facultatif)

Les étapes sont relativement simples si votre compte est dèja configuré correctement. après ce petit remplissage, vous pouvez créer votre bouton sans souci.

Vous accédez enfin à l’écran vous permettant de récupérez le fameux code d’intégration pour votre bouton :

Et pour finir le fameux bouton pour l’exemple :

Afficher son contenu avec Pinterest reste une chose relativement simple, en effet Pinterest a faciliter les choses en intégrant cette possibilité directement depuis le menu :

Le clic sur l’élément « Créer un widget » vous permettra d’avoir le code d’intégration facilement :

Twitter propose de nombreuses intégration pour votre site web allant du bouton suivre à une recherche spécifique sur un hashtag. Vous devrez être connecté pour pouvoir utilisez ses ressources et disposez du code d’intégration, ces boutons vous permettrons d’ajoutez des boutons à votre site Web afin d’aider vos lecteurs à partager votre contenu et à vous retrouver sur Twitter.

Exemple avec le bouton « Intégrer le bouton suivre »

Pour cela, il suffit simplement d’aller sur la page dédié, d’ajouter le nom d’utilisateur et de définir vos options :

Comme vous pouvez le voir, vous pouvez ajouter des boutons sur les choses suivantes :

• Partager un lien
• Suivre, exemple « Suivre @CreaZo »
• Hashtag, exemple Tweeter #WordPress
• Mention

Insérer un Widget Twitter

L’unes des fonctionnalités les plus intéressantes reste l’ajout d’un code embarquée (sous forme de Widget Twitter) via cette page :

Vous allez devoir configurer votre Widget, les options sont relativement simple à saisir sur les différentes possibilités :

• Fil d’utilisateur
• Aimés
• Liste
• Recherche
• Collection

Exemple avec une recherche :

Et un exemple d’intégration avec le fil d’actualité de @CreaZo :

Tweets de @CreaZo

La page des développeurs de Linkedin dispose de quelques possibilités pour intégrer votre page ou profil :

• Partage Linkedin
• Suivre une société
• Profil de membre
• Profil de la société
• Les profils de la société
• Les emplois qui pourrait vous intéresser
• Profil d’une école

Un exemple d’intégration avec un profil :

Tout comme l’intégration de Facebook dans votre site web via un iframe ou via un code javascript et html, vous pouvez insérez vos posts Google + dans votre site de façon relativement simple.

Tout d’abord définissez le post Google+ que vous voulez voir apparaître sur votre site internet, puis cliquer sur le coin en haut à droite et cliquez sur « Integrer le post »

Vous allez donc disposez d’un code tout fait par Google+ à copier dans votre site web :

Voici donc un exemple d’un de nos post sur la page Google+ de CreaZo :

Vous pouvez donc voir que cela est complètement interactif dans votre site.

Sur Google+, vous n’aurez la possibilité que d’intégrer un badge pour inciter les visiteurs de votre site à vous suivre, sans avoir la possibilité de partager votre fil d’actualité pour donner un aperçu de votre ligne éditoriale ou des contenus partagés.

Depuis quelques temps Facebook a fait quelques modifications sur l’intégration du fil d’actualité ou de la « timeline », vous pouvez désormais intégrer votre fil d’actualité (comme avant) mais aussi les événements et/ou les messages sur votre site internet.

La technique via un iframe fonctionne toujours, celle-ci ne correspond plus « à l’usage » recommander par Facebook mais vous permettra d’intégrer votre fil d’actualité sans souci.

Tout d’abord, connectez-vous à la « Page Plugin » de Facebook et allez ajouter votre nom de page dans « Facebook Page URL », la partie « Tabs » va vous permettre de définir si vous souhaitez avoir la timeline, les événements ou les messages sur votre site internet avec les mots clefs suivants : « timeline », « messages » ou « events », comme toujours vous pouvez définir la taille en largeur et en hauteur pour adapter au mieux l’intégration.

En cliquant sur « Get Code » vous allez devoir insérez votre code en deux parties :

Le SDK JavaScript a insérer dans votre fichier header.php :

[pastacode lang= »markup » message= » » highlight= » » provider= »manual »]

<div id="fb-root"></div>
<p>
<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/fr_FR/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

[/pastacode]

Et enfin le code suivant dans votre page :

[pastacode lang= »markup » message= » » highlight= » » provider= »manual »]

<br />
<div class="fb-page" data-href="https://www.facebook.com/creazo.web" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
<br />
<div class="fb-xfbml-parse-ignore">
<br />
<blockquote cite="https://www.facebook.com/creazo.web"><a href="https://www.facebook.com/creazo.web">CreaZo</a>
</p></blockquote>
<p>
</div>
<p>
</div>
<p>

[/pastacode]

Vous pouvez aussi le faire directement par un shortcode comme celui-ci [ FacebookTimeline ] (sans les espaces) :

[pastacode lang= »php » message= » » highlight= » » provider= »manual »]

function FacebookTimeline_creazo( ) 
{ 
	$codehtml = '
<br />
<div id="fb-root"></div>
<p>
<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/fr_FR/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "facebook-jssdk"));</script>
<br />
<div class="fb-page" data-href="https://www.facebook.com/creazo.web" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
<br />
<div class="fb-xfbml-parse-ignore">
<br />
<blockquote cite="https://www.facebook.com/creazo.web">
<a href="https://www.facebook.com/creazo.web">CreaZo</a>

</p></blockquote>
<p>
</div>
<p>
</div>
<p>
'; 
	return 
	$codehtml;
} 
add_shortcode( 'FacebookTimeline', 'FacebookTimeline_creazo' );

[/pastacode]

[FacebookTimeline]

Dans le cadre d’une réalisation web, vous devez tout d’abord commander un hébergement pour votre futur site web. Parce que nous les connaissons bien et que leur offre se situe en France, nous vous conseillons OVH dans le cadre d’un hébergement mutualisé.

L’hébergement mutualisé est un mode d’hébergement Internet destiné principalement à des sites web, dans un environnement technique dont la caractéristique principale est d’être partagé par plusieurs utilisateurs. Cette architecture est adaptée pour des sites d’importance et d’audience faible ou moyenne, ne sollicitant que ponctuellement les ressources du ou des serveurs informatiques assurant l’hébergement (processeur, mémoire vive, espace disque, débit). L’administration de ces derniers est assurée par un intervenant tiers (et non par le titulaire de l’hébergement). Source Wikipédia

Nous vous montrons donc les étapes à réaliser pour une commande d’un Hébergement Perso chez OVH, celui-ci répondra à la majorité des besoins de réalisations web n’ayant pas une forte audience et en demandant pas une infogérance lourde.

L’offre perso d’OVH :

• 100 Go d’espace disque
• 1 nom de domaine offert*
• 10 comptes e-mails de 5 Go
• Trafic illimité

Choisir son nom de domaine

Lors de cette première étape, vous allez devoir vérifier et choisir le nom de domaine pour votre futur site web, celui peut-être déjà pris, dans ce cas OVH vous le signalera :

• En vert, les domaines libres
• En rouge les domaines indisponibles
• En orange les domaines transférables ou renouvelables

Commander un nom de domaine

Lors de l’étape suivante vous pouvez ajouter autant de domaines que vous souhaitez, sachez toutefois que le premier choisi lors de l’étape précédente prendra l’hébergement.

Dans le cadre d’un hébergement simple, nous vous recommandons de choisir le DNS classique et l’offre Gold.

On passe à l’étape suivante et nous restons toujours avec les options de base (Accélérateur GéoCache 3 PoP inclus dans l’offre).

Prévisualisation de votre commande d’hébergement et nom de domaine chez OVH

Nous arrivons presque au bout de notre périple avec le récapitulatif de notre commande :

Avec une légère augmentation des prix d’OVH au 1er janvier 2015, vous tournerez donc autour d’une quarantaine d’euros par an :

Le reste consistera à rentrer vos informations personnelles et de paiement afin de recevoir tous vos mails pour accéder à votre serveur web et installez votre site sur celui-ci.

Créer une mailing-list chez OVH

Pour commencer, vous devez vous connecter à votre interface OVH : https://www.ovh.com/managerv3/

Plusieurs onglets apparaissent selon le domaine choisi, cliquez sur la colonne « Mailing-List », puis cliquez sur « Ajouter une mailing-list »

Un popup s’ouvre avec plusieurs champs à compléter :

Outre les informations classiques (définition du nom de la mailing-list et son propriétaire), il est nécessaire de choisir comment les réponses seront traités :

• A la liste : tous les membres faisant partie de la mailing-list
• A l’expéditeur de l’email
• A une adresse email spécifique

Certaines options sont aussi paramétrables :

• La modération des messages demande une validation par le propriétaire à chaque email envoyé
• La modération des abonnés empêche l’inscription sauvage à la mailing-list (hors de l’outil de gestion d’OVH)
• « Seul les abonnés peuvent poster » empêche le spam sur la mailing list, par contre si on ne fait pas partie de celle-ci on ne peut envoyer d’email aux abonnés de celle-ci

Ajouter des membres

Pour ajouter des membres à une mailing list, il faut cliquer sur le lien « Gestion des abonnées » symbolisé par une ombre.

En cliquant sur ce lien, vous accéder au listing des abonnés mais aussi à la possibilité d’ajouter des abonnés via le lien situé à droite nommé « Ajouter des abonnés ».

Un popup s’ouvre avec la possibilité d’ajouter les abonnés de deux façons :

• En remplissant à la main les mails (un par ligne) dans la case blanche prévu à cet effet
• En joignant un fichier texte avec un mail par ligne (adapté aux grandes listes)

Un temps de quelques minutes est nécessaire après avoir cliqué sur valider afin qu’OVH prenne les modifications en compte.

Modifier le contenu de ses mailing-list

Exemple avec NOM_DE_VOTRE_ML@mailing-list.fr

La commande NOM_DE_VOTRE_ML-edit.file peut être utilisée par un administrateur distant pour éditer les fichiers de textes à la base des réponses de la liste NOM_DE_VOTRE_ML@mailing-list.fr.

Ci-dessous, une liste des fichiers contenant les textes de réponses et une brève description de l’utilisation de leur contenu. Pour éditer un fichier, envoyez simplement un message à NOM_DE_VOTRE_ML-edit.COMMANDE@mailing-list.fr en substituant le nom de la  commande à ‘COMMANDE’. Les instructions d’Edition seront envoyées avec le fichier de texte.

Les commandes disponible :

bottom : pied de page de toutes les reponses: infos générales.
digest : section ‘administrative’ des bulletins périodiques.
faq : réponses aux questions fréquentes au sujet de cette liste.
get_bad : dans le cas de messages absents des archives.
help : aide générale (entre ‘top’ et ‘bottom’).
info : informations sur la liste. La première ligne en est un résumé.
mod_help : aide spécifique aux modérateurs de liste.
mod_reject : à l’expéditeur d’envois refuses.
mod_request : aux modérateurs avec un envoi.
mod_sub : à l’abonne après confirmation d’inscription du modérateur.
mod_sub :_confirm aux modérateurs pour valider une inscription.
mod_timeout : à l’expéditeur d’un message non valide depuis longtemps.
mod_unsub_confirm : à un administrateur pour demander une désinscription.
sub_bad : à l’abonne si la confirmation était mauvaise.
sub_confirm : à l’abonne pour confirmer sa requête.
sub_nop : à l’abonne après une nouvelle inscription.
sub_ok : à l’abonne après un abonnement réussi.
top : en-tête de chaque réponse.
trailer : ajoute à la fin de chaque contribution à la liste.
unsub_bad : à l’abonne si la confirmation de désinscription est fausse.
unsub_confirm : à l’abonne pour demander confirmation de désinscription.
unsub_nop : à un non-abonne après une demande de désabonnement.
unsub_ok : à un ex-abonne après une désinscription réussie.

Quelques exemples :

Pour recevoir de l’aide et une description des commandes possibles, envoyez un message a :
<NOM_DE_VOTRE_ML-help@mailing-list.fr>

Pour vous inscrire à la liste de diffusion NOM_DE_VOTRE_ML, envoyez un message a : <NOM_DE_VOTRE_ML-subscribe@mailing-list.fr>

Pour retirer votre adresse de la liste, envoyez simplement un message à l’adresse qui se trouve dans l’en-tête avec comme objet « List-Unsubscribe ». Si votre adresse actuelle est strictement identique à celle que vous avez utilisée pour vous inscrire, il vous est aussi possible d’envoyer un message quelconque a : <NOM_DE_VOTRE_ML-unsubscribe@mailing-list.fr>

Pour l’ajout ou le retrait d’adresses, vous recevrez systématiquement un message de confirmation. Il vous suffira d’y répondre pour achever la transaction.

Si vous désirez contacter le propriétaire de cette liste, veuillez envoyer un message à NOM_DE_VOTRE_ML-owner@mailing-list.fr