Fermer

février 11, 2019

Rendre le contenu de site Web partageable avec les boutons de médias sociaux


Dans ce billet de blog, découvrez comment intégrer et styler des boutons de partage de médias sociaux dans le contenu de votre site Web Sitefinity CMS.

Il a fallu un peu plus d'une décennie aux médias sociaux pour devenir un des outils les plus puissants et les plus percutants. pour attirer le public, attirer le trafic sur le site Web et faire entendre votre voix et votre marque. De nos jours, il est de la plus haute importance que votre contenu soit non seulement lu, mais également partagé sur les médias sociaux par vos visiteurs avec un public encore plus vaste. En intégrant des boutons de partage de médias sociaux au contenu de votre site, vous simplifiez le partage de contenu par vos visiteurs.

Dans cet article de blog, vous apprendrez comment faire exactement cela: intégrez des boutons de partage de médias sociaux dans votre Sitefinity CMS contenu du site Web. Ces boutons de partage n'utilisent pas JavaScript, ce qui signifie qu'ils chargent très rapidement et ne bloquent pas le rendu de votre site Web. Comme vous voulez choisir les boutons que vous utilisez pour quel contenu, choisissez simplement un ensemble différent de boutons de partage dans les modèles de widgets pour des types de contenu spécifiques, qu'il s'agisse du contenu d'un module intégré ou dynamique. [19659004] Supposons que vous écriviez un blog avec des messages qui traitent strictement de votre expérience professionnelle. Vous souhaitez partager votre contenu uniquement sur LinkedIn et Twitter, vous devez donc ajouter ces options au modèle de widget Blog post . En outre, vous souhaitez personnaliser l'apparence et le comportement de ces boutons. Par exemple, lorsque vous cliquez sur le bouton, vous souhaitez que les visiteurs voient une image spécifique ou le logo de votre société.

Dans les sections suivantes, vous apprendrez comment faire exactement cela: créez des boutons de partage de médias sociaux et ajoutez-les au modèle que tous les widgets de MVC Blog post utiliseront.

Créez les boutons

Premières choses d'abord. Pour créer les boutons souhaités, vous utilisez le générateur sharingbuttons.io . Vous n'avez besoin que de l'URL et du titre du contenu que vous souhaitez partager, car ces informations sont affichées pour les visiteurs une fois que le contenu, comme un article de blog, est partagé.

 Lien de partage social généré par l'outil en ligne

Hé, attendez. Cela ne fonctionnera pas pour tous vos billets de blog. Rendons donc les choses plus dynamiques.

Pour renseigner automatiquement le titre et l’URL de chaque publication lors du partage, vous devez utiliser des espaces réservés URL et texte dans le code de modèle de widget MVC Blog post . Ces espaces réservés doivent être facilement identifiables et remplacés de manière dynamique via la logique de code HTML avec les données de publication de blog réelles. Par exemple, vous pouvez utiliser les espaces réservés suivants:

  • Url: urlToBeBeReplaced
  • Titre: titleToBeReplaced

 < a   class  =  "[].  "   href  = "  https://twitter.com/intent/tweet/?text=titleToBeReplaced  & amp;  url = urlToBeReplaced  "   target  = "  _blank  "   aria-label  = "  ""  > 
     < div   class  =  " bouton-de-partage-resp-bouton-de-partage - twitter bouton-de-partage-de-partage - petit  " > 
         < div   aria-hidden  = "  vrai  "   classe  =  " resp-sharing-sharing-button__icon resp-sharing-button__icon - solid "  > 
             < svg [19659014] xmlns  =  " http://www.w3.org/2000/svg "    viewBox  =  " 0 0 24 24  " > 
                 < chemin   d  = "  M23.44 4.83c-.8.37-1.5.38-2.22 .02,93-.56,98-.96 1,32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04 -3,77-2,27,12-2-9,36-4,75-4,67,6,66,45,6,6 2,3 0 1,56,8 2,95 2 3,77- 0,74-0,03-1,44-2,22,05-5,70.06.06 2.2 1,56 4,03 3,64 4,44- .67.2-1.37.2-2.06.08.58 1,8 2,26 3,12 4,25 3,16 C5,78 18,1 3,37 18,74 1 18,46c2 1,3 4,4 2,04 6,97 2,04 8,35 0 ​​12,92 à 6,92 12,92 à 12,93 0,92 à 12,93 0 à 0,2. -.02-.6.9-.63 1.96-1.22 2.56-2.14z  "  /> 
             </  svg > 
         </  div > 
     </  div > 
 </  a > 

Placez le code HTML dans le modèle de widget

Ensuite, vous améliorez le Détail vue du Blo g post modèle de widget avec le code HTML généré dans sharingbuttons.io . Il vous suffit de dupliquer le fichier Detail.DetailPage.cshtml existant situé dans ~ / ResourcePackages / Bootstrap4 / MVC / Views / BlogPost et de renommer le nouveau fichier conformément au nom MVC . conventions . Par exemple, nommez le fichier dupliqué Detail.DetailPageSocialShare.cshtml .

Il est temps de faire de la magie et de mettre la logique qui remplacera de manière dynamique l'URL codée en dur et le titre des billets de blog:

  • urlToBeReplaced => @ Model.Item.DefaultUrl
  • titleToBereplaced => @ Model.Item.Fields.Title
 @model Telerik.Sitefinity.Frontend.Mvc.Models.ContentDetailsViewModel

@ en utilisant Telerik.Sitefinity;
@user Telerik.Sitefinity.Frontend.Mvc.Helpers;
@user Telerik.Sitefinity.Web.DataResolving;

 < div   class  =  " @ Model.CssClass "    @ Html.InlineEditingAttributes (Modèle.ProviderName,   Modèle .ContentType.FullName,   (Guid) Model.Item.Fields.Id) > 
   < h3 > 
     < span   @ Html.InlineEditingFieldAttributes ("Titre",   "ShortText") >  @ Modèle.Item .Fields.Title  </  span > 
   </  h3 > 
   < div > 
    @ Model.Item.GetDateTime ("PublicationDate", "MMM j, aaaa, HH: mm tt")
    @ Html.Resource ("Par")
    @ DataResolver.Resolve (@ Model.Item.DataItem, "Author", null)
    @ Html.CommentsCount (string.Empty, @ Model.Item.DataItem)
   </  div > 
   < div   class  =  " rangée mt-5 "  > 
     < div   classe  =  " col-2 pr-partage social "  > 
        
       < a   class  =  " resp-sharing-button__link "    href  =  " https://facebook.com/sharer/sharer.php?u=@Model.Item.DefaultUrl "   target  = "  _blank  "   aria-label  =  ""  > 
         < div   class  =  " bouton de partage bouton de partage bouton - bouton de partage bouton - petit  " > 
           < div   aria-hidden  =  " true "    class  =  " resp- sharing-button__icon resp-sharing-button__icon - solid  " > 
             < svg   xmlns  = "  http: // www .w3.org / 2000 / svg  "   viewBox  = "  0 0 24 24  " > .
               < path   d  =  " M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3,44 9,5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z  "  /> 
             </  svg > 
           </  div > 
         </  div > 
       </  a > 
        
       < a   class  =  " resp-sharing-button__link "    href  =  " https://twitter.com/intent/tweet/?text=@Model.Item.Fields.Title&amp;url=@Model.Item.DefaultUrl[19459028CLIQUEZ-MOIDE19459028CLASSIC =  " _blank "    aria-label  =  ""  > 
         < ] div   class  =  " bouton-de-partage-resp bouton-de-partage-twitter - bouton de partage-resp-partage - petit "  > [19659082]
           < div   aria-hidden  =  " true "    class  =  " resp- sharing-button__icon resp-sharing-button__icon - solid  " > 
             < svg   xmlns  = "  http: // www .w3.org / 2000 / svg  "   viewBox  = "  0 0 24 24  " > .
               < path   d  =  " M23.44 4.83c-.8.37-1.5.38-2.22.02.93 - .56.98 - .96 1.32-2.02-. 88,52-1,86,9-2,9 1,1-0,82-0,88-2-1,43-3,3-1,43-2,5 0-4,55 2,04-4,55 4,54 0 .36.03,7,1 1,03,77-.2-7,12-2-9,36-4,75 -4,67-, 6 1,45-.6 2,3 0 1,56,8 2,95 2 3,77-.74-.03-1,44-.23-2,05-.57v.06c0 2.2 1.56 4.03 3.64 4.44 à .67.2-1.37.2-2.06 .08,58 1,8 2,26 3,12 4,25 3,16 C5,78 18,1 3,37 18,74 1 18,46c2 1,3 4,4 2,04 6,97 2,04 8,35 0 ​​12,92 à 6,92 12,92 à 12,93 0 à 0,2 0 à 0,4 .0,0 à 0,02 à 0,6 à 0,6 à 0,22,66 à 0,60. -2.14z  "  /> 
             </  svg > 
           </  div > 
         </  div > 
       </  a > 
        
       < a   class  =  " resp-sharing-button__link "    href  =  " https://plus.google.com/share?url=@Model.Item.DefaultUrl"191990994">194590287.jpg}   aria-label  =  ""  > 
         < div   class  =  " resp- bouton de partage bouton de partage - google bouton de partage - petit  " > 
           < div   aria-hidden  =  " true "    class  =  " resp- sharing-button__icon resp-sharing-button__icon - solid  " > 
             < svg   xmlns  = "  http: // www .w3.org / 2000 / svg  "   viewBox  = "  0 0 24 24  " > .
               < path   d  =  " M11.37 12.93c. 0,73-1,4-1,27-1,4-1,5 0 à 0,43,03 - 0,63,9. 1,37 1,23 à .97 1.9-2.23 1.9-3.57 0-1.22-.36-2.3-1-3.05h.5c.1 0,2., 04,28 à .1l1,36 à .98c.16 à .12.23 à .34.17 -0,54-0,77,2,2,25-0,33,46,36H7,6c-0,66 0-1,34,12-2,35-26,76-3,78 2,66-3,78 4,6 0 2,76 2,13 4,85 5 4,9-0,07,23-0,45-1,66-0,43,1,83,33 1,22h -08c-2,72 0-5,17 1,34-6,1 3,32-0,25,52 à 0,37 0,35-0,55 0,50c-2,72 0-5,17 1,34-6,1 3,32-0,25,52 à 0,37 0,35-0,55 0 .5.13.98.38 1.44.6 1.04 1.84 1.86 3.55 2.28.87.23 1.82.34 2.8.34.88 0 1.7-.1 2.5-.34 2.4-.7 3.97-2.48 3.97-4.54 0-1.97-.63-3.15-2.33-4.35zm-7.7 4.5c0-1.42 1.8 -2,68 3,9-2,68h.05c.45 0 .9.07 1.3.2l.42.28c.96.66 1.6 1.1 1.77 1.8.05.16.07.33.07.5 0 1.8-1.33 2.7-3.96 2.7-1.98 0-3.54-1.23-3.54-2.8 zM5.54 3.9c.33- .38.75-0 .58 1.23-0.55h.05c1.35.05 2.64 1.55 2.88 3.35.14 1.02-.08 1.97- .6 2.55- .32.37- .74.56-1.23.56h-.03c. 1,32-0,04-2,63-1,6-2,87-3,4-0,13-1 0,08-1,92,58-2,5zM23,5 9,5h-3v-3h-2v3h-3v2h3v3h2v-3h3  "  /> 
             </  svg > 
           </  div > 
         </  div > 
       </  a > 
        
       < a   class  =  " resp-sharing-button__link "    href  =  " https://www.linkedin.com/shareArticle?mini=true  &  url=@Model.Item.DefaultUrl  &  title=@Model.Item.Fields.Title  & amp  summary=@Model.Item.Fields.Title  &  source=@Model.Item.DefaultUrl  "   target  =  ] " _blank "    aria-label  =  ""  > 
         < div    =  " bouton de partage bouton de partage bouton - bouton de partage respecté - petit "  > 
           < div   aria-hidden  =  " true "    class  =  " resp- sharing-button__icon resp-sharing-button__icon - solid  " > 
             < svg   xmlns  = "  http: // www .w3.org / 2000 / svg  "   viewBox  = "  0 0 24 24  " > .
               < path   d  =  " M6.5 21.5h-5v-13h5v13zM4 6.5C2.5 6.5 1.5 5.3 1.5 4s1-2.4 2.5-2.4c1.6 0 2,5 1 2,6 2,5 0 1,4-1 2,5-2,6 2,5zm11,5 6c-1 0-2 1-2 2v7h-5v-13h5V10s1.6-1.5 4-1.5c3 0 5 2.2 5 6.3v6.7h-5v-7c0- 1-1-2-2-2z  "  /> 
             </  svg > 
           </  div > 
         </  div > 
       </  a > 
     </  div > 
     < div   class  =  " col -10  "   @ Html.InlineEditingFieldAttributes (" Contenu ",  " LongText ") >  @ Html.HtmlSanitize ((chaîne) Modèle.Item.Fields.Content )  </  div > 
   </  div > 
  @ Html.CommentsList (@ Model.Item.DataItem)
 </  div >   

Et voilà!

 Boutons de partage social sans style

Style les boutons de partage de médias sociaux

Laissez-nous coiffer ces boutons et leur donner une belle apparence. Pour ce faire, copiez le code de style généré par sharingbuttons.io et collez-le dans votre projet. Il est toujours sage de suivre les meilleures pratiques. Ainsi, dans l'exemple ci-dessous, la structure du fichier de projet suit les directives définies dans la vue d'ensemble GitHub Bootstrap 4 et ressemble à ceci:

 les boutons de partage social devraient ressembler.

Vous devez avoir un fichier dédié au style des boutons de partage social, par exemple _social-share.scss . Importez ce fichier dans le fichier main.scss puis poursuivez-le: apportez toutes les modifications que vous souhaitez et créez les ressources comme décrit dans cet utile Bootstrap 4 doc . Comme résultat escompté, vous obtenez ce que vous vouliez au départ: des boutons de partage social qui fonctionnent et qui vous vont bien.

 Boutons de partage sociaux stylés et fonctionnels

Touches finales – Les extras

Dernière mais pas des moindres, faites-en envie! Une image parle plus que mille mots mais une vignette avec du texte, encore plus! Donc, pour enrichir votre contenu partageable afin d’afficher une vignette, il vous suffit d’ajouter un champ personnalisé à votre contenu, dans ce cas – aux articles de blog. Il suffit d’aller dans le site Web Sitefinity CMS et d’ajouter le champ personnalisé Médias sociaux (OpenGraph) au type de contenu Blog post . Pour plus de détails, consultez la documentation Sitefinity CMS:

 Ajout de champs personnalisés pour les réseaux sociaux (OpenGraph)

Une fois que vous avez créé le champ personnalisé, vous le verrez directement dans l'éditeur de contenu lorsque vous écrivez votre blog. poster. Ajoutez une photo en miniature et vous avez terminé!

 Champs personnalisés de médias sociaux remplis (OpenGraph)

 Boutons de partage social entièrement terminés.

C’est tout le monde, amusez-vous et partagez l’information sur les boutons de partage! Désolé, je veux dire part les nouvelles.

Si vous êtes nouveau sur Sitefinity CMS, vous pouvez en apprendre davantage à ce sujet ici ou tout simplement plonger dans un gratuit Essai de 30 jours aujourd'hui.






Source link