Custom Sharing Buttons for Facebook and Twitter
Everyone loves adding sharing buttons to their site, but sometimes the default buttons can stand out like a sore thumb when they don’t fit into your brand’s image. Here is a really easy how-to on adding sharing capabilities on any style of button!
Facebook crawls your site and scrapes and caches the metadata from the URL. Note that the crawler has to see an the og:image at least once before it can be rendered, and thus, the first person who shares a piece of content won’t see an image 😱. To avoid this, run your URL through the URL debugger to pre-fetch metadata for the page: https://developers.facebook.com/tools/debug/. This is also a great tool to see what Facebook actually captures from your site when it is shared and catch any errors.
Ideally, the size of your og:image should be 1200 x 630 pixels for the best display on high resolution devices. 200 x 200 pixels is the minimum size a photo can be without error.
Here’s the code. Put the below in your <head>:
<meta property="og:title" content="site title" />
<meta property="og:site_name" content="content here"/>
<meta property="og:description" content="Description of site that entices users to click" />
<meta property="og:type" content="article" />
<meta property="article:author" content="https://www.facebook.com/authorname" />
<meta property="article:publisher" content="https://www.facebook.com/" />
Next, point your custom sharing button’s <a> to the below url, replacing the u=”with your url” and then title=”with a title for the share”.
Personally, I like having my sharing button open in a new, smaller window rather then a tab since it’s more clear for the user what is expected from this button. You can customize the size of the new window by editing the ‘width=__’ and ‘height=__’ in the onclick event.
<a href="http://www.facebook.com/share.php?u=http://yourUrlHere.com&title=your title here" target="_blank" onclick="window.open(this.href,'window','width=640,height=480,resizable,scrollbars') ;return false;">Facebook Button!</a>
Sharing on twitter uses twitter cards. There are many different types of cards available, depending on the content that you want to appear on the card. You can learn more about the different twitter card types and how to use them here. For this example, I am going to use the summary card with large image.
Firstly, we’ll add in our meta tags to the <head> of our site. This populates the twitter card. Again, you can check what is being rendered from your meta tags with the twitter card validator here: https://cards-dev.twitter.com/validator.
<meta name="twitter:card" content="summary_large_image(which twitter card are you using?)"/>
<meta name="twitter:creator" content="@username of content creator">
<meta name="twitter:title" content="title of site">
<meta name="twitter:description" content="Description of content (maximum 200 characters)">
<meta name="twitter:image:src" content=”path/to/image/">
Now comes the exciting part, customizing the auto-fill of the tweet! Point your custom sharing button’s <a> to the below url, and replace status=”with your tweet”. Don’t forget to use ‘%20’ for spaces.
Again, I like when my sharing buttons open in a new, smaller window rather then a tab, so that’s in the below code as well.
<a href="https://twitter.com/intent/tweet?status=Enter%20your%20tweet%20here%" target="_blank" onclick="window.open(this.href,'window','width=640,height=480,resizable,scrollbars') ;return false;">Twitter Button!</a>
And there you have it! Put anything inside those <a> tags and keep your sharing buttons on brand and on point.