Make dynamic url based social share buttons for any website

In this tutorial I will explain how to make social share buttons for dynamic url; i.e. to make a piece of code which will work in every web page.

You don’t have to provide your page url.

I’m also providing the code snippet directly, which you can copy and paste anywhere to create a social share button.

Facebook Like and Share

Step 1:

Go to the facebook social plugin like box page. https://developers.facebook.com/docs/plugins/like-button/

facebook-like-share-1

The url doesn’t matter here. Put whatever you want, cause in the end we are going to delete that part. But you have to put something here otherwise facebook won’t make the script.

Step 2:

Click on the ‘Get Code’ button and you will find a popup in your window.

facebook-like-share-2

Use the HTML5 in this case. Now copy the codes of 1 and 2 and paste them together in your page.

Step 3:

facebook-social-share-3

After pasting the codes in your file, you just remove the data-href attribute. Facebook has a handling for “data-href”. If there is no data-href attribute in “fb-like”, it automatically sets it to the current page url form behind.

Facebook share code snippet:

<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>

<div class="fb-like" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>

<!--
This buttons may not display in local
You have to place your file in real web server
-->

Tweeter Tweet Button

Well, making a tweet button for your website is very simple.

Step 1:

Copy and paste the following code to your web page

<a href="https://twitter.com/share" class="twitter-share-button" data-hashtags="your_hash_tag" data-via="your_screen_name" data-count="vertical">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Step 2:

Edit the ‘data-hashtags’ attribute of the anchor tag and set your desired value. Generally people set their website name in it. You also have to edit the ‘data-via’ attribute. Generally people set their @tweerId. If you do not want any hash tag or via link, just remove both these attributes.

Step 3:

‘data-count’ attribute is used to display the count box. If you set it to ‘none’ it will hide the count box. To display the count box at top or at right, you can set the value of ‘data-count’ to ‘vertical’ or ‘horizontal’

Google+ Share Button

Making Google+ is also very simple. You just have to make some graphical configuration.

Step 1:

Go to the Google+ developers web share page https://developers.google.com/+/web/share/

google plus social share

Step 2:

Style your button using the left side panel and after doing that copy the code from the box at right and paste in your page.

StumbleUpon Submit Button

Step 1:

Go to StumbleUpon create badge page http://www.stumbleupon.com/dt/badges/create

stumbleupon-create-badge

Step 2:

Click on the button style you want in your page. Copy the code from the right hand side box and paste that to your web page.

Social Share Button Code Snippet

<ul>
	<li>
		<div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
		<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&appId=531518413560945";
		  fjs.parentNode.insertBefore(js, fjs);
		}(document, 'script', 'facebook-jssdk'));</script>
	</li>
	<li>
		<!-- Place this tag where you want the share button to render. -->
		<div class="g-plus" data-action="share" data-annotation="bubble"></div>

		<!-- Place this tag after the last share tag. -->
		<script type="text/javascript">
		  (function() {
			var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
			po.src = 'https://apis.google.com/js/platform.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
		  })();
		</script>
	</li>
	<li>
		<!-- Place this tag where you want the su badge to render -->
		<su:badge layout="1"></su:badge>

		<!-- Place this snippet wherever appropriate -->
		<script type="text/javascript">
		  (function() {
			var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
			li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
		  })();
		</script>
	</li>
	<li>
		<a href="https://twitter.com/share" class="twitter-share-button" data-hashtags="VoidCanvas">Tweet</a>
		<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
	</li>
</ul>

Here I’m providing an example snippet of all the social share buttons mentioned above. This is exactly the code which I am using to display social share buttons at the beginning of every posts in void canvas. I’ve placed this code in single.php file of my theme. Similarly you also can put the code in some common file in your website

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.

  • Salvadoreño

    Very good dude, thanks

  • i need more explanation about Open Graph in CI Framework

  • ezehlivinus

    Please i want to know how to add line numbering to a code block. when displaying it

    to readers just as it is in

    Facebook share code snippet: above thank

  • Shameer

    It worked….Thanks a ton

  • Kame Rhienmora

    Thank you very much. You save my day.

  • John W

    What if my page content (title, image and text) are dynamically loaded using jQuery? If I do view source from browser, i still see the unmodified content before jquery runs. Please advise. Thanks

    • metalshan

      The post is, how to share current url. Your question seems to have some different context. Well, “view page source” is to display the actual page code. Which in your case is the unmodified one. The currently displaying code can be found on “developers tools” > Elements. Right click on your page and select “inspect element”. It will open your dev tools. There in the “elements” tab you can see your modified code.

  • Nikhil Sonawane

    hello , nice work but I want some changes in code.
    I want to add the url dynamically, that means I want to set that “data-href” attribute of div dynamically. the link to add is stored in my database. please help

    • metalshan

      Didn’t understand where you are facing problem? Fetch the url from DB and put the value in data-href. U can do it in server side while making the html or by making an ajax call from UI

  • Klaudius Kuko Kuffa

    In Step 2 for Facebook Like and Share I want to use the URL instead of HTML5. But….when I click “Get Code” I don’t see the options for: HTML5, XFBML, IFRAME, URL like it is in your picture. What now should I do?

  • This answer my question. Thanks

  • Sahil Yadav

    thanks a lot friend

  • carole

    what if for the facebook share button i don’t want to use the current page? i have a php function that gets the page I want, How can I put it in the code? href=”

    • Paul Shan

      Then you do not remove the “data-href” attribute as step 3; but add the url of the page you wanna share over there.

  • Katrina

    Out of the dozens and dozens of code out there, this is the only one that worked for me! Thank you so much!! I’m wondering how you would call the post title and url in a mailto share button?