Adding Social Buttons to Your Website's Design

Does your website need more online visibility? A good idea to make it more visible online is to have your own website engage with social networking website partners as many as possible. You can create social networking accounts like Facebook, Twitter, and Google+ to reach more of your website audiences. And create social buttons and associate it on your website's design. But how? To add social media buttons to your website design is simple. Just follow the steps below on how to add Facebook, Twitter and Google+ Buttons:

Steps in Adding a social button to your website's design.

1. Adding Facebook Button:
Steps:
a. Log on to your Facebook Account using a web browser.
b. Open a new tab and type in https://developers.facebook.com/docs/plugins/like-button/
c. After that, put in a url to like. Set width of the button to 80px to 100px. And choose a layout preference. See picture below to visualize how this one look like:

d. click on get a code. You will be given several options from HTML5 to URL format. Among the formats select <iframe>. The code will look like these:

e. Once you obtain this, go to your website's dashboard and add a text widget that can read html formats whether you have Wordpress or Blogger platform. Then add the code generated on the widget. You can place the widget either on the side bar or footer of your website's layout.

2. Adding Twitter Button
Steps:
a. Go to this link:  https://dev.twitter.com/docs/tweet-button.
b. You'll be given various of layouts to choose from. Among the rest select the button as what you can see on the image below:

c. Copy that on a notepad. Change the data URL to your website's URL. Omit data-via leaving URL and data lang:
e.g.
<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://gainwebsite.com" data-lang="en">Tweet</a>

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

d. Copy the code and insert it right after the Facebook code you added on the text widget.

3. Adding Google Plus Button
Steps:
a. Go to this link: https://developers.google.com/+/web/+1button/
b. Once you access the URL you can see these options:

c. Among the rest of the options select medium, bubble type annotation, language set to English (US) then click advanced options put in the URL of your website to +1.

d. Get the code you can see on the right side box:
e.g.
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium" data-href="http://gainwebsite.com"></div>

<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

e. Add this code right after the twitter code you place on your site's text widget.

Once you have all the codes on the text widget you can save it and check your website's appearance. The buttons will then appear and will look like this:

It's very simple, right? So, add more social media buttons to your website to gain more audiences.


Hope this tutorial can help you gain more customers.

Please like us on Facebook: Gain Website Facebook Page.
Follow us on Twitter:Gain Website Twitter
Follow us on Google +: Gain Website Google Plus
Follow us on Pinterest: Gain Website Pinterest Boards and Pins