Social Media Tweet Share Me gusta Seguir Botones para Google Twitter y Facebook

.NET, Creación de Social Media Sharing botones con o sin JavaScript en C # y VB.NET

Otra forma - sin un montón de JavaScript

En mi sitio de blog original, había puesto algunos botones de uso compartido usando el código de abajo, sin embargo en nuestro nuevo sitio, parecía que estábamos siendo penalizados en la velocidad por falta de caché y la cantidad de Javascript. Ahora he enumerado ambas maneras de hacer la creación de estos botones, uno con JS y el otro en código puro detrás.

Como esto está relacionado con los medios de comunicación social, no dude en compartir esto! Esto era 100% a partir de 2015.

Con Javascript - La forma más antigua

Estos son tus botones similares / seguir.

HTML - Like

<a href="https://twitter.com/Claytabase" class="twitter-follow-button" data-show-count="data-show-count" data-lang="en" data-show-screen-name="false">Claytabase</a>

</div>

Otra forma - sin un montón de JavaScript

Y ahora para el HTML para los botones de uso compartido.

HTML - Share

</div>

<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>

</div>

</div>

</div>

<su:badge layout="1"></su:badge>

</div>

</div>

Otra forma - sin un montón de JavaScript

Y ahora el JavaScript

JavaScript

<script type="text/javascript">
    (function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js =d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
   fjs.parentNode.insertBefore(js, fjs);
} (document, 'script','facebook-jssdk'));
</script>

<script type="text/javascript">
    (function () {
        var po = document.createElement('script'); po.type = 'text/javascript';po.async = true;
       po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
</script>

<script type="text/javascript">
    !function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (!d.getElementById(id)) {
    js =d.createElement(s);
    js.id =id; js.src = "//platform.twitter.com/widgets.js";
   fjs.parentNode.insertBefore(js, fjs);
    }
} (document, "script","twitter-wjs");
</script>

<script type="text/javascript">
    (function () {
    var li = document.createElement('script'); li.type = 'text/javascript';li.async = true;
    li.src =('https:' == document.location.protocol ? 'https:' : 'http:')+ '//platform.stumbleupon.com/1/widgets.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
    })();
</script>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>


<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>

Otra forma - sin un montón de JavaScript

Si agrega el script al final de la página, se cargará el último, lo que le dará un tiempo de carga más rápido. Afortunadamente, los chicos de Facebook, Google y Twitter pensaron en el futuro y usan el mismo Javascript para los botones compartidos y similares.

VB

Dim u As String = Replace(Replace(Request.Url.ToString(), " ", "%20"),"http://", "")
If Right(u, 1) = "/" Then
u = Mid(u, 1, Len(u) - 1)
End If
fbShare.Attributes.Add("data-href",Request.Url.ToString())
Dim p1 As String = "//www.pinterest.com/pin/create/button/?url=http%3A%2F%2F"
Dim p2 As String = "%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&"
Dim pd As String = "description=Pin%20claytabase.com%20on%20Pinterest"
PinItButton.HRef = p1 + u + p2 + pd
Dim u As String = Replace(Replace(Request.Url.ToString(), " ", "%20"),"http://", "")

[]

Otra forma - sin un montón de JavaScript

Podemos traquetear a través de esto un poco más rápido ahora, a continuación está el HTML y CSS para los botones de compartir y seguir. ¿Por qué no echa un vistazo al siguiente enlace sobre cómo usar sprites de imágenes para CSS?

More: Crear desplazamiento de CSS

Follow

Otra forma - sin un montón de JavaScript

Y este es el código para actualizar los enlaces compartidos a la página correcta. También he añadido algunos JavaScript opcional que abrirá una pequeña ventana en clic.

VB

Dim DocDesc As String = "en"

Dim DocUrl As String = Request.Url.ToString()

ShareFacebook.HRef = String.Format("https://www.facebook.com/sharer/sharer.php?u={0}",DocUrl)

ShareTwitter.HRef = String.Format("http://twitter.com/share?url={0}&text={1}&via=claytabase",DocUrl, DocDesc)

ShareGoogle.HRef = String.Format("https://plusone.google.com/_/+1/confirm?hl={1}&url={0}",DocUrl, lg)

ShareLinkedIn.HRef = String.Format("http://www.linkedin.com/cws/share?url={0}&original_referer={0}&token=&isFramed=false&lang={1}",DocUrl, lg)

ShareStumble.HRef = String.Format("https://www.stumbleupon.com/submit?url={0}",DocUrl)

ShareEmail.HRef = String.Format("mailto:?subject=I wanted you to see thissite&body=Check out this site {0}", DocUrl)

SharePinit.HRef = String.Format("http://www.pinterest.com/pin/create/button/?url={0}&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&guid=XByRQbsL38y8-0&description={1}",DocUrl, DocDesc)

Social Media Share Buttons Optional Javascript

function popupwindow(url, title, w, h) {

var left = (screen.width / 2) - (w / 2);

var top = (screen.height / 2) - (h / 2);

return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no,menubar=no, copyhistory=no, width=' + w + ',height=' + h + ', top=' + top + ', left=' + left);

}

</script>

Otra forma - sin un montón de JavaScript

Utilícelo para asegurarse de que cuando se comparten elementos, la imagen que quiero mostrar aparece primero.

Social Media Share Buttons Optional Meta Tags

Otra forma - sin un montón de JavaScript

Como dije antes, por favor comparta esto si lo encuentra útil, y para ver cómo funcionan cada uno de los botones!