Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other [WORDPRESS] How to: Create custom Share links? Re: [WORDPRESS] How to: Create custom Share links?

#138530
asiek
Participant

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-popuphttp://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-screenhttp://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; }