JavaScript: Using Facebook Share Dialog (without FB Library)

Hear ye, hear ye.

---

You can now use the new like and share buttons. Yes, Facebook puts back the "old" share button. You can get your Facebook Share button directly on Facebook Share button generator at Facebook (you need to login to Facebook).

But, if you don't want to pull external resource (such as Facebook Ajax library) you can implement this method.

Let's

Create a button, and place inline JavaScript on it:
<button type="button" onclick=" window.open( 'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 'facebook-share-dialog', 'width=626,height=436');"> Share on Facebook </button>

Actually, for blogger.com blog, we don't have to put that anymore, since blogger.com blog by default is already equipped with Facebook Share (for non-dynamic view, like this blog) and Facebook Like Button for dynamic view.

BUT, if you want to build your own Facebook share button, you can use the code above, then put the CSS styling class/ID within the <button> tag.

EXAMPLE

You can click that button, and the pop up window of Facebook Share will appear.

This is the HTML elements stacking (and CSS styling) of that button. You can change the class .my_FB_button_sharer into your own keyword:

<!--CSS of the button--> <style> .my_FB_button_sharer { padding:10px 20px; color:#aaa; font-family:inherit; border-radius:4px; } .my_FB_button_sharer:hover { cursor:pointer; color:#000; } </style> <!--HTML + inline trigger of the button--> <div style='text-align:center'> <button type="button" class='my_FB_button_sharer' onclick=" window.open( 'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 'facebook-share-dialog', 'width=626,height=436');"> Share on Facebook </button> </div>

That's about it. You don't need to include any external resources from Facebook for this.

You can place the whole code anywhere you want on your site or blog it will automatically follow the URL of the page/post via location.href.

---

For Blogger.com blog, if you want the share button to appear on:

• Below of every title of the post, you can go to HTML editor ► look for <div class='post-header'> ► paste above (before) it.
• Below of every post body, you can go to HTML editor ► look for <div class='post-footer'> ► paste the code above (before) that line.

---

I also posted about bunch of social media buttons sharer on this blog, also without pulling external library.
Also with this kind of method but implemented for multiple elements.