Launch Facebook Share Popup at Center of Screen - javascript

The following code works well and launches a facebook popup on the screen, however this popup is not centered.
<script type="text/javascript">
function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}
</script>
<img src="images/facebookimage.jpg" alt="facebook share">
Here is the script that centers a popup window:
<script type="text/javascript">
function MyPopUpWin(url, 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);
//Open the window.
window.open(url, "Window2",
"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");
}
</script>
How can I update the first script so that it works in combination with the second script to result in the popup window launching in the center of the screen?

See if this works for you:
<script type="text/javascript">
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;
}
</script>
<!-- Please change the width and height to suit your needs -->
<img src="images/facebookimage.jpg" alt="facebook share">

Try this
<script type="text/javascript">
function fbs_click() {
u=location.href;t=document.title;window.open(
'http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),
'sharer','toolbar=0,status=0,width=626,height=436');return false;
}
</script>
Share on Facebook
Or this post with a picture on Facebook
<script type="text/javascript">
function fbs_click() {
u=location.href;t=document.title;window.open(
'http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),
'sharer','toolbar=0,status=0,width=626,height=436');return false;
}
</script>
<img src="http://originus.samsung.com/us/images/support/facebook-share.png"/>
You can change the image or words
Size pop-up window
width=626,height=436
You can change the size

Related

Can not set center position of window edge when using window.open()

I use javascript method :
var left = ((outerWidth / 2) - (w / 2)) + dualScreenLeft - 8;
var top = ((height / 2) - (h / 2)) + dualScreenTop;
var param = "width=" + w + ", height=" + h + ", left=" + left + ", top=" + top + ",toolbar=no,menubar=no,scrollbars=no,location=yes,directories=no";
window.open(url, "new window", param);
to open a new window in center screen position. It worked for all browser except Window Edge.
In
window.open(strUrl, strWindowName, [strWindowFeatures])
top and left parameters ignored in strWindowFeatures
Can someone help me ? Thanks

Tracking Facebook Button Clicks with Analytic Universal

I need some help getting my code working.
I am trying to Track the Clicks on my custom FB Share Button.
I need to implement this code:
onClick="ga('send', 'event', 'category', 'action', 'ShareFBButton');">
This is my code:
<script type="text/javascript">
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) + 10);
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;}
</script>
<a href="http://www.facebook.com/share.php?u=<?php the_permalink()?>"
onClick="return fbs_click(570, 300)" target="_blank" title="ShareOnFacebook">
<img src="images/shareonfacebook.png" width="614" height="54"
alt="ShareOnFacebook"></a>`
Just add it into callback body:
<script>
function fbs_click(width, height) {
ga('send', 'event', 'category', 'action', 'ShareFBButton');
/*....
....
.... rest of script
....*/
t=document.title;
window.open('http://www.facebook.com/sharer.php? u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer', windowFeatures);
return false;}
</script>

closing a window popup based on result

I am trying to open a window from a click then after the response in the url that consist of a confirmation page if is success it will close the window.
I opened my window with this:
url = 'http:/mywebsite/index';
width = 545;
height = 433;
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);
//Open the window.
window.open(url, "Window2", "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");
The returned of the URL http:/mywebsite/index is a json dump with a dictionary of success whether true or false. I code this with python btw.
The problem I am encountering is how to close the window from the return of the python.
I tried returning a string as HTML and javascript consisting of window.close(). But no luck. Please do tell me if I am doing something wrong or what should be the method.
Thanks.
You need to store the object returned by window.open and call close() on that object:
var mywindow;
mywindow = window.open(...);
...
mywindow.close();

JavaScript popup window with scrollbars

I have a function that pops up window in the center and I want it to have a vertical scrollbar.
function popUpCal()
{
var url = "calendar_flight_maint.php";
var width = 700;
var height = 600;
var left = parseInt((screen.availWidth/2) - (width/2));
var top = parseInt((screen.availHeight/2) - (height/2));
var windowFeatures = "width=" + width + ",height=" + height + ",status,resizable,left=" + left + ",top=" + top + "screenX=" + left + ",screenY=" + top;
window.open(url, "subWind", windowFeatures, "POS", "toolbar=no", "scrollbars=1");
}
I have tried scrollbars=yes, scrollbars=auto, scrollbars=1 but the scrollbars still aren't appearing. Is there something wrong with my code? I'm using Firefox 21.0 and I've already tested it in IE 8. What seems to be the problem?
As seen in the specs for window.open, your parameters are wrong.
Try this:
function popUpCal()
{
var url = "calendar_flight_maint.php";
var width = 700;
var height = 600;
var left = parseInt((screen.availWidth/2) - (width/2));
var top = parseInt((screen.availHeight/2) - (height/2));
var windowFeatures = "width=" + width + ",height=" + height +
",status,resizable,left=" + left + ",top=" + top +
"screenX=" + left + ",screenY=" + top + ",scrollbars=yes";
window.open(url, "subWind", windowFeatures, "POS");
}
Here is a jsFiddle

Parse link through Javascript instead of Inline

I have a number of social media site links which i would like to parse through a popup box. Here is an example of one of those links:
<li>
<a class="sprite_reddit" href="http://www.reddit.com/submit" onclick="window.open('http://www.reddit.com/submit?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'reddit','toolbar=no,width=840,height=750'); return false;"></a>
</li>
Rather than include window.open in the html I would like this link to parse through the following javascript which centers the popup box in the screen.
function MyPopUpWin(url, 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);
//Open the window.
window.open(url, "Window2", "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");
}
What do I need to change in order to achieve this or is it not possible with this kind of link?
Thanks heaps.
The open function is supported in every major browser version but not every browser supports all the parameters you have set. Some like screenX and Y are no longer supported I guess.
Checkout this link for more information:
http://www.w3schools.com/jsref/met_win_open.asp

Categories

Resources