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
https://developers.facebook.com/docs/plugins/share-button/

More information about open graph tags:
https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content

Add this to your HTML Tag:
<html xmlns:fb="http://ogp.me/ns/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="http://www.myurl.com/" />
    <meta property="og:image" content="http://www.myurl.com/images/someimage.png" />
    <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>
<script>
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>
<!-- End Facebook Button Javascript -->

Here is the actual button:
<fb:share-button href="http://www.myurl.com" type="button_count"></fb:share-button>

Create an official Twitter share button

https://about.twitter.com/resources/buttons#tweet

Create an official YouTube Subscribe button

https://developers.google.com/youtube/youtube_subscribe_button

Create buttons for Pinterest, Google Plus, and Linked In

http://www.sharelinkgenerator.com/