ABC: BLOG & BLOGGER: Intégration : synthèse

Comment intégrer
dans le texte de votre article
divers documents ?

ex: son mp3, vidéo, document .pdf, animation flash .swf...

Plusieurs cas sont possibles :
1-Intégration directe depuis Blogger, cas des photos et des vidéos
2-Documents créé à partir de Google Documents
3-Fichiers stockés sur Google Drive
4-Fichiers stockés chez votre FAI (ex Free)

1-Intégration directe depuis Blogger, cas des photos et des vidéos
La solution la plus simple pour toutes vos images et vidéos

AJOUT D'UNE IMAGE

Vous pouvez ajouter une image de votre ordinateur ou du Web sur votre blog. Cliquez sur l'icône d'image dans la barre d'outils de l'éditeur d'articles. Une fenêtre vous invite à parcourir votre disque dur pour accéder à un fichier image ou à entrer l'URL d'une image provenant du Web.
Sélectionnez l'image, puis choisissez une mise en page afin de définir l'emplacement où elle s'affichera dans votre article :

Les options "Gauche", "Centrer" et "Droite" vous permettent de personnaliser l'affichage du texte autour de l'image.
Les options "Taille de l'image" déterminent sa taille d'affichage dans l'article.

Cliquez sur ENVOYER DES IMAGES pour ajouter votre image, puis sur TERMINÉ lorsque la fenêtre de confirmation vous indique "Votre image a été ajoutée." Blogger vous renvoie ensuite à l'éditeur dans lequel votre image apparaît prête à être publiée sur votre blog.
Vous pouvez également publier des images sur votre blog à l'aide de votre appareil mobile, du logiciel de photos gratuit de Google Picasa ou d'un service tiers tel que flickr.

AJOUT D'UNE VIDEO

Pour insérer une vidéo dans votre article, cliquez sur l'icône représentant une pellicule dans la barre d'outils de l'éditeur, au-dessus de la zone de rédaction.

Une fenêtre vous invite à ajouter une vidéo à votre article.

Quatre options s'offrent à vous dans la fenêtre pop-up qui s'affiche :

Importer : vous pouvez parcourir votre ordinateur pour trouver la vidéo de votre choix.
À partir de YouTube : vous pouvez choisir une vidéo de YouTube et l'afficher sur votre blog.
Mes vidéos YouTube :Si vous possédez des vidéos sur un compte Google, vous pouvez y accéder dans cet onglet et les transférer.
Depuis votre mobile (téléphone): Si vous avez un compte Google+ et un téléphone sous Android, vous pouvez télécharger une application vous permettant de transférer instantanément les vidéos de votre téléphone vers votre compte Google.
Depuis votre Webcam

=>voir notre dossier vidéo pour compléments

2-Documents créé à partir de Google Documents

Vous pouvez créer dans Google Doc la plupart de vos documents puis les intégrer dans votre blog.

Se rendre sur Google Docs pour créer le document

Lorsque le document est créé, afficher le Menu Fichier

puis "PUBLIER SUR LE WEB"

et sélectionner "INTEGRER"

vous obtenez le code vous permettant d'intégrer le document dans votre article. (en mode HTML !)

=> voir notre dossier "Google drive et Google Doc" en complément

3-Fichiers stockés sur Google Drive

METHODE : vous aurez à copier/coller du code, puis le modifier. Nous conseillons d'utiliser le bloc notes pour réaliser ces opérations. Lorsque le code est finalisé, il suffit de le coller dans l'article de Blogger, en mode HTML

Télécharger le fichier sur Google DRIVE
Vous devez télécharger sur Google Drive votre fichier, puis le partager afin d'obtenir son URL du type :

https://drive.google.com/file/d/0B6Uwn-CRRjnZRm0tVTF0SUFMQk0/view?usp=sharing

Extraire l'identifiant

Dans l’URL copiée la partie en fluo jaune représente l’identifiant du fichier partagé. Il s'agit de la partie entre les 2 / /
Il faudra bien l'identifier puis le copier.

Connaitre le code HTML pour intégrer le document

En mode HTML, il faudra copier le code ci-dessous et remplacer l'identifiant du fichier par le votre. Nous vous donnons le code selon le type de fichier concerné
FICHIER AUDIO mp3

CODE

<br />

<audio src="https://drive.google.com/uc?id=IDENTIFIANT" controls>
Votre navigateur n'est pas à jour !</audio>
<br />

Exemple

en fait, Blogger modifie votre code [qui correspond pourtant aux normes HTML5 ! ] et le transforme automatiquement (et obligatoirement) ainsi:

<br />

<audio controls="" src="https://drive.google.com/uc?id=IDENTIFIANT">Votre navigateur n'est pas à jour !</audio>

<br />

donc il vaut mieux utiliser directement ce code !

FICHIER PDF

CODE:

<br />

<br />

Pour obtenir :

FICHIER VIDEO

CODE:

<br />
<iframe src="https://docs.google.com/file/d/IDENTIFIANT/preview" width="640" height="480"></iframe>
<br />

pour obtenir :

4-Fichiers stockés chez votre FAI (ex Free)

Ces fichiers sont accessibles via une adresse URL classique du type:

http://adresse.free.fr /dossier/fichier.pdf

Pour savoir comment ouvrir un compte gratuit chez Free puis déposer par FTP ses fichiers , voir notre dossier

Comment intégrer ces fichiers ?

il faut utiliser le code HTML 5

AUDIO
CODE

<br />
<audio src="ADRESSE" controls>Votre navigateur n'est pas à jour !</audio>
<br />

exemple

VIDEO

il est conseillé d'utiliser des fichier au format .mp4

CODE

<br />
<video⁪⁪⁪ src="ADRESSE" controls width="600">
Votre navigateur n'est pas à jour ! </video>
<br />

exemple

Possibilité via la balise iframe, mais la vidéo démarre automatiquement ! :

PDF et ANIMATION FLASH (.swf)

CODE

<br />

<br />

exemple

Complément
=>Si nécessaire, dans les divers codes fournis, adapter la taille dans : hauteur height="500px" et largeur width="550px"

=>Compléments pour comprendre ce code dans notre dossier