How to Add a Share Dropdown Menu after Each Post? (Javascript)


The following dropdown list to share current post to a number of sites is added to wordpress blog (you could also add it to your own website as well).

share-dropdown-list-javascript How to Add a Share Dropdown Menu after Each Post? (Javascript) code HTML5 javascript wordpress

share-dropdown-list-javascript

The Javascript and HTML code is as follows, and you can add it to the place that displays the articles (e.g. single.php in wordpress template).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script language="Javascript">
function openlink(link) {
    if (link) {
        var title = document.title.split(" | ")[0];
        var url = window.location;
        var x = "";
        if (link == "milnk") {
            x = "http://milnk.com/link/submit?u=" + encodeURIComponent(url) + "&t=" + encodeURIComponent(title);
        }
        else if (link == "wayback") {
            x = "http://web.archive.org/save/" + url;
        }
        if (x) {
            window.open(x);
        }
    }
}
</script>
<select onchange="javascript:openlink(this.value)">
<option selected="">Share This to...</option>
<option value="milnk">Milnk</option>
<option value="wayback">Wayback Machine</option></select>
<script language="Javascript">
function openlink(link) {
	if (link) {
		var title = document.title.split(" | ")[0];
		var url = window.location;
		var x = "";
		if (link == "milnk") {
			x = "http://milnk.com/link/submit?u=" + encodeURIComponent(url) + "&t=" + encodeURIComponent(title);
		}
		else if (link == "wayback") {
			x = "http://web.archive.org/save/" + url;
		}
		if (x) {
			window.open(x);
		}
	}
}
</script>
<select onchange="javascript:openlink(this.value)">
<option selected="">Share This to...</option>
<option value="milnk">Milnk</option>
<option value="wayback">Wayback Machine</option></select>

The current URL is obtained by Javascript window.location and the title is retrieved using document.title. encodeURIComponent function is used to encode the special characters in the URL string.

To enable more options (sharing website), you just need to add more if-statements accordingly. To see that, view the HTML source of the current page and you will see a complete list of sharing options.

Update: 01/02/2016 Simple AddThis code is available at github: (Add Tumblr and QR code options)

https://github.com/DoctorLai/addthis

Usage:

1
2
3
4
5
6
7
<script>
var sharedropdown_english = true; // Set false if using Chinese
var sharedropdown_rss = null; // Feed URL subscription
</script>
<div id="sharedropdown"> </div>
<div id="sharedropdown_qr"> </div>
<script src="https://helloacm.com/js/addthis.js" async></script>
<script>
var sharedropdown_english = true; // Set false if using Chinese
var sharedropdown_rss = null; // Feed URL subscription
</script>
<div id="sharedropdown"> </div>
<div id="sharedropdown_qr"> </div>
<script src="https://helloacm.com/js/addthis.js" async></script>

–EOF (The Ultimate Computing & Technology Blog) —

GD Star Rating
loading...
409 words
Last Post: C# Example - Using Parallel ForEach to Improve Existing Code
Next Post: Using Variable Substitution to Reference Another Variable in PHP and BASH Script

The Permanent URL is: How to Add a Share Dropdown Menu after Each Post? (Javascript)

Leave a Reply