Sharebar

Wunsch:

Ich wünshte mir eine "Teilen-Leiste", Sharebar auf neudeutsch :-), für Facebook, Google+, Drucker und Email. Will aber nicht, wie bei dem was man im Netz so findet, bei jeder Seite in der ich diese "Sharebar" platziere die Adresse der Homepage manuell eingeben müssen. In diesem Falle wäre dies "http://www.php-html-css.de/tut_sharebar.php.".

Lösung:

Die Lösung bewegt sich über das ganze Spektrum des Webdesigns und ich werde es hier Schritt für Schritt erläutern.

Den meisten wird es nicht interessieren, sie werden sich das Script runterladen und am Quellcode herumspielen, aber für die anderen erklär ich es :-).

Um dieses Script 1 zu 1 umzusetzen sollte man den awesome-Font integrieren und ggf. eine "print.css" anlegen.

1. Das Script sollte die Adresse der Website wissen die es teilt. Hierzu nehmen wir die PHP-Zeile:

   <?php $url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?>

   Näheres dazu findet ihr hier: Seitenadresse ermitteln. Es ist eigentlich egal wo ihr das auf der Seite plaziert, bis auf das es VOR der Stelle vorkommen sollte wo ihr die Sharebar in die Seite einfügt.
2. So, jetzt brauchen wir ein HTML-Grundgerüst, das ich auch probieren werde euch Zeile für Zeile zu erklären. Nicht erschrecken, im ersten Moment sieht es sehr verwirrend aus, ist aber gar nicht so schlimm.

   <div class="sharebar">
   	<p>
   		Arikel teilen auf:
   	</p>
   	
   	<?php 	
   		$url = 'http://'.$_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
   		echo '<a href=http://www.facebook.com/share.php?u=' . $url . ' target="_blank"><i class="fa fa-facebook-official" aria-hidden="true" style="color: #3b5998;"></i></a>';
   		echo '<a href=https://plus.google.com/share?url=' . $url . ' target="_blank"><i class="fa fa-google-plus-square" aria-hidden="true" style="color: #dd4b39;"></i></a>';
   		echo '<a href="whatsapp://send?text=' . $url . '""><i class="fa fa-whatsapp" aria-hidden="true" style="color: #58ce64;"></i></a>';
   	?>
   
   	<a href="javascript:window.print()">
   	<i class="fa fa-print" aria-hidden="true"></i>
   	</a>
   	
   	<a href="mailto:
   	?subject=Ein%20Artikel%20von%20PHP%20HTML%20und%20CSS
   	&body=<?PHP echo $url; ?>">
   	<i class="fa fa-envelope-o" aria-hidden="true"></i>
   	</a>
   </div>

   Von Zeile 1-4: sollte eigentlich alles klar sein.
   Zeile 6: Der Beginn von PHP
   Zeile 7: Die Adresse der Website wird festgestellt und in der Variablen $url gespeichert.
   Zeile 8 u. 9: Die Variable $url wird in den Vorgabecode, zum teilen der Webseite eingefügt. Also wo normalerweise "http://www...." steht, wird der Befehl "echo" unterbrochen und die Variable eingefügt.
   Zeile 13 - 15: Hier wird per Java-Script und Hyperlink das "Drucken" Dialogfekd aufgerufen.
   Zeile 17: ist ein mailto-Link
   Zeile 18: Hier wird festgelegt was in der "Betreff-Zeile" der Email steht.
   Zeile 19: Unschwer zu erkennen, das ist der Text der Email wo nur dir Variable $url drinsteht.
   Der <i></i>-Tag fügt immer den awesome-Font ein und mit dem style="color:#xxxxxx;" füge ich immer die Farbe des Icons hinzu. Sonst wäre alles schwarz.
3. So, zum Schluss fehlt eigentlich nur noch etwas CSS zum Grundtheme so wie man es unten sieht.

   .sharebar {
   	position: relative;
   	height: 4em;
   	width: auto;
   	background-color: rgba(255,255,255,0.8);
   	border-radius: 5px;
   	padding: .5em;
   	margin: 0.5em 0 0.5em 0;
   	display: block;
   	border: 0px solid;
   }
   .sharebar p {
   	font-family: 'Open Sans', sans-serif;
   	font-size: 12px;
   	color: #000000;
   	line-height: 16px;
   	font-weight: bolder;
   }
   .sharebar a {
   	font-size:3em;
   	margin-right:0.25em;
   }
   .sharebar img {
   	width: 48px;
   	padding: 0;
   }
   .sharebar a:hover {
   	color: #000000;
   	opacity: 0.8;
   }
   .sharebar a:last-child {
   	margin-right:0;
   }