Machen Sie Ihre Website-Inhalte mit Social-Media-Sharing-Buttons teilbar

Machen Sie Ihre Website-Inhalte mit Social-Media-Sharing-Buttons teilbar

Veröffentlicht am Februar 11, 2019 0 Comments
Make Your Website Content Shareable with Social Media Sharing Buttons_870x450

In diesem Blogbeitrag erfahren Sie, wie Sie Social-Media-Sharing-Buttons in Ihre Sitefinity CMS-Website integrieren und gestalten.

Es hat etwas mehr als ein Jahrzehnt gedauert, bis sich Social Media als eines der wirkungsvollsten und leistungsstärksten Tools etabliert hat, um Publikum anzuziehen, Website-Traffic zu generieren und Ihrer Stimme und Marke Gehör zu verschaffen. Heutzutage ist es von entscheidender Bedeutung, dass Ihre Inhalte nicht nur gelesen, sondern auch über soziale Medien von Ihren Besuchern an ein noch größeres Publikum weitergegeben werden. Durch die Integration von Schaltflächen für die Weitergabe in sozialen Medien in den Inhalt Ihrer Website machen Sie das Teilen von Inhalten durch Ihre Besucher ganz einfach.

In diesem Blogbeitrag erfahren Sie, wie Sie genau das tun können - integrieren Sie Social-Media-Sharing-Buttons in Ihre Sitefinity CMS-Website-Inhalte . Diese Freigabeschaltflächen verwenden kein JavaScript, was bedeutet, dass sie blitzschnell geladen werden und das Rendern Ihrer Website nicht blockieren. Da Sie flexibel entscheiden möchten, welche Schaltflächen Sie für welchen Inhalt verwenden, fügen Sie den Widget-Vorlagen für bestimmte Inhaltstypen einfach einen anderen Satz von Freigabeschaltflächen hinzu, unabhängig davon, ob es sich um inhalte eines integrierten oder eines dynamischen Moduls handelt.

Angenommen, Sie schreiben einen Blog mit Beiträgen, die sich ausschließlich auf Ihre Berufserfahrung beziehen. Sie möchten, dass Ihre Inhalte nur auf LinkedIn und Twitter geteilt werden, also fügen Sie diese Optionen in der Widget-Vorlage Blog-Beitrag hinzu. Darüber hinaus möchten Sie das Erscheinungsbild und verhalten dieser Schaltflächen anpassen, z. B. wenn Sie auf die Schaltfläche klicken, möchten Sie, dass Besucher ein bestimmtes Bild oder das Logo Ihres Unternehmens sehen. Es liegt ganz bei Ihnen.

In den folgenden Abschnitten erfahren Sie, wie Sie genau das tun können: Erstellen Sie Schaltflächen zum Teilen in sozialen Medien und fügen Sie sie der Vorlage hinzu, die alle MVC-Blog-Post-Widgets verwenden.

Erstellen Sie die Schaltflächen

Das Wichtigste zuerst. Um die gewünschten Buttons zu erstellen, verwenden Sie den sharingbuttons.io Generator. Alles, was Sie brauchen, ist die URL und der Titel des Inhalts, den Sie teilen möchten, da diese Informationen den Besuchern angezeigt werden, sobald der Inhalt, wie ein Blogbeitrag, geteilt wird.

Social share link generate by online tool

Hey, warte. Dies wird nicht für alle Ihre Blogbeiträge funktionieren. Also, lasst uns die Dinge dynamischer gestalten.

Um den Titel und die URL eines Beitrags bei der Freigabe automatisch aufzufüllen, müssen Sie entsprechende URL- und Textplatzhalter im MVC-Vorlagencode des Blogpost-Widgets verwenden. Diese Platzhalter müssen leicht identifizierbar sein und über die HTML-Code-Logik dynamisch durch die tatsächlichen Blogpost-Daten ersetzt werden. Sie können zum Beispiel die folgenden Platzhalter verwenden:

  • URL: urlToBeReplaced
  • Titel: titleToBeReplaced
<!-- Sharingbutton Twitter -->
<a class="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"><pfad 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.43-2.885 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>

Platzieren Sie den HTML-Code in der Widget-Vorlage

Als Nächstes erweitern Sie die Detailansicht der Widget-Vorlage Für Blogbeiträge mit dem in sharingbuttons.io generierten HTML-Code. Duplizieren Sie einfach die vorhandene Datei Detail.DetailPage.cshtml , die sich in ~/ResourcePackages/Bootstrap4/MVC/Views/BlogPost befindet, und benennen Sie die neue Datei gemäß den MVC-Namenskonventionen um. Nennen Sie beispielsweise die duplizierte Datei Detail.DetailPageSocialShare.cshtml.

Nun ist es an der Zeit, die Logik einzubauen, die die hartkodierte URL und den Titel der Blogbeiträge dynamisch ersetzt:

  • 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"> < pfad 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 --> <a class="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"><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.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"> <pfad 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.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.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.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-3v2h3v2v-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"><path d="M6.5 21.5h-5v-13h5v13zM4 6.5C2.5 6.5 1.5 5.5 1.5 4s1-2.4 2.5-2.4c1.6 0 2.5 1 2.6 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à!

Unstyled social share buttons

Gestalten der Social Media Sharing Buttons

Lassen Sie uns diese Schaltflächen gestalten, damit diese gut aussehen. Kopieren Sie dazu den von sharingbuttons.io generierten Stilcode und fügen Sie ihn in Ihr Projekt ein. Es ist immer ratsam, Best Practices zu befolgen, daher folgt die Projektdateistruktur im folgenden Beispiel den Richtlinien, die in der GitHub Bootstrap 4-Übersicht festgelegt wurden, und sieht in etwa so aus:

Example of how styles needed for the social share buttons should look like.

Sie benötigen eine Datei, die dem Styling der Social-Sharing-Schaltflächen gewidmet ist, z . B. _social-share.scss. Importieren Sie diese Datei in die main.scss und fahren Sie dann mit ihr fort – nehmen Sie alle Änderungen vor, die Sie finden, und erstellen Sie die Assets wie in diesem nützlichen Bootstrap 4-Dokument beschrieben. Als erwartetes Ergebnis erhalten Sie das, was Sie von Anfang an wollten - Social-Sharing-Schaltflächen, die funktionieren und das richtige Aussehen haben.

Styled and functional social share buttons

 

Der letzte Schliff – die Extras

Last but not least - machen Sie es schick! Ein Bild sagt mehr als tausend Worte, aber ein Thumbnail mit Text, noch mehr!  Um also Ihre teilbaren Inhalte um ein Thumbnail zu erweitern, müssen Sie lediglich ein benutzerdefiniertes Feld zu Ihren Inhalten hinzufügen, in diesem Fall zu Blogbeiträgen. Gehen Sie einfach zum Sitefinity CMS-Backend und fügen Sie dem Inhaltstyp Blog-Beitrag das benutzerdefinierte Feld Social Media (OpenGraph) hinzu. Weitere Informationen finden Sie in den Sitefinity CMS-Dokumenten:

Adding social media custom fields (OpenGraph)

Sobald Sie das benutzerdefinierte Feld erstellt haben, wird es direkt im Inhaltseditor angezeigt, wenn Sie Ihren Blogbeitrag schreiben. Fügen Sie ein Bild als Vorschaubild hinzu, und schon sind Sie fertig!

Filled social media custom fields (OpenGraph)

Fully finished social share buttons.

Das ist alles, Leute, viel Spaß und verbreitet die Neuigkeiten über die Sharing-Buttons! Verzeihung, ich meine, teilen Sie die Neuigkeiten.

Wenn Sie neu bei Sitefinity CMS sind, können Sie hier mehr darüber erfahren oder einfach noch heute in eine kostenlose 30-Tage-Testversion eintauchen.

Wir haben einen kostenlosen Kurs entwickelt, um Entwicklern, die wenig oder keine Erfahrung mit Sitefinity haben, den Einstieg zu erleichtern. Melden Sie sich hier an, er ist kostenlos.

Nikolay Stefanov

Nikolay Stefanov

Nikolay ist Frontend-Entwickler bei Progress. Er arbeitet daran, eine bessere Content-Editing-Erfahrung über die neue Admin-App für Sitefinity CMS zu bieten, die auf Angular basiert. Sie finden ihn auf LinkedIn oder Twitter.

Comments
Comments are disabled in preview mode.
Themen
Neueste Geschichten
in Ihrem Posteingang

Abonnieren Sie, um alle Neuigkeiten, Informationen und Tutorials zu erhalten, die Sie benötigen, um bessere Business-Apps und -Websites zu erstellen

Loading animation

Sitefinity-Schulungen und -Zertifizierungen jetzt verfügbar.

Lassen Sie sich von unseren Experten beibringen, wie Sie die erstklassigen Funktionen von Sitefinity nutzen können, um überzeugende digitale Erlebnisse zu bieten.

Weitere Informationen
ERFAHREN SIE MEHR ÜBER PROGESS
New Digital Challenges, New Me: Meet Sitefinity DX 14.0
Weiterlesen
 
232x131_ResourceImage
Creating Epic Digital Experiences for B2B Companies
Weiterlesen
 
dev_thumb370x200
Five Reasons Why Developers Love Sitefinity Marketplace
Weiterlesen