You want to have your social network like/share button but customized? Very simple.
Here is the html for above buttons.
Make sure you set there title, description, image and link for all social network actions. Everything is within the <a> tag
I am using Bootstrap version 3.2.0 as of writing this blog.
First lets take a look at Facebook button.
Place following Facebook code snippet on your page right after the starting <body> tag.
Next place following at the end of your html file within <script> tag
Which means on clicking any link with class btn-facebook makes via javascript click event and fires event to FB feed method.
Next one is implementing Twitter tweet button
Place Twitter widgets.js reference somewhere in your <head> tag
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
After that copy at the end of your HTML file, same place where you copied FB code the following code:
twttr.events.bind('tweet', function (event) {});
Third one is replacing Google Plus One button image with own text
Copy to the <head> section following google javascript
<script src="//apis.google.com/js/platform.js" async defer></script>
As you see in the Google +1 anchor, there is a function gPlus on click. Here is the code for that, copy it in same place where you copied the FB and Twitter
Lastly is the Pinterest Pin It button
Place the following snippet after the starting <body> tag where you placed Facebook snippet
And the code to launch Pin It popup when clicking on Pinterest link is the following
Make sure to place it in same place where you have placed your Facebook, Twitter and Google Plus One code.
