5202: Google Plus Badge als Ribbon verwenden

30.12.11

Google Plus Badge als Ribbon verwenden

Update: Ich habe ein weiteres mal den Header-Bereich umgebaut. Mir war es wichtig, mehr Übersicht über die Posts zu haben - die ursprüngliche Idee hinter diesem Post funktioniert deshalb nicht mehr. Sobald Gadgets möglich sind, werde ich das ganze noch einmal aufgreifen.

Durch ein Google Badge könnt ihr euren Blog optimal mit einer Google+ Seite verbinden. Um die Aufmerksamkeit auf so ein Badge zu lenken, habe ich es mal testweise als Ribbon[=Band] gestaltet. Ihr seht es rechts oben im Blog. Wie das geht, beschreibe ich in diesem Post Schritt für Schritt.

Vorbereitung

Zunächst müsst ihr euch das Badge holen. Dazu gibt es eine Konfigurationsseite, auf der ihr eure Google+ Page ID eingeben müsst. Diese Page ID könnt ihr aus dem Browser auslesen - öffnet dazu eure Google+ Seite; oben im Browser findet ihr in der URL eine lange Zahlenkombination:

https://plus.google.com/dashieristeurePageID

Auf der Konfigurationsseite bekommt ihr ein Link und eine HTML. Letzere packt ihr in ein HTML/Java Gadget - für die dynamischen Ansichten benütze ich ein Pseudo-Gadget, das ebenfalls dazu taugt. Holt euch die HTML für das 'Medium Icon' und schreibt dazu einen kurzen Text, dass sollte dann so oder so ähnlich ausschauen:

<div id="gplus">
<span id="text">5202&nbsp;auf&nbsp;</span> 
<a href="https://plus.google.com/114218821965302140644?prsrc=3" 
style="text-decoration: none;"><img alt="" src="https://ssl.gstatic.com/images/
icons/gplus-32.png" style="border: 0; height: 32px; width: 32px;" /></a></div>
</div>

Gibt als Ergebnis dieses Badge:

5202 auf

Layout

Als erstes gestalten wir das Badge - Schrift, Schriftgröße und so weiter:

#text {
  font-family: 'Hoefler Text', Constantia, Palatino, 'Palatino Linotype', 
'Book Antiqua', Georgia, serif;
  font-size: 1.25em;
  color: #333333;
}

Damit das Logo und die Schrift in die gleiche Zeile kommt, machen wir es zum inline Element und zentrieren es horizontal [weil das ganze Element später gekippt wird] und noch ein paar andere Änderungen.

#gplus img{
   display: inline;
   vertical-align: middle;
   padding:0; 
   background:transparent; 
   border: none;
}

Schaut schon besser aus, oder?

5202 auf

Hintergrund

Wir geben dem Badge [das ja zum Ribbon werden soll] nun eine Breite width und einen Hintergrund:

#gplus {
  width: 500px;
  background: rgb(255,255,0)
  text-align: center;
}

Das Badge wird nun schon mehr zum Band, ist aber mit dem durchgängigen Hintergrund langweilig.

5202 auf

Also spendieren wir dem Band einen Gradienten, der nach links 'auslaufen soll ...

#gplus{
  background-image: -webkit-linear-gradient(left, rgba(255,255,0,1), 
rgba(255,255,0,0)); 
     background-image: -moz-linear-gradient(left, rgba(255,255,0,1), 
rgba(255,255,0,0));
      background-image: -ms-linear-gradient(left, rgba(255,255,0,1), 
rgba(255,255,0,0));
       background-image: -o-linear-gradient(left, rgba(255,255,0,1), 
rgba(255,255,0,0));
          background-image: linear-gradient(left, rgba(255,255,0,1), 
rgba(255,255,0,0));
}

Wer will, kann auch noch einen Filter plus Fallback für den Internet-Explorer schreiben - funktionieret allerdings zusammen mit dem Drehwinkel nicht besonders gut.

/* Internet Explorer */
 *background: #ffff00;
 background: #ffff00\0/;
 filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1,
 startColorstr=#ffffff00, endColorstr=#ffffffff);

5202 auf

Da kann sich jeder selber austoben, ich denke, bei einem Ribbon ist weniger mehr, also lassen wir es erst mal dabei bewenden.

Die Positionierung

Als erstes wird das Badge um 45º gedreht:

#gplus {
  -webkit-transform:rotate(45deg);
     -moz-transform:rotate(45deg);
      -ms-transform:rotate(45deg);
       -o-transform:rotate(45deg);
          transform:rotate(45deg);
}

5202 auf

Das Badge wird absolut positioniert, womit es aus dem float der einzelnen HTML Elemente genommen wird - mit top und left wird es genau in die Ecke eingepasst. Der hohe Z-Index ist nötig, damit das Badge später alle anderen Elemente überdeckt.

#gplus{
position:absolute;
  top:-30px; 
  right:-240px;
  z-index:5000;
}

Zusammengefasst:

#text {
  font-family: 'Hoefler Text', Constantia, Palatino, 'Palatino Linotype', 
'Book Antiqua', Georgia, serif;
  font-size: 1.25em;
}
#gplus {
  position:absolute;
  top:-30px; 
  right:-240px;
  text-align: center;
  width: 500px;
  -webkit-transform:rotate(45deg);
     -moz-transform:rotate(45deg);
      -ms-transform:rotate(45deg);
       -o-transform:rotate(45deg);
          transform:rotate(45deg);
  z-index:5000;
  background-image: -webkit-linear-gradient(left, rgba(255,255,0,1), 
rgba(255,255,0,0)); 
     background-image: -moz-linear-gradient(left, rgba(255,255,0,1), 
rgba(255,255,0,0));
      background-image: -ms-linear-gradient(left, rgba(255,255,0,1), 
rgba(255,255,0,0));
       background-image: -o-linear-gradient(left, rgba(255,255,0,1), 
rgba(255,255,0,0));
          background-image: linear-gradient(left, rgba(255,255,0,1), 
rgba(255,255,0,0));
}
#gplus img{
   display: inline;
   vertical-align: middle;
   padding:0; 
   background:transparent; 
   border: none;
}

That's all! Das Ergebnis seht ihr oben - das Badge kann natürlich auch mit rotate(-45deg) nach links gedreht werden. Ob es wirklich Aufmerksamkeit erzeugt, weiß ich natürlich noch nicht, zumindest bin ich der erste, der ein Badge als Ribbon in den dynamischen Ansichten verbaut hat. Ist ja auch schon was :=).

Fragen, Kommentare

Wenn was unklar ist oder Fragen auftauchen, fragt einfach nach.