Dynamic Facebook Share Button for Your website and web pages | No configuration is required! 😮😮😮😮
I was wondering how to let people share my webpage through Facebook. Even though Facebook Developer Tools let you create a Facebook button with ease you have to go to the developer's page and paste your URL into a box generate code, copy it, and paste wherever you want. but it is not the problem, The real problem is you have to repeat this process whenever you write a new blogpost/ post for your website.
Then you have to use this javascript code for your webpage. It gets your web pages' address with javascript code document.location.href; and passes it to the Facebook share gadget. here is the code and let the hack begin!!
<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 = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script>
var x = getElementByClassName('fb-share-button');
x.data-href = document.location.href;
</script>
<div class="fb-share-button"
data-href="#"
data-layout="button_count">
</div>
the first part of javascript code is to load the Facebook SDK for javascript
and the second part is the code written by me.
it gets the element with the class name 'fb-share-button'
the second line sets the value of attribute 'data-href' which holds the URL to share on Facebook to our page's URL.
document.location.href returns the URL of the currently opened window/tab.
that's all you are ready to be shared on Facebook.
Thank You very much for reading.
if you have 99 issues in your life, Don't make it a 100 without sharing this!!
Comments
Post a Comment