Put social media buttons on the site

Question

Put social media buttons on the site

Navigation

#1 by (2 votes)
#2 by (2 votes)

2

I'm "joking" with SPA MVC (C #) and would like to know how I put social media buttons on my site. I looked for some examples here on the site and by my query, I did not find anything that suited me. Another thing is that the examples I get on the net have always been pointing to other sites. I would like to do things, but without pointing to external environments, because some places do not allow this and it is a security flaw, like the one below:

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><ahref="http://twitter.com/share" class="twitter-share-button" data-url="www.devmedia.com.br" data-text="Teste" data-count="horizontal" data-via="aqui-seu-nome-de-usuario-do-twitter" data-lang="pt">twitter</a>

c# single-page-application asp.net-mvc

asked by anonymous 16.05.2017 / 18:02

2 answers

Shadow / border effect in box Array associative State and City Combobox in Javascript

score 2 · Answer 1

Modern browsers have restrictions when downloading JS files from other sources. You can save the file in your solution and use it this way:

<script type="text/javascript" src="@Url.Content("~/Scripts/widgets.js")"></script>   
<a href="http://twitter.com/share" class="twitter-share-button" data-url="www.devmedia.com.br" data-text="Teste" data-count="horizontal" data-via="aqui-seu-nome-de-usuario-do-twitter" data-lang="pt">twitter</a>

score 2 · Answer 2

Here's an example using Awesome Font and Bootstrap Social :

<p>
    Exemplo 1:
    <a class="btn btn-social-icon btn-twitter"><span class="fa fa-twitter"></span></a>
    <a class="btn btn-social-icon btn-facebook"><span class="fa fa-facebook"></span></a>
</p>

<p>
    Exemplo 2:
    <div class="col-sm-4 social-buttons">
        <a class="btn btn-block btn-social btn-github" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-github']);">
        <span class="fa fa-github"></span> Exemplo GitHub</a>

        <a class="btn btn-block btn-social btn-linkedin" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-linkedin']);">
        <span class="fa fa-linkedin"></span> Exemplo LinkedIn</a>
    </div>
</p>

See working on Fiddle.

In ASP.NET MVC

Remember that it is best to download the required CSS and JS source. The ones I used are in Fiddle and you can copy from there if you want.

In your project ASP.NET MVC you can call them in Bundle like this:

bundles.Add(new StyleBundle("~/Content/css").Include(
      "~/Content/bootstrap.css",
      "~/Content/bootstrap-social.css",
      "~/Content/font-awesome.min.css"));

In your View , just call this (in head of HTML preferably):

@Styles.Render("~/Content/css")