Haga que el contenido de su sitio web se pueda compartir con los botones para compartir en redes sociales

En esta publicación de blog, aprenda a integrar y diseñar botones para compartir en redes sociales en el contenido de su sitio web de Sitefinity CMS.

Las redes sociales tardaron un poco más de una década en establecerse como una de las herramientas más impactantes y poderosas para atraer audiencias, atraer tráfico al sitio web y hacer que su voz y marca se escuchen. Hoy en día, es de vital importancia que su contenido no solo sea leído sino también compartido a través de las redes sociales por sus visitantes a un público aún más amplio. Al integrar los botones para compartir en las redes sociales en el contenido de su sitio, hace que compartir contenido por parte de sus visitantes sea simple.

En esta publicación de blog, aprenderá cómo hacer exactamente eso: integrar los botones para compartir en las redes sociales en el contenido de su sitio web de Sitefinity CMS. Estos botones para compartir no usan JavaScript, lo que significa que se cargan increíblemente rápido y no bloquean la representación de su sitio web. Dado que desea ser flexible al decidir qué botones usa para qué contenido, simplemente agregue un conjunto diferente de botones para compartir a las plantillas de widgets para tipos específicos de contenido, ya sea contenido de un módulo integrado o dinámico.

Digamos que estás escribiendo un blog con publicaciones relacionadas estrictamente con tu experiencia profesional. Desea que su contenido se comparta solo en LinkedIn y Twitter, por lo que agrega estas opciones en la plantilla de widget de publicación de blog. Además, desea personalizar la apariencia y el comportamiento de estos botones; por ejemplo, al hacer clic en el botón, desea que los visitantes vean una imagen específica o el logotipo de su empresa. Todo depende de ti.

En las siguientes secciones, aprenderá cómo hacer precisamente eso: crear botones para compartir en redes sociales y agregarlos a la plantilla que usarán todos los widgets de publicaciones de blog de MVC.

Crear los botones

Lo primero es lo primero. Para crear los botones deseados, utilice el generador de sharingbuttons.io. Todo lo que necesita es la URL y el título del contenido que desea compartir porque esta información se muestra a los visitantes una vez que se comparte el contenido, como una publicación de blog.

Espera. Esto no va a funcionar para todas las publicaciones de su blog. Entonces, hagamos las cosas más dinámicas.

Para rellenar automáticamente el título y la URL de cualquier publicación al compartirla, debe usar marcadores de posición de texto y URL relevantes en el código de plantilla del widget de publicación de blog de MVC. Estos marcadores de posición deben ser fácilmente identificables y reemplazados dinámicamente a través de la lógica de código HTML con los datos reales de la publicación del blog. Por ejemplo, puede utilizar los siguientes marcadores de posición:

• Url: urlToBeReplaced
• Título: titleToBeReplaced

<!-- Sharingbutton Twitter -->

<una clase="resp-sharing-button__link" href="https://twitter.com/intent/tweet/?text=titleToBeReplaced& url=urlToBeReplaced" target="_blank" aria-label=""><div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--small"><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-.82-.88-2-1.43-3.3-1.43-2.2.95 0-4,55 2,04-4,55 4,54 0 ,36,03,7,1 1,04-3,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.16C5.78 18.1 3.137 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-,2 0-.4-.02-.6,9-.63 1,96-1,22 2,56-2,14z" /></svg></div></div></a>

Coloque el código HTML en la plantilla de widget

A continuación, mejore la vista Detalle de la plantilla de widget Entrada de blog con el código HTML generado en sharingbuttons.io. Simplemente duplique el archivo Detail.DetailPage.cshtml existente, ubicado en ~/ResourcePackages/Bootstrap4/MVC/Views/BlogPost y cambie el nombre del nuevo archivo de acuerdo con las convenciones de nomenclaturaMVC. Por ejemplo, asigne al archivo duplicado el nombre Detail.DetailPageSocialShare.cshtml.

Es hora de hacer la magia y poner la lógica que reemplazará dinámicamente la URL codificada y el título de las publicaciones del blog:

• urlToBeReplaced => @Model.Item.DefaultUrl
• titleToBereplaced => @Model.Item.Fields.Title

@model Telerik.Sitefinity.Frontend.Mvc.Models.ContentDetailsViewModel 

@using Telerik.Sitefinity;
@using Telerik.Sitefinity.Frontend.Mvc.Helpers;
@using Telerik.Sitefinity.Web.DataResolving; 

<div class="@Model.CssClass" @Html.InlineEditingAttributes(Model.ProviderName, Model.ContentType.FullName, (Guid)Model.Item.Fields.Id)>
  <h3>
    <span @Html.InlineEditingFieldAttributes("Title", "ShortText")>@Model.Item.Fields.Title</span>
  </h3>
  <div>
    @Model.Item.GetDateTime("PublicationDate", "MMM d, yyyy, HH:mm tt")
    @Html.Resource("By")
    @DataResolver.Resolve(@Model.Item.DataItem, "Author", null)
    @Html.CommentsCount(string.Empty, @Model.Item.DataItem)
  </div>
  <div class="row mt-5">
    <div class="col-2 pr-social-share">
      <!-- Sharingbutton Facebook -->
      <a class="resp-sharing-button__link" href=

"https://facebook.com/sharer/sharer.php?u=@Model.Item.DefaultUrl" target="_blank" aria-label=""><div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--small"><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><!--Sharingbutton Twitter --><una clase="resp-sharing-button__link" href="https://twitter.com/intent/tweet/?text=@Model.Item.Fields.Title& url=@Model.Item.DefaultUrl" target="_blank" aria-label=""> <div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--small"><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"><ruta 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-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.16C5.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-,2 0-.4-.02-.6.9-.63 1,96-1,22 2,56-2,14z"/></svg></div></div></a ><!-- Sharingbutton Google+ --><a class="resp-sharing-button__link" href="https://plus.google.com/share?url=@Model.Item.DefaultUrl" target="_blank" aria-label=""> < div class="resp-sharing-button resp-sharing-button--google resp-sharing-button--small"> <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"> <camino d="M11.37 12.93c-.73-.52-1.4-1.27-1.4-1.5 0-.43.03-.63.98-1.37 1.23-.97 1.9-2.23 1.9-3.57 0-1.22-.36-2.2.2.23 3-1-3.05h.5c.1 0 .2-.04.28-.1l1.36-.98c.16-.12.23-.34.17-.54-.07-.2-.25-.33-.46-.33H7.6c-.66 0-1.34.12-2 .35-2.23.76-3.78 2.66-3.78 4.6 0 2.76 2.13 4.85 5 4.9-.07.23-.1.45-.1.66 0 .43.1.83.33 1.22h-.08c-2.72 0-5.17 1 .34-6.1 3.32-.25.52-.37 1.04-.37 1.56 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.05 c.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.8zM5.54 3.9c.33-.38.75-.58 1.23-.58h.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-.04-2.63-1.6-2.87-3.4-.13-1 .08-1.92.58-2.5zM23.5 9.5h-3v-3h-2v3h-3v2h3v3h2v-3h3"/> </svg></div></div></a><!-- Sharingbutton LinkedIn --><a class="resp-sharing-button__link" href=" https://www.linkedin.com/shareArticle?mini=true& url=@Model.Item.DefaultUrl& title=@Model.Item.Fields.Title& summary=@Model.Item.Fields.Title& source=@Model.Item.DefaultUrl" target="_blank" aria-label=""> <div class="resp-sharing-button resp-sharing-button--linkedin resp-sharing-button--small"><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"><ruta 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 2.5 2.50 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("Content", "LongText") > @Html.HtmlSanitize((string)Model.Item.Fields.Content)</div></div> @Html.CommentsList(@Model.Item.DataItem) < /div>

Et voilà!

Aplicar estilo a los botones para compartir en redes sociales

Vamos a peinar esos botones y hacer que se vean bien. Para ello, copie el código de estilo generado por sharingbuttons.io y péguelo en su proyecto. Siempre es aconsejable seguir las mejores prácticas, por lo que en el siguiente ejemplo, la estructura del archivo del proyecto sigue las pautas establecidas en la descripción general de GitHub Bootstrap 4 y se parece a esto:

Debe tener un archivo dedicado al estilo de los botones para compartir en redes sociales, por ejemplo, _social-share.scss. Importe este archivo en main.scss y luego continúe con él: realice todos los cambios que considere adecuados y cree los activos como se describe en este útil documento de Bootstrap 4. Como resultado esperado, obtienes lo que querías en primer lugar: botones para compartir en redes sociales que funcionan y tienen el aspecto correcto.

 

Toques finales: los extras

Por último, pero no menos importante, ¡hazlo elegante! Una imagen habla más de mil palabras pero una miniatura con texto, ¡aún más! Por lo tanto, para enriquecer su contenido compartible para mostrar una miniatura, todo lo que necesita hacer es agregar un campo personalizado a su contenido, en este caso, a las publicaciones del blog. Simplemente vaya al backend de Sitefinity CMS y agregue el campo personalizado Social Media (OpenGraph) al tipo de contenido de la publicación de blog. Para obtener más detalles, consulte los documentos de Sitefinity CMS:

• Crear campos personalizados
• Abrir configuración de Graph
  

Una vez que cree el campo personalizado, lo verá directamente en el editor de contenido cuando esté escribiendo su publicación de blog. ¡Agregue una foto como miniatura y listo!

¡Eso es todo amigos, disfruten y difundan las noticias en los botones para compartir! Lo siento, me refiero a compartir las noticias.

Si es nuevo en Sitefinity CMS, puede obtener más información al respecto aquí,o simplemente sumergirse en una prueba gratuita de 30 días hoy.

Hemos diseñado un curso gratuito para ayudar a los desarrolladores que tienen poca o ninguna experiencia en el desarrollo contra Sitefinity a ponerse al día. Regístrate aquí,es gratis.