jQuery Plugin To Generate Social Share Links Using HTML Meta Tags
File Size: | 6.33 KB |
---|---|
Views Total: | 2692 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
jquery.social.js is a lightweight jQuery plugin used for generating custom social links to share your html content specified in the HTML5 meta & open graph tags. Supported services: Facebook, Twitter, Google Plus, Linkedin, Pinterest and Reddit.
How to use it:
1. In this case, we're going to use Font Awesome 4 for social icons.
<link rel="stylesheet" href="font-awesome.min.css">
2. Turn your web pages into graph objects using Open Graph protocol markups as shown below:
<meta property="fb:app_id" content="YOUR_APP_ID" /> <meta property="og:site_name" content="Social Share"/> <meta property="og:type" content="website" /> <meta property="og:url" content="https://www.jqueryscript.net/" /> <meta property="og:title" content="Social Share" /> <meta property="og:description" content="Social Share Plugin with jQuery"/> <meta property="og:image" content="" /> ...
3. Create an empty container for the social share links.
<div class="social-share"></div>
4. Load jQuery library and the jquery.social.js script at the bottom of the web page.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="js/jquery.social.min.js"></script>
5. Call the function on the DIV container you just created and done.
$(".social-share").social();
6. Configuration options available.
$(".social-share").social({ "fbAppID" : "YOUR_APP_ID", "url" : "URL", "title" : "TITLE", "desc" : "DESCRIPTION", "image" : "IMAGE_PATH" });
This awesome jQuery plugin is developed by screename. For more Advanced Usages, please check the demo page or visit the official website.