Adding a DotNetKicks Image/Badge via jQuery
A while ago Jon Galloway posted a short article titled “Adding a DotNetKicks image via JavaScript” which contains the small amount of JavaScript code necessary to add a DotNetKicks.com Image / Badge to your web pages. The DotNetKicks Badge is essentially a link that allows users to go to DotNetKicks.com to vote for you web page, and the badge also displays the total number of “kicks” that your page has received. Since jQuery has become insanely popular since Jon originally posted his JavaScript code, I thought I would post a jQuery version of his code.
Here’s a simple demonstration of the DotNetKicks.com Badge that the below jQuery/JavaScript code will generate:
To use the below code you just need to follow the following steps:
- Create a
<DIV>
element where you want the badge to be displayed. - Set the
<DIV>
’s ID topostToolbar
. - Make sure that the jQuery Library is included within the page.
- Include the below jQuery / JavaScript code within the page.</li>
Here’s the jQuery / JavaScript code:
$(function() {
var currentPageUrl = document.location.protocol + "//" + document.location.host + document.location.pathname;
$('#postToolbar').append(
$('<a/>').
attr('href', 'http://www.dotnetkicks.com/kick/?url=' + currentPageUrl).
css({ border: 'none' }).
append(
$('<img/>').
attr('src', 'http://www.dotnetkicks.com/Services/Images/KickItImageGenerator.ashx?url=' + currentPageUrl).
css({ border: 'none' })
)
);
});
Related Posts
-
Include Javascript File in Another Javascript File
22 Mar 2024 -
Javascript: How Closures Work
22 Mar 2024 -
Javascript: Redirect to another webpage with Javascript and jQuery
22 Mar 2024 -
Javascript: Check if string contains a substring
21 Mar 2024 -
JavaScript: How to Print to Console, console.log, console.error, console.debug
06 Dec 2023 -
How to Hide a Column in AG-Grid and Prevent it from Displaying in the Tool Panel
11 Oct 2023