How to add facebook twitter google plus share button in ASP.Net MVC 4




In this tutorial we will show you how to add facebook twitter google plus share button in ASP.Net MVC 4. A website with a social media it will guaranteed boost your traffic so you should add now if your website don’t have any.
Tools Used
1. Microsoft Visual Studio 2012
2. Facebook developer page
3. Twitter
4. Gooogle+ developer page

How to add facebook twitter google plus share button in ASP.Net MVC 4

Facebook share button
Let’s start with facebook share button first
1. You need to have a facebook application id before you could proceed with the javascript. So please log in to your facebook account and go to developer page . From the top menu click Apps > +Create New App like image below.
How to add google+, facebook, twitter share button in ASP.Net MVC 4

  1. A dialog box will appear like below and you need to enter application name and namespace. After click continue just fill up the catcha for security check.
    How to add google+, facebook, twitter share button in ASP.Net MVC 4

  2. This is an optional step. The next screen you see will be this, and this is some information I’ve entered for this new apps id. How to add google+, facebook, twitter share button in ASP.Net MVC 4.

  3. Now, Go to social plug in page. and key in URL you like to share and width of the share button like image below.
    How to add google+, facebook, twitter share button in ASP.Net MVC 4.

  4. Get the code and the javascript will look like this

and another piece of javascript is for you to place wherever you want the plugin to appear on your page.

We keep this script aside first and will cover in the later step.

Twitter Share Button
1. Twitter will be much easier to start, you just go to this page and fill in all necessary information like below image
How to add google+, facebook, twitter share button in ASP.Net MVC 4.
2. Get the code, and the javascript code will look like this

Note: As at today, i’m not sure why there is no box count vertical on the twitter website, so i’ve add remove the attribute and add this attribute data-count="vertical" to make it look vertical.

Google+ Share Button
1. Google+ share button also easy to start, you just go to this page and fill in all necessary information like below image
How to add google+, facebook, twitter share button in ASP.Net MVC 4.
Note: Something not right on the “Advanced Option”, you need to use “tab” to move to next field or else you can’t see the rest of fields.

  1. Get the code, and the javascript code will look like this

Integrate Facebook, Twitter, Google+ Button into ASP.Net MVC 4

  1. Create a MVC Project and named it SocialShare, in case you need guide, you could refer to Here.
  2. In Views > Shared > _Layout.chtml, add this code we get from facebook in step 5. and the code will look like this

  1. Go to Home > Index.chtml , and place all other javascript code that we get from facebook, twitter and Gooogle +.

  1. Press F5 and you should see this in browser
    How to add google+, facebook, twitter share button in ASP.Net MVC 4

Summary
It’s not difficult to put the social button into your website and you should add this as it helps to increase your website traffic.