Voir la source de L'intégration de réseaux sociaux

[[fichier:home2.png]] [[Accueil|Accueil]] > [[WordPress]] > 
<span style="color:OrangeRed"> L'intégration de réseaux sociaux </span>


L'utilisation des réseaux sociaux est primordiale pour accroitre le trafic d'un site ou d'un blog. Ils permettent un meilleur référencement sur les moteurs de recherche. Il est possible d'intégrer un lien vers le réseau social ou tout simplement d'embarquer le fil d'actualité de certains réseaux.
==Liens vers les réseaux sociaux==
La plupart des thèmes disponibles dans WordPress permettent l'ajout de liens vers les réseaux sociaux. 

{|
|-
| 
* Accéder à la personnalisation du thème
* <span style="color:blue">'''-1-'''</span> Menu TOP BAR
* <span style="color:blue">'''-2-'''</span> Ajoute du lien vers le réseau social pour faire apparaitre l'icône correspondant
* <span style="color:blue">'''-3-'''</span> Affichage de l'icône du lien 
|
[[Fichier:Sociaux1.png|vignette|Exemple |300 px]]
|}

==Embarquement du réseau social==
L'intégration peut se faire part un lien ou par l'embarquement d'Instagram sur le site WordPress. 

===Instagram===
Il existe de nombreuses extensions [http://54.38.225.88/appli/index.php?title=Les_widgets_%26_les_extensions] permettant d'embarquer Instagram sur un site WordPress. Spotlight [https://wordpress.org/plugins/spotlight-social-photo-feeds/] est une solution simple et intuitive pour ajouter un flux Instagram à un site WordPress en quelques clics seulement. <br />
<br />
La version FREE est limitée en fonctionnalités notamment sur le Design mais elle permet d'embarquer confortablement Instagram.

{| 
|-
| 
* Connecter un ou plusieurs comptes Instagram.
* Combiner plusieurs comptes Instagram dans une seule galerie.
* Créer un nombre illimité de flux Instagram à utiliser sur l'ensemble de votre site.
* Afficher des photos, des vidéos et des vidéos IGTV [https://fr.wikipedia.org/wiki/IGTV]
* Mise en page en grille avec diverses options de conception.
* Personnaliser le design, y compris le rembourrage et les tailles de police. 
* Modifier la taille du flux Instagram ou faites en sorte qu'il occupe automatiquement toute zone dans laquelle il est intégré.
* Modifier le nombre de publications Instagram affichées dans le flux et le nombre de colonnes dans le flux
* Boîte à lumière popup au clic pour afficher des photos en taille réelle et des vidéos lisibles directement sur votre site Web
|| 
* En-tête du flux avec l'avatar et la bio de votre compte Instagram.
* Organiser les publications Instagram par date, par popularité ou de manière aléatoire
* Ajouter un texte de bio et une photo de profil personnalisés par compte ou flux.
* Définir un texte et des couleurs personnalisés pour le bouton "Suivre" et "Charger plus".
* Afficher ou cachez l'en-tête du flux, le bouton "Suivre" et le bouton "Charger plus".
* Appliquer les polices et les styles de votre thème pour s'intégrer automatiquement.
*  Flux Instagram 100 % responsive, personnalisable par appareil.
* Embarquer des flux Instagram sur n'importe quelle page, article, pied de page ou barre latérale à l'aide de notre bloc, widget et shortcode Instagram.
|}

{{#evt:service=youtube|id=https://youtu.be/fob_tYqIn1c|dimensions=380x220}}

{| 
|-
|
* <span style="color:blue">'''-1-'''</span> Nommage du compte Instagram
* <span style="color:blue">'''-2/3-'''</span> Connexion au compte 
* <span style="color:purple">'''-4- CONNECT '''</span> Affichage des options PRO si la case est cochée
* <span style="color:purple">'''-5-'''</span> Sélection du compte à afficher
* <span style="color:purple">'''-6-'''</span> Affichage en direct des posts 
* <span style="color:purple">'''-7-  DESIGN'''</span> 
* <span style="color:purple">'''-8-'''</span> Visualisation sur le 'device' tablette, ordinateur ou smartphone
* <span style="color:purple">'''-9-'''</span> Indication du nombre de posts et de colonnes à afficher
* <span style="color:purple">'''-10-'''</span> Gestion des posts
* <span style="color:purple">'''-11-'''</span> Complément de customisation
|
[[Fichier:instagram3.png|vignette|300 px]]
|
[[Fichier:instagram4.png|vignette|300 px]]
|-
|
* <span style="color:purple">'''-12- EMBED'''</span> Embarquement du contenu Instagram sur le site
* <span style="color:purple">'''-13-'''</span> Short code à copier dans n'importe quelle page ou message pour intégrer ce flux
* <span style="color:purple">'''-14-'''</span> Widget Spotlight Instagram Feed
* <span style="color:blue">'''-15-'''</span> Ajout du Widget dans le footer 4
* <span style="color:purple">'''-16-'''</span> Saisie d'un titre et ajout du flux à afficher
* <span style="color:purple">'''-16-'''</span> Affichage dans le footer du site du flux Instagram
|
[[Fichier:instagram5.png|vignette|300 px]]
|
[[Fichier:instagram6.png|vignette|300 px]]
|-
|

===Twitter===

|-
| 
* Accéder à Twitter publish [https://publish.twitter.com/#]
* <span style="color:blue">'''-1-'''</span> Ajout de l'URL Twitter qui doit être embarquée sur le site
* <span style="color:blue">'''-2-'''</span> Sélection du style d'affichage
* <span style="color:blue">'''-3-'''</span> Copie du code HTML à embarquer sur le site
* <span style="color:blue">'''-4-'''</span> '''set customization options' pour modifier l'affichage Twitter sur le site
|
[[Fichier:Twitter1.png|vignette|300 px]]
| 
[[Fichier:Twitter2.png|vignette|300 px]]
|-
|
* <span style="color:blue">'''-4-'''</span> '''set customization options' pour modifier l'affichage Twitter sur le site
* <span style="color:blue">'''-Update-'''</span> actualisation du code HTML en fonction des modifications d'affichage
* <span style="color:blue">'''-5-'''</span> Copie du code HTML
 |
[[Fichier:Twitter3.png|vignette|300 px]]
 |
[[Fichier:Twitter5.png|vignette|300 px]]
|-
|
* <span style="color:blue">'''-5-'''</span> Ajout du Widget HTML personnalisé
* <span style="color:blue">'''-6-'''</span> Ajout du code HTML copié précédemment
* <span style="color:blue">'''-6-'''</span> Affiche des Tweets sur le site
 |
[[Fichier:Twitter4.png|vignette|300 px]]
 |
[[Fichier:twitter6.png|vignette|300 px]]

|}

==Twitter Cards==
Twitter Cards permet transformer l'URL d'une page d'un site sous forme de carte. Il convient d'installer une extension "Twitter Cards".
{|
|-
|
* <span style="color:blue">'''-1-'''</span> Tweet intégrant une carte
* <span style="color:blue">'''-2-'''</span> Tweet sans carte. Le site n'est pas configuré pour transformer l'URL en carte Twitter
|
[[Fichier:cards1.png|vignette|300 px]]
|
[[Fichier:cards2.png|vignette|300 px]]
|-
|
* <span style="color:blue">'''-3-'''</span> Installation de l'extension JM Twitter Cards  ou Twitter Cards Meta
|
[[Fichier:cards4.png|vignette|300 px]]
|-
|
* <span style="color:blue">'''-4-'''</span> Réglage des options et des types de contenu
* <span style="color:blue">'''-5-'''</span> Affichage de la page "Jardin méditerranéen à Bruges" dans le tweet
|
[[Fichier:cards5.png|vignette|300 px]]
|
[[Fichier:cards3.png|vignette|300 px]]
|}