TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Einfaches Social Sharing Icons Widget für Weebly

10

Heutzutage ist Social Sharing ein wesentlicher Bestandteil jeder Website. Sie ermöglichen es Benutzern, die Nachricht mit wenigen Klicks sofort zu verbreiten, indem sie Ihren Artikel teilen. Während Social-Media-Marketing ein beliebtes Thema ist, bieten Site-Builder wie Weebly kein Social-Sharing-Widget für Benutzer an. Leider werden selbst die Businessplan-Benutzer auf Weebly keine anständigen Social-Sharing-Symbole auf ihrer Website haben, nachdem sie fast 25 US-Dollar pro Monat bezahlt haben. In diesem Artikel erstellen wir ein benutzerdefiniertes CSS-Widget für das Social Sharing für die Weebly-Site und erklären, wie Sie es mit Social-Sharing-Links zu Ihrer Weebly-Site hinzufügen.

Leider muss dies auf jeder Seite durch Hinzufügen der Seiten-URL erfolgen. In unserem separaten Artikel erfahren Sie, wie Sie standardmäßige soziale Symbole und ein spezielles sich drehendes Symbol- Widget hinzufügen, um Ihrer Weebly-Site soziale Profile hinzuzufügen.

Benutzerdefiniertes CSS Social Sharing Icons Widget

Da das Ziel dieses Artikels nicht darin besteht, den Designaspekt zu diskutieren, stellen wir den vollständigen CSS-Code wie unten gezeigt zur Verfügung. Grundsätzlich verwenden wir Font Awesome Icons für Social Icons mit der Containerbreite von 300px, um fünf Social Icons unterzubringen – Facebook, Twitter, Google+, Pinterest und LinkedIn.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <style> /* Container */ .column { width: 300px; } /* Individual Icons with first Box for Facebook */ .box { background-color: #3b5998; color: rgba(251, 244, 217, 0.99); display: block; width: 17%; text-align: center; float: left; margin-right: 1px; border-radius: 50%; } /* Twitter */ .box:first-child + .box { background-color: #55acee; } /* Google+ */ .box:first-child + .box + .box { background-color: #dc4e41; } /* Pinterest */ .box:first-child + .box + .box + .box { background-color: #bd081c; } /* LinkedIn */ .box:first-child + .box + .box + .box +.box { background-color: #0077b5; } /* Link Effects */ .column a { text-decoration: none; color: #ffffff; outline: none; -webkit-transition: 0.5s ease; transition: 0.5s ease; } /*Font Awesome Icons Effects */ .box .fa { margin: 10px; display: block; font-size: 26px; } /* Box Hover Effects */ .box:hover { opacity: 0.7; } </style>

HTML für das Widget „Symbole für soziales Teilen”

Unten ist der HTML-Code zusammen mit der Freigabe-URL für das soziale Widget:

<div class="column"> <a href="https://www.facebook.com/sharer/sharer.php?u=www.webnots.com" class="box"> <div class="fa fa-facebook"></div> </a> <a href="https://twitter.com/home?status=www.webnots.com" class="box"> <div class="fa fa-twitter"></div> </a> <a href="https://plus.google.com/share?url=www.webnots.com" class="box"> <div class="fa fa-google-plus"></div> </a> <a href="https://pinterest.com/pin/create/button/?url=http%3A//img.webnots.com/2015/06/header_logo_home_2x.png&media=www.webnots.com&description=" class="box"> <div class="fa fa-pinterest"></div> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=www.webnots.com&title=YOUR%20TITLE%20HERE&summary=&source=" class="box"> <div class="fa fa-linkedin"></div> </a> </div>

Das Widget sieht auf der veröffentlichten Site wie folgt aus:

Wir haben diese Website-URL verwendet. Stellen Sie sicher, dass der relevante Inhalt wie unten angegeben aus dem HTML-Code ersetzt wird:

  • Facebook, Twitter und Google+ – ersetzen Sie die Site-URL durch Ihre eigene.
  • Pinterest – ersetzen Sie das Bild und die URL.
  • LinkedIn – Website-URL und -Titel ersetzen.

Falls Sie als „Follow us”-Widget verwenden möchten, ersetzen Sie einfach die URLs im „href”-Teil durch Ihre eigenen Links zu sozialen Profilen.

CSS und HTML auf Weebly hinzufügen

  • Fügen Sie das CSS im Abschnitt "Header-Code" der benötigten Seite ein oder platzieren Sie es unter den "Einstellungen", damit der Code auf Site-Ebene wirksam ist. Erfahren Sie mehr darüber, wie Sie CSS zur Weebly-Site hinzufügen.

Einfaches Social Sharing Icons Widget für Weebly

Kopfzeilencode in Seite hinzufügen

  • Fügen Sie den HTML-Inhalt auf einer Seite hinzu, auf der Sie die Symbole platzieren möchten, indem Sie das Element " Code einbetten " verwenden.
  • Veröffentlichen Sie Ihre Website, um die Freigabesymbole in Aktion zu sehen.

Anpassen des Widgets

  • Obwohl wir mit fünf Symbolen erklärt haben, können Sie eine beliebige Anzahl von Symbolen hinzufügen. Beziehen Sie sich auf die Farbcodes der sozialen Symbole, um die Farbe für Ihre Symbole zu ermitteln.
  • Die Breite des vollen Containers beträgt 300px, um die Symbole auf mobilen Geräten automatisch auszurichten. Falls Sie weitere Symbole hinzufügen, stellen Sie sicher, dass Sie @media-Abfragen verwenden, um die Symbole auf Mobilgeräten entsprechend auszurichten.
  • Die Breite der einzelnen Icons beträgt 17% in der CSS-Klasse „.box”, die Sie nach Bedarf verkleinern oder vergrößern können.
  • Die Icongröße beträgt 26px mit der CSS-Klasse „.box .fa”, die Sie nach Bedarf ändern können.
  • Wenn Sie weitere Symbole hinzufügen, fügen Sie einfach „+ .box” hinzu und definieren Sie die Hintergrundfarbe der Symbole.

Aufnahmequelle: www.webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen