Home › Forums › Other › [WORDPRESS] How to: Create custom Share links? › Re: [WORDPRESS] How to: Create custom Share links?
If anyone would like to know the technique I used here it goes//
For Twitter I used this **HTML**//
[div class="custom-tweet-button"]
[a class="twitter popup" target="_blank" href="http://twitter.com/share?url=" title="Share On Twitter"][/a]
[/div]
To make the window pop up in the center of the screen I used this **JS**//
$(function(){
$('.popup').click(function(event) {
var width = 575,
height = 400,
left = ($(window).width() - width) / 2,
top = ($(window).height() - height) / 2,
url = $(this).attr('href'),
opts = 'status=1' +
',width=' + width +
',height=' + height +
',top=' + top +
',left=' + left;
window.open(url, 'twitter', opts);
return false;
});
});
**SOURCE**: [http://stackoverflow.com/questions/6342733/how-style-twitter-popup](http://stackoverflow.com/questions/6342733/how-style-twitter-popup “http://stackoverflow.com/questions/6342733/how-style-twitter-popup”)
For Facebook I used this **HTML**//
[div class="custom-fb-button"]
[a href="http://www.facebook.com/share.php?u=&t=" target="_blank" onClick="return fbs_click(400, 300)" title="Share This on Facebook"][/a]
[/div]
To make the window pop up in the center of the screen I used this **JS**//
function fbs_click(width, height) {
var leftPosition, topPosition;
//Allow for borders.
leftPosition = (window.screen.width / 2) - ((width / 2) + 10);
//Allow for title and status bars.
topPosition = (window.screen.height / 2) - ((height / 2) + 50);
var windowFeatures = "status=no,height=" + height + ",width=" + width + ",resizable=yes,left=" + leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY=" + topPosition + ",toolbar=no,menubar=no,scrollbars=no,location=no,directories=no";
u=location.href;
t=document.title;
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer', windowFeatures);
return false;
}
**SOURCE**:
[http://stackoverflow.com/questions/12882689/launch-facebook-share-popup-at-center-of-screen](http://stackoverflow.com/questions/12882689/launch-facebook-share-popup-at-center-of-screen “http://stackoverflow.com/questions/12882689/launch-facebook-share-popup-at-center-of-screen”)
**CSS**//
.custom-tweet-button, .custom-fb-button { display: inline-block; }
.custom-tweet-button a { height: 20px; width: 20px; display: block; background: url('https://twitter.com/favicons/favicon.ico') 1px center no-repeat; }
.custom-fb-button a { height: 20px; width: 30px; display: block; background: url('http://b.static.ak.fbcdn.net/images/share/facebook_share_icon.gif?8:26981') 1px center no-repeat; }