You are here

Creating Social Media Links

Submitted by Kady on July 9, 2015 - 9:24am

Facebook

A sample link for facebook looks like:

http://www.facebook.com/sharer.php?u={ URL TO SHARE }

Facebook will populate the title, picture, etc based on the opengraph tags of the URL you submit. Here is a sample button:

<a class="facebook_share" title="Share on Facebook" href="http://www.facebook.com/sharer.php?u="http://www.richiroutreach.com/blog/creating-social-media-links-0" target="newwindow" onclick="newWindow(275,475)">Share on Facebook</a>

That code will create the following lovely link for visitors of your website to click on for their convenience. As it is just standard HTML, you can format the CSS as you like, put it between other formatting tags, or just leave it plain text.

Twitter

A sample twitter share link looks like: https://twitter.com/intent/tweet?text={ TWEET TEXT }

For Twitter, you generally will want to put the text of the tweet and then the URL. Here's a demo:

  1. <h3><a class="twitter_share" href="https://twitter.com/intent/tweet?text= How to create social media share buttons using html--http://www.richiroutreach.com/blog/creating-social-media-links-0" target="newwindow" onclick="newWindow(275,475)">Share on Twitter</a></h3>

Notice we put this one in <h3> tags. It appears below.

Additional Javascript

Add this code to make your links pop up in small windows:

  1. <script>
  2.  	function newWindow(height,width) {
  3.    		var settings = "height=" + height + ",width=" + width + ",status=yes,toolbar=no,menubar=no,location=no";
  4.    		window.open("about:blank","newwindow", settings);
  5. 	}
  6. </script>
  7. </<javascript>>
  8. <p>This code can go anywhere in your page.</p>