Putting social media buttons on the site

Asked

Viewed 437 times

2

I am "playing" with the SPA MVC(C#) and would like to know how I put the social media buttons on my site. I looked for some examples here on the site and by my query, I found nothing that satisfied me. Another thing is that the examples I get on the net, always come 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, as this below:

<script type="text/javascript" src="http://platform.twitter.com/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>
c# asp.net-mvc single-page-application

  • Could you be clearer in your question? Do you want the buttons of what action? Which social network? What you meant by "I’d like to do things, but without pointing to outside environments, because some places don’t allow it and it’s a security breach"?

  • @Randrade, is put those access buttons to Facebook, Twitter and etc.

2 answers

2

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>

2

Follow an example using Fonte Awesome 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 the ideal is to download the CSS and JS needed. 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 on Bundle thus:

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

In his View, just call it that (no head of HTML preferably): 

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

  • George, I don’t know what’s wrong, but it didn’t work for me. In Bundlesconfig, I put the lines to compile the Bundles. In the _Layout.cshtml View, I put the paragraphs above and the Style.Render that already existed. And it wasn’t

  • @pnet You got the files CSS and put in its Content directory of the project?

  • yes, I did that. I was only able to copy like this, I opened everything, copied and then I opened Notepad++ and pasted and saved with the same name. There was no option to download directly from the site(fiddle)

  • That way it works, as long as it saves as CSS no problem. But note that you can also use the Nuget to download these packages, it is more recommended (in it you will have all the dependencies). When running your project use the F12 to see if it is giving error to render some script.

  • I when I return, I will test again. Thanks in advance.

Browser other questions tagged c# asp.net-mvc single-page-application

You are not signed in. Login or sign up in order to post.