{"id":134,"date":"2014-05-21T21:08:01","date_gmt":"2014-05-21T15:08:01","guid":{"rendered":"http:\/\/promincproductions.com\/blog\/?p=134"},"modified":"2014-06-01T09:34:36","modified_gmt":"2014-06-01T03:34:36","slug":"facebook-custom-icon-share-button","status":"publish","type":"post","link":"https:\/\/promincproductions.com\/blog\/facebook-custom-icon-share-button\/","title":{"rendered":"Facebook &#8211; Custom icon for share button"},"content":{"rendered":"<figure id=\"attachment_140\" aria-describedby=\"caption-attachment-140\" style=\"width: 124px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"size-full wp-image-140\" src=\"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/05\/FB-Share-04.png\" alt=\"Why is it so hard to add an icon like this and get the Facebook share functionality?\" width=\"124\" height=\"54\" \/><figcaption id=\"caption-attachment-140\" class=\"wp-caption-text\">Why is it so hard to add an icon like this and get the Facebook share functionality?<\/figcaption><\/figure>\n<p>I&#8217;m not a fan of the stock Facebook social tools &#8211; they are slow to load, are a hideous design \/ look and never match the sites design. \u00a0I know Facebook is trying to maintain their branding, but seriously? \u00a0How many people have found ways around your code and custom built what they want? \u00a0Let the grips go a bit Facebook. \u00a0Even stupider, is their default tools for generating a sharing button for your site is some rather\u00a0<em>bullet proof<\/em> code that you can&#8217;t really tweak the image on&#8230; \u00a0However if you dig a bit deeper into their developer site, you&#8217;ll find that they give you all of the SDK (software development kits) and code to custom rebuild their tools. \u00a0So yes, it takes effort to rebuild, but why two opposite extremes? \u00a0The easy way offers NO customization and slow load times, or the harder way is slow to code but super awesome from a load time, UI design, etc. \u00a0And seriously Facebook &#8211; do you see Twitter or Pinterest dying off because they let developers customize their icons? \u00a0Anyway, rant over&#8230; lets get on to solving the worlds social sharing problems.<\/p>\n<h2>The Problem:<\/h2>\n<p>The default <a href=\"https:\/\/developers.facebook.com\/docs\/plugins\/share-button\/\" target=\"_blank\" data-lasso-id=\"87\" rel=\"noopener\">Facebook share button plugin builder<\/a> does not allow for custom icons. \u00a0It is also slow to display the share button on your site&#8217;s page load.<\/p>\n<figure id=\"attachment_135\" aria-describedby=\"caption-attachment-135\" style=\"width: 500px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"size-medium wp-image-135\" src=\"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/05\/FB-Share-01-500x356.png\" alt=\"The default Facebook Share Button Plugin Builder\" width=\"500\" height=\"356\" \/><figcaption id=\"caption-attachment-135\" class=\"wp-caption-text\">The default Facebook Share Button Plugin Builder<\/figcaption><\/figure>\n<h2>The Solution:<\/h2>\n<p>If you read a bit further down on the page, they do link to the solution, using the <a href=\"https:\/\/developers.facebook.com\/docs\/sharing\/reference\/share-dialog\" target=\"_blank\" data-lasso-id=\"88\" rel=\"noopener\">Share Dialog<\/a>. \u00a0What this means is that we will need to create a custom Javascript function to trigger the share dialog to display. \u00a0Fairly straight forward actually. \u00a0But there are a few requirements to this:<\/p>\n<ul>\n<li>You need to create an App in your Facebook Developer section that has your website added to it for this to work<\/li>\n<li>You need to load the Facebook Javascript SDK (software development kit) on your page<\/li>\n<\/ul>\n<h3>Create you App<\/h3>\n<p>You may have a Facebook App already. \u00a0Regardless, lets check the settings to ensure it&#8217;s all set to go.<\/p>\n<ol>\n<li>Go to:\u00a0<a href=\"https:\/\/developers.facebook.com\/\" target=\"_blank\" data-lasso-id=\"89\" rel=\"noopener\">https:\/\/developers.facebook.com\/<\/a><\/li>\n<li>Click on the\u00a0<strong>Apps<\/strong> drop down in the main navigation. \u00a0If you have an app for your brand already, choose it. \u00a0If not, you&#8217;ll want to create an app.<br \/> <img decoding=\"async\" class=\"alignnone size-full wp-image-136\" src=\"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/05\/FB-Share-02.png\" alt=\"Facebook Developers App\" width=\"391\" height=\"78\" srcset=\"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/05\/FB-Share-02.png 391w, https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/05\/FB-Share-02-150x30.png 150w\" sizes=\"(max-width: 391px) 100vw, 391px\" \/><\/li>\n<li>Once on your\u00a0<strong>App Dashboard<\/strong> page, click on the\u00a0<strong>Settings<\/strong> option in the left hand navigation.<\/li>\n<li>What we are looking for on the\u00a0<strong>Basic<\/strong> tab is that there is a platform listed\u00a0for the platform you are working with. \u00a0In my case I&#8217;m working on a website, but this could work for other platforms like mobile, gaming stations, etc. as well so choose accordingly. \u00a0If the platform you&#8217;re working on isn&#8217;t listed, simply click the\u00a0<strong>Add Platform<\/strong> button and add it.<br \/>\n<figure id=\"attachment_137\" aria-describedby=\"caption-attachment-137\" style=\"width: 500px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"size-medium wp-image-137\" src=\"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/05\/FB-Share-03-500x351.png\" alt=\"Facebook Developers App Settings Page\" width=\"500\" height=\"351\" srcset=\"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/05\/FB-Share-03-500x351.png 500w, https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/05\/FB-Share-03-768x540.png 768w, https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/05\/FB-Share-03-150x105.png 150w, https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/05\/FB-Share-03-600x422.png 600w, https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/05\/FB-Share-03.png 948w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><figcaption id=\"caption-attachment-137\" class=\"wp-caption-text\">Facebook Developers App Settings Page<\/figcaption><\/figure>\n<\/li>\n<li>Fill in the appropriate information for that platform. \u00a0In my case, I need to ensure that I have the site URL set correctly.<\/li>\n<li>Click\u00a0<strong>Save Changes<\/strong>.<\/li>\n<\/ol>\n<h3>Get Coding<\/h3>\n<p>The first thing we need is the Facebook Javascript SDK. \u00a0If you are already loading this on your page, then great &#8211; lets skip this step. \u00a0You can view the source code of your page and look for it &#8211; a search for\u00a0<strong>connect.facebook.net<\/strong> should be a good indicator if it&#8217;s there or not. \u00a0If not, lets do this to add it:<\/p>\n<ol>\n<li>Go to:\u00a0<a href=\"https:\/\/developers.facebook.com\/docs\/plugins\/share-button\/\" target=\"_blank\" data-lasso-id=\"90\" rel=\"noopener\">https:\/\/developers.facebook.com\/docs\/plugins\/share-button\/<\/a><br \/> This is actually the page for the Share Button that we\u00a0<em>don&#8217;t want to use<\/em>, but it&#8217;s an easy way to get the SDK code.<\/li>\n<li>Click the\u00a0<strong>Get Code<\/strong> button<\/li>\n<li>Ensure that the dropdown for\u00a0<em><strong>Initialize the JavaScript SDK using this<\/strong><\/em><strong> app:<\/strong> is set to the App that we just set up above.<\/li>\n<li>Copy the code from the top box only and add it to your page. \u00a0Facebook recommends that it be just after the opening &lt;body&gt; tag, but it should work as long as it&#8217;s loading anywhere before your buttons. \u00a0(You might be able to get it to work if you load it later on the page if you use a doc.ready method, but try to get it higher up if possible. \u00a0It shouldn&#8217;t affect load times too bad&#8230;)<br \/> Your code will look something like this:\n<pre lang=\"javascript\">&lt;div id=\"fb-root\"&gt;&lt;\/div&gt;\r\n&lt;script&gt;(function(d, s, id) {\r\n var js, fjs = d.getElementsByTagName(s)[0];\r\n if (d.getElementById(id)) return;\r\n js = d.createElement(s); js.id = id;\r\n js.src = \"\/\/connect.facebook.net\/en_US\/sdk.js#xfbml=1&amp;appId=<em><strong>YOUR APP ID HERE<\/strong><\/em>&amp;version=v2.0\";\r\n fjs.parentNode.insertBefore(js, fjs);\r\n}(document, 'script', 'facebook-jssdk'));&lt;\/script&gt;<\/pre>\n<\/li>\n<li>Note:\u00a0If you&#8217;re working in Javascript only and that pesky &lt;div&gt; tag is holding you up, just leave it out. \u00a0Facebook will actually detect if it&#8217;s on the page or not and create it if needed.<\/li>\n<\/ol>\n<p>With the SDK in place, we can now add our button.<\/p>\n<ol>\n<li>Create your button as an HTML element. \u00a0In my case, I&#8217;m using an &lt;a&gt; tag that has a <a href=\"http:\/\/fortawesome.github.io\/Font-Awesome\/\" target=\"_blank\" data-lasso-id=\"91\" rel=\"noopener\">Font Awesome<\/a> icon font in it. \u00a0Here is what I&#8217;m using:\n<pre lang=\"html4strict\">&lt;a href=\"javascript:facebookshare();\" class=\"btn btn_follow\" title=\"Facebook\"&gt;\r\n &lt;i class=\"fa fa-facebook\"&gt;&lt;\/i&gt;\r\n &lt;\/a&gt;<\/pre>\n<\/li>\n<li>Notice the href is a Javascript function &#8211; lets create that as well. \u00a0I put it above the &lt;a&gt; tag to ensure that it was loaded in time for when the user clicks it. \u00a0But this function NEEDS to be loaded AFTER the Facebook Javascript SDK we put in just above. \u00a0This function of Facebook looks for the current pages URL &#8211; the href parameter. \u00a0If you ONLY wanted to share one page on your site you could hard code it, but generally you&#8217;ll want to dynamically generate it which is why I have the window.location.href added.\n<pre lang=\"javascript\">function facebookshare() {\r\n FB.ui({\r\n method: 'share',\r\n href: window.location.href,\r\n }, function(response){});\r\n }<\/pre>\n<\/li>\n<li>Go test! \u00a0One potential gotcha is if you are working in a development environment and your dev sites URL doesn&#8217;t match that of what is in your Facebook App from above, you&#8217;ll get an error. \u00a0Technically that error is a good sign as it means that you are talking with Facebook correctly and their security settings are working. \u00a0But still not a great thing to get&#8230; \u00a0There are two ways around this that I&#8217;ve used:<br \/> a. You could hard code in the live site&#8217;s domain name and then dynamically add in the current pages URI. \u00a0This way you are always sharing the live site and never the dev site.<br \/> b. You can tweak your code above just a bit and use the debugger console on your live site to test that your code is working. \u00a0But this will really only work for you in a one-off scenario and won&#8217;t allow for other stakeholders to see this working right in dev.<br \/>\n<figure id=\"attachment_142\" aria-describedby=\"caption-attachment-142\" style=\"width: 500px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"size-medium wp-image-142\" src=\"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/05\/FB-Share-05-500x264.png\" alt=\"The Facebook Share Dialog requires your Website URL in your App Settings to match that of the domain that you are sharing from.\" width=\"500\" height=\"264\" srcset=\"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/05\/FB-Share-05-500x264.png 500w, https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/05\/FB-Share-05-150x79.png 150w, https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/05\/FB-Share-05.png 598w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><figcaption id=\"caption-attachment-142\" class=\"wp-caption-text\">The Facebook Share Dialog requires your Website URL in your App Settings to match that of the domain that you are sharing from.<\/figcaption><\/figure>\n<\/li>\n<\/ol>\n<p>I hope this helps. \u00a0Let me know if you have any issues or good success stories to share. \u00a0I love seeing what others can do with the Facebook tools aside from the plane-jane tools.<\/p>","protected":false},"excerpt":{"rendered":"<p>I&#8217;m not a fan of the stock Facebook social tools &#8211; they are slow to load, are a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":135,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wprm-recipe-roundup-name":"","wprm-recipe-roundup-description":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[10,12,5],"tags":[],"class_list":["post-134","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-facebook-development","category-javascript-jquery","category-website-development"],"jetpack_featured_media_url":"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/05\/FB-Share-01.png","jetpack_shortlink":"https:\/\/wp.me\/p4BbcR-2a","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/comments?post=134"}],"version-history":[{"count":6,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/134\/revisions"}],"predecessor-version":[{"id":216,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/134\/revisions\/216"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/media\/135"}],"wp:attachment":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/media?parent=134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/categories?post=134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/tags?post=134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}