diff --git a/examples/anchored-elements.html b/examples/anchored-elements.html
index 2f7cbc57f2..2c76782c3e 100644
--- a/examples/anchored-elements.html
+++ b/examples/anchored-elements.html
@@ -71,8 +71,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -109,6 +111,7 @@
     </div>
 
     <script src="loader.js?id=anchored-elements" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/animation.html b/examples/animation.html
index e346fd9310..3de1bea818 100644
--- a/examples/animation.html
+++ b/examples/animation.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -55,6 +57,7 @@
     </div>
 
     <script src="loader.js?id=animation" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/bind-input.html b/examples/bind-input.html
index 2323fa3225..ea52757eb9 100644
--- a/examples/bind-input.html
+++ b/examples/bind-input.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -79,6 +81,7 @@
     </div>
 
     <script src="loader.js?id=bind-input" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/bing-maps.html b/examples/bing-maps.html
index b4c20e3071..c3498e7d08 100644
--- a/examples/bing-maps.html
+++ b/examples/bing-maps.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -54,6 +56,7 @@
 
     <script src="jquery.min.js" type="text/javascript"></script>
     <script src="loader.js?id=bing-maps" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/brightness-contrast.html b/examples/brightness-contrast.html
index 503a48ee27..5434bca1c1 100644
--- a/examples/brightness-contrast.html
+++ b/examples/brightness-contrast.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -57,6 +59,7 @@
     </div>
 
     <script src="loader.js?id=brightness-contrast" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/canvas-tiles.html b/examples/canvas-tiles.html
index 388b70a0f4..703b61d318 100644
--- a/examples/canvas-tiles.html
+++ b/examples/canvas-tiles.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -47,6 +49,7 @@
     </div>
 
     <script src="loader.js?id=canvas-tiles" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/epsg-4326.html b/examples/epsg-4326.html
index a845d8f468..d78c20b3ed 100644
--- a/examples/epsg-4326.html
+++ b/examples/epsg-4326.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -47,6 +49,7 @@
     </div>
 
     <script src="loader.js?id=epsg-4326" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/example-list.html b/examples/example-list.html
index 6c34d08113..ff9cc49aba 100644
--- a/examples/example-list.html
+++ b/examples/example-list.html
@@ -180,8 +180,10 @@
             <span id="count"></span>
           </form>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -207,5 +209,7 @@
 
     </div>
 
+    <script src="social-links.js" type="text/javascript"></script>
+
   </body>
 </html>
diff --git a/examples/examples.css b/examples/examples.css
index 23514a529a..dbcb03f621 100644
--- a/examples/examples.css
+++ b/examples/examples.css
@@ -13,3 +13,8 @@ body {
 #tags {
   display: none;
 }
+
+/* padding for social links to match bootstrap nav links */
+.nav>li>.twitter-share-button, .nav>li>.g-plusone-wrapper, .nav>li>.github-watch-button {
+  padding: 10px 10px 0px;
+}
diff --git a/examples/export-jpeg.html b/examples/export-jpeg.html
index cd7b4a4ec3..aacb2ecf7d 100644
--- a/examples/export-jpeg.html
+++ b/examples/export-jpeg.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -48,6 +50,7 @@
     </div>
 
     <script src="loader.js?id=export-jpeg" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/geolocation.html b/examples/geolocation.html
index 258f0250e4..a1da7bea06 100644
--- a/examples/geolocation.html
+++ b/examples/geolocation.html
@@ -22,8 +22,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -56,6 +58,7 @@
     <script src="jquery.min.js" type="text/javascript"></script>
     <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
     <script src="loader.js?id=geolocation" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/hue-saturation.html b/examples/hue-saturation.html
index daf15a3013..bee40e14c5 100644
--- a/examples/hue-saturation.html
+++ b/examples/hue-saturation.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -57,6 +59,7 @@
     </div>
 
     <script src="loader.js?id=hue-saturation" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/mapquest.html b/examples/mapquest.html
index abc7b5057b..d4fedb9b2b 100644
--- a/examples/mapquest.html
+++ b/examples/mapquest.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -47,6 +49,7 @@
     </div>
 
     <script src="loader.js?id=mapquest" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/mouse-position.html b/examples/mouse-position.html
index 9412d00c99..aca8a6575a 100644
--- a/examples/mouse-position.html
+++ b/examples/mouse-position.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -48,6 +50,7 @@
     </div>
 
     <script src="loader.js?id=mouse-position" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/rotation.html b/examples/rotation.html
index 004b0d3045..1f1eec6da4 100644
--- a/examples/rotation.html
+++ b/examples/rotation.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -47,6 +49,7 @@
     </div>
 
     <script src="loader.js?id=rotation" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/scale-line.html b/examples/scale-line.html
index 54d9d6cd42..62b62d3a45 100644
--- a/examples/scale-line.html
+++ b/examples/scale-line.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -47,6 +49,7 @@
     </div>
 
     <script src="loader.js?id=scale-line" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/semi-transparent-layer.html b/examples/semi-transparent-layer.html
index a70a848f59..6b619fddd1 100644
--- a/examples/semi-transparent-layer.html
+++ b/examples/semi-transparent-layer.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -47,6 +49,7 @@
     </div>
 
     <script src="loader.js?id=semi-transparent-layer" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/side-by-side.html b/examples/side-by-side.html
index c7544898ae..5dd9223d0e 100644
--- a/examples/side-by-side.html
+++ b/examples/side-by-side.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -72,6 +74,7 @@
     </div>
 
     <script src="loader.js?id=side-by-side" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/simple.html b/examples/simple.html
index af7a848f46..9a349b3224 100644
--- a/examples/simple.html
+++ b/examples/simple.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -47,6 +49,7 @@
     </div>
 
     <script src="loader.js?id=simple" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/social-links.js b/examples/social-links.js
new file mode 100644
index 0000000000..452e73a5ec
--- /dev/null
+++ b/examples/social-links.js
@@ -0,0 +1,22 @@
+
+
+// add tweet buttons (adapated from https://twitter.com/about/resources/buttons)
+(function() {
+  var self = document.getElementsByTagName('script')[0];
+  var script = document.createElement('script');
+  script.type = 'text/javascript';
+  script.async = true;
+  script.src = '//platform.twitter.com/widgets.js';
+  self.parentNode.insertBefore(script, self);
+})();
+
+
+// add g+1 buttons (adapted from https://developers.google.com/+/web/+1button)
+(function() {
+  var self = document.getElementsByTagName('script')[0];
+  var script = document.createElement('script');
+  script.type = 'text/javascript';
+  script.async = true;
+  script.src = 'https://apis.google.com/js/plusone.js';
+  self.parentNode.insertBefore(script, self);
+})();
diff --git a/examples/stamen.html b/examples/stamen.html
index 930c971209..7afe45e4f5 100644
--- a/examples/stamen.html
+++ b/examples/stamen.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -47,6 +49,7 @@
     </div>
 
     <script src="loader.js?id=stamen" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/style-rules.html b/examples/style-rules.html
index 7a0859f3ba..fe787c8c99 100644
--- a/examples/style-rules.html
+++ b/examples/style-rules.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -47,6 +49,7 @@
     </div>
 
     <script src="loader.js?id=style-rules" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/tilejson.html b/examples/tilejson.html
index 4e05014695..5720fe5517 100644
--- a/examples/tilejson.html
+++ b/examples/tilejson.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -47,6 +49,7 @@
     </div>
 
     <script src="loader.js?id=tilejson" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/vector-layer.html b/examples/vector-layer.html
index 9ec61c5232..9507bdd5d4 100644
--- a/examples/vector-layer.html
+++ b/examples/vector-layer.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -47,6 +49,7 @@
     </div>
 
     <script src="loader.js?id=vector-layer" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/wms-capabilities.html b/examples/wms-capabilities.html
index a9e88d2f27..129a79759c 100644
--- a/examples/wms-capabilities.html
+++ b/examples/wms-capabilities.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -45,6 +47,7 @@
     </div>
 
     <script src="loader.js?id=wms-capabilities" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/wms-custom-proj.html b/examples/wms-custom-proj.html
index 7e130944d2..6f8bebbbe1 100644
--- a/examples/wms-custom-proj.html
+++ b/examples/wms-custom-proj.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -49,6 +51,7 @@
     <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/proj4js-compressed.js" type="text/javascript"></script>
     <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/defs/EPSG21781.js" type="text/javascript"></script>
     <script src="loader.js?id=wms-custom-proj" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/wms-single-image-custom-proj.html b/examples/wms-single-image-custom-proj.html
index c9e9048c6e..59eb495572 100644
--- a/examples/wms-single-image-custom-proj.html
+++ b/examples/wms-single-image-custom-proj.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -49,6 +51,7 @@
     <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/proj4js-compressed.js" type="text/javascript"></script>
     <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/defs/EPSG21781.js" type="text/javascript"></script>
     <script src="loader.js?id=wms-single-image-custom-proj" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/wms-single-image.html b/examples/wms-single-image.html
index 6014aa59bf..9c2aec69e1 100644
--- a/examples/wms-single-image.html
+++ b/examples/wms-single-image.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -47,6 +49,7 @@
     </div>
 
     <script src="loader.js?id=wms-single-image" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/wms-tiled.html b/examples/wms-tiled.html
index 04dc1c40c3..d8fe63ab32 100644
--- a/examples/wms-tiled.html
+++ b/examples/wms-tiled.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -47,6 +49,7 @@
     </div>
 
     <script src="loader.js?id=wms-tiled" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/wmts-from-capabilities.html b/examples/wmts-from-capabilities.html
index 5d090fff56..0952265356 100644
--- a/examples/wmts-from-capabilities.html
+++ b/examples/wmts-from-capabilities.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -49,6 +51,7 @@
     <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/proj4js-compressed.js" type="text/javascript"></script>
     <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/defs/EPSG21781.js" type="text/javascript"></script>
     <script src="loader.js?id=wmts-from-capabilities" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/wmts.html b/examples/wmts.html
index 07d0f69eda..00e0bebf2e 100644
--- a/examples/wmts.html
+++ b/examples/wmts.html
@@ -16,8 +16,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -47,6 +49,7 @@
     </div>
 
     <script src="loader.js?id=wmts" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
 
   </body>
 </html>
diff --git a/examples/zoomslider.html b/examples/zoomslider.html
index 437c5812b3..66531e66a6 100644
--- a/examples/zoomslider.html
+++ b/examples/zoomslider.html
@@ -68,8 +68,10 @@
         <div class="container">
           <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
           <ul class="nav pull-right">
-            <li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
-            <li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
           </ul>
         </div>
       </div>
@@ -111,5 +113,8 @@
     </div>
 
     <script src="loader.js?id=zoomslider" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
+
   </body>
-</html>
\ No newline at end of file
+
+</html>