Web design and hosting, database, cloud and social media solutions that deliver business results
  • Solução de negócio
    • Automação Robótica de Processos
    • Programas
    • Serviços de banco de dados
      • Relatórios
      • Integração de dados
    • Design de Websites
      • Design de logotipo
      • Gateways de pagamento
      • Localização e Tradução Web
      • Otimização de sites
      • Segurança do site
      • Ferramentas Técnicas
    • Serviços Empresariais
      • Amazon Web Services
      • Serviços do Google Cloud
      • Microsoft Azure
    • Microsoft Office
    • Mídia Social
  • Sobre
    • Carreiras
      • Tradutor Inglês-Espanhol
      • Tradutor Inglês-Turco
      • Tradutor Inglês-Japonês
      • Tradutor Inglês-Português
    • Equipe
      • Adrian Anandan
      • Ali Al Amine
      • Ayse Hur
      • Chester Copperpot
      • Gavin Clayton
      • Sai Gangu
      • Suneel Kumar
      • Surya Mukkamala
    • Portfolio
čeština (CS)Deutsch (DE)English (EN-GB)English (EN-US)Español (ES)Français (FR)हिंदी (HI)italiano (IT)日本語 (JA)polski (PL)Português (PT)русский (RU)Türk (TR)中国的 (ZH)

Social Media Tweet Compartilhar Curtir Botões Seguir para Google Twitter e Facebook

.NET, Criando botões de compartilhamento de mídia social com ou sem Javascript em C# e VB.NET

Outra maneira - sem muito JavaScript

No meu blog original, eu coloquei alguns botões de compartilhamento usando o código abaixo, porém em nosso novo site, parecia que estávamos sendo penalizados na velocidade por falta de cache e quantidade de Javascript. Agora listei as duas maneiras de criar esses botões, uma com JS e a outra em código puro.

Como isso está relacionado às mídias sociais, sinta-se à vontade para compartilhar! Isso era 100% em 2015.

  • Twitter
  • Facebook
  • Google
  • LinkedIn

Com Javascript - A maneira mais antiga

Estes são seus botões curtir/seguir.

HTML - Like

<div id="SocialMedia" style="clear:both;"><div style="float:left;display:block;padding:2px;"><div class="fb-like" data-href="https://www.facebook.com/Claytabase" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div></div><div style="float:left;display:block;padding:2px;"><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></div>

Example

Outra maneira - sem muito JavaScript

E agora para o HTML para os botões de compartilhamento.

Nota: StumbleUpon não funciona em https...

HTML - Share

<div id="Share" style="clear:both;"><div style="float: left;display:block;padding:2px;">    <div id="fbShare" runat="server" clientidmode="Static" class="fb-share-button" data-type="button_count"></div></div><div style="float: left;display:block;padding:2px;">    <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a></div><div style="float: left;display:block;padding:2px;">    <div class="g-plus" data-action="share" data-annotation="bubble" align="left"></div></div><div style="float: left;display:block;padding:2px;">    <script type="IN/Share" data-counter="right" data-showZero="true"></script></div><div style="float: left;display:block;padding:2px;">    <su:badge layout="1"></su:badge></div><div style="float: left;display:block;padding:2px;">    <a id="PinItButton" runat="server" href="//www.pinterest.com/pin/create/button/?media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg" data-pin-do="buttonPin" data-pin-config="beside"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png"/></a></div></div>

Example

inShare2

Outra maneira - sem muito JavaScript

E agora o JavaScript

JavaScript

<!--Facebook Share andFollow--><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>"<!--Google +1 and Follow--><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><!--Twitter Share--><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>"<!--StumbleUpon andPinterest--><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><!--Linked In Share-->
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>

Outra maneira - sem muito JavaScript

Se você adicionar o script na parte inferior da página, ele será carregado por último, proporcionando um tempo de carregamento mais rápido. Felizmente, os caras do Facebook, Google e Twitter pensaram à frente e usaram o mesmo Javascript para os botões de compartilhamento e curtida.

LoaderVBC#

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 IffbShare.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 + pdDim u As String = Replace(Replace(Request.Url.ToString(), "", "%20"),"http://", "")

C#

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

Outra maneira - sem muito JavaScript

Podemos fazer isso um pouco mais rápido agora, abaixo está o HTML e CSS para os botões compartilhar e seguir. Por que não conferir o link abaixo sobre como usar sprites de imagem para CSS?

Mais: Criar CSS de rolagem
LoaderFollowShare

Follow

<div id="FollowBut" runat="server" clientidmode="Static" style="position:relative;width:64px;height:32px;float:right;">    <img src="https://www.claytabase.co.uk/System/Artwork/Social/Follow.png" alt="share" style="width:64px;height:32px;float:left;" />    <div id="FollowDiv" style="width:64px;position:absolute;top:0px;right:100%;">    <a id="LikeFacebook" href="https://www.facebook.com/pages/Claytabase-Ltd/181461242059518" target="_blank" title="Facebook"style="width:64px;float:left;">    <img src="https://www.claytabase.co.uk/System/Artwork/Social/Facebook.png" alt="Facebook" style="width: 64px; border-radius: 4px;"/></a>    <a id="LikeTwitter" href="https://twitter.com/claytabase" target="_blank" title="Twitter" style="width: 64px; float: left;">    <img src="https://www.claytabase.co.uk/System/Artwork/Social/Twitter.png" alt="Twitter" style="width: 64px; border-radius:4px;"/></a>    <a id="LikeGoogle" href="https://plus.google.com/+ClaytabaseCoUk" target="_blank" title="Google"style="width: 64px;float: left;">    <img src="https://www.claytabase.co.uk/System/Artwork/Social/Google.png" alt="Google" style="width: 64px; border-radius:4px;"/></a>    </div></div>

Share

<div id="ShareBut" runat="server" clientidmode="Static" style="position: relative; width: 64px; height: 32px; float: right;">    <img src="https://www.claytabase.co.uk/System/Artwork/Social/Social.png"alt="share"style="width: 64px; height: 32px; float: left;" />    <div id="ShareDiv"style="width: 64px; position: absolute; top: 0px; left: 64px; float: right;">    <a id="ShareFacebook"runat="server"href=""target="_blank"style="float: left;"    onclick="popupwindow(this.href,'',500,400);returnfalse;">        <img src="https://www.claytabase.co.uk/System/Artwork/Social/Facebook.png"alt="Facebook"style="width: 64px; border-radius:4px;"/>    </a>    <a id="ShareTwitter"runat="server"href=""target="_blank"style="float: left;"    onclick="popupwindow(this.href,'',400,400);returnfalse;">        <img src="https://www.claytabase.co.uk/System/Artwork/Social/Twitter.png"alt="Twitter"style="width: 64px; border-radius:4px;"/>    </a>    <a id="ShareGoogle"runat="server"href=""target="_blank"style="float: left;"    onclick="popupwindow(this.href,'',500,600);returnfalse;">        <img src="https://www.claytabase.co.uk/System/Artwork/Social/Google.png"alt="Google+"style="width: 64px; border-radius:4px;"/>    </a>    <a id="ShareLinkedIn"runat="server"href=""target="_blank"style="float: left;"    onclick="popupwindow(this.href,'',500,500);returnfalse;">        <img src="https://www.claytabase.co.uk/System/Artwork/Social/LinkedIn.png"alt="LinkedIn"style="width: 64px; border-radius:4px;"/>    </a>    <a id="ShareStumble"runat="server"href=""target="_blank"style="float: left;"    onclick="popupwindow(this.href,'',800,700);returnfalse;">        <img src="https://www.claytabase.co.uk/System/Artwork/Social/StumbleUpon.png"alt="StumbleUpon"style="width: 64px; border-radius:4px;"/>    </a>    <a id="SharePinit"runat="server"href=""target="_blank"style="float: left;"    onclick="popupwindow(this.href,'',800,700);returnfalse;">        <img src="https://www.claytabase.co.uk/System/Artwork/Social/Pinit.png"alt="StumbleUpon"style="width: 64px; border-radius:4px;"/>    </a>    <a id="ShareEmail"runat="server"href=""title="Email"style="float: left;">        <img src="https://www.claytabase.co.uk/System/Artwork/Social/Email.png"alt="Email"style="width: 64px; border-radius:4px;"/>    </a>    </div></div>

Outra maneira - sem muito JavaScript

E este é o código para atualizar os links de compartilhamento para a página correta. Eu também adicionei algum JavaScript opcional que abrirá uma pequena janela ao clicar.

LoaderVBC#

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&amp;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)

C#

string DocDesc = "en";string DocUrl = 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&amp;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

<script type="text/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>

Outra maneira - sem muito JavaScript

Use-os para garantir que, quando os itens forem compartilhados, a imagem que quero exibir apareça primeiro.

Social Media Share Buttons Optional Meta Tags

<meta property="og:image" content="https://www.claytabase.co.uk/Image/ClaytabaseWhiteOnNavy.png"/><meta property="og:site_name" content="Claytabase Ltd"/><link rel="publisher" href=”https://plus.google.com/+ClaytabaseCoUk"/><meta itemprop="image" content="https://www.claytabase.co.uk/Image/ClaytabaseWhiteOnNavy.png"/><meta name="twitter:image:src" content="https://www.claytabase.co.uk/Image/ClaytabaseWhiteOnNavy.png"/><!--<h1>Place this directly belowyour Header 1 Tag, facebook looks for this</h1>--><meta property="og:image" content="https://www.claytabase.co.uk/Image/ClaytabaseWhiteOnNavy.png"/>

Outra maneira - sem muito JavaScript

Como eu disse antes, compartilhe isso se achar útil e para ver como cada um dos botões funciona!


Autor

Helpful?

Please note, this commenting system is still in final testing.

Design do site por Claytabase

Esta é uma seção de código que foi modificada do código do Ousia Content Management System, um dos sistemas mais rápidos e otimizados do mercado, parte de nossos serviços de design de sites.

Estes estão disponíveis com sites a partir de cerca de £ 500.

mais: Responsivo e rápido. Desenvolvimento Web, Design e Hospedagem com Sistema de Gerenciamento de Conteúdo
Copyright Claytabase Ltd 2020

Registered in England and Wales 08985867

RSSLoginLink Política de CookiesSitemap

Social Media

facebook.com/Claytabaseinstagram.com/claytabase/twitter.com/Claytabaselinkedin.com/company/claytabase-ltd

Get in Touch

+442392064871info@claytabase.comClaytabase Ltd, Unit 3d, Rink Road Industrial Estate, PO33 2LT, United Kingdom
As configurações neste site são definidas para permitir todos os cookies. Estes podem ser alterados em nossa página de configurações e políticas de cookie. Ao continuar a usar este site, você concorda com o uso de cookies.
Ousia Logo
Logout
Ousia CMS Loader