Thursday, February 27, 2014

Creating Official Facebook, Twitter, and YouTube Share Buttons

With a little bit of Javascript, HTML, and Meta Tags it is quite easy to create the official buttons for Facebook, Twitter, and YouTube.

Create an official Facebook Share this button:

Generate a share button

More information about open graph tags:

Add this to your HTML Tag:
<html xmlns:fb="">

Add these meta tags in between the <head> </head>:
<!-- Begin Facebook Meta Tags -->
    <meta property="og:title" content="My Page Title" />
    <meta property="og:url" content="" />
    <meta property="og:image" content="" />
    <meta property="og:description" content="This is a description" />
<!-- End Facebook Meta Tags -->

Add this Javascript after the body:
<!-- Begin Facebook Button Javascript -->
<div id="fb-root"></div>
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); = id;
        js.src = "//";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
<!-- End Facebook Button Javascript -->

Here is the actual button:
<fb:share-button href="" type="button_count"></fb:share-button>

Create an official Twitter share button

Create an official YouTube Subscribe button

Create buttons for Pinterest, Google Plus, and Linked In