Dynamically change URL for share button on Facebook Embedded Posts - javascript

Basically, my website hosts various embedded posts using the new Facebook Feature. This allows users to like, comment and share other peoples content from my site. What am I trying to achieve is, when a user shares somebody else's content via embedded post, it will show up on the Facebook Feed as via MY WEBSITE...not via the posts originator. It can be done if when clicking the share button, I manually enter my app id in the url in place of theirs. Can this be done dynamically by a piece of code?
Thank you in advance,
Gavin.

You not mention which server side language used. Assumed PHP
$url=$_SERVER['REQUEST_URI'];
<div class="fb-share-button" data-href="<?php echo $url;?>"></div>
or Javascript
<script type="text/javascript">window.location.protocol = "http";
window.location.host = "example.com"
window.location.pathname = "index.html"
var shareURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;
document.write('<div class="fb-share-button" data-href="'+shareURL+'"></div>');
</script>

Related

Not able share the static content and URl to twitter

Here i want to share the static content and 'URL' to twitter , i am trying but i am not able share the both,kindly check my code ,what i did wrong,if anyone know means please my update the code,
Suppose i am sharing separately means it is working fine.separate means i am sharing only static content means working fine , suppose i am sharing one url means working,when ever i am trying both that not working
<html>
<body>
<?php
$static_content = "This photo is awesome! Check it out below link";
$url = "http://g2evolution.in/spreadit_API/event-details.php?id=MQ==&postedCustonerId=MQ==&eventType=UHVibGlj";
?>
<br><br>
Content Sharing<br><br>
Link Sharing <br></br>
Share Both on Twitter
</body>
</html>

Detecting web-based mail client vs local mail client for a mailto link

I have a web application from which the user can send an email using a mailto link. Basically, I concatenate a string that contains the subject, body and recipients and then the code triggers a mailto, somewhat like this:
var MailToLink = 'mailto:' + TheEmailString;
window.open(MailToLink, '_blank'); //option 1
window.open(MailToLink); //option 2
Initially, I only had option 2 because on my dev machine I have Outlook. But as I started some alpha testing, another user was using Gmail and the mailto link would open in the same window as my app so I changed my code to option 2 so that the email opens in another window. The problem now is that when the user is on Outlook, the link opens both an Outlook message and a new blank window.
Is there a way to detect if the user is using a web-based email client or a local client? I would like to do something like this:
if (IsUsingWebMailClient) {
window.open(MailToLink, '_blank');
} else {
window.open(MailToLink);
}
I'm not sure if this is even possible; how do I detect the mailto client using JavaScript?
It's a bit of a hack, but that works. The time out may vary, you can test with more and less milliseconds.
<html>
<head>
<script type="text/javascript">
function mailTo(address){
var windowRef = window.open('mailto:'+address, '_blank');
var body = windowRef.document.getElementsByTagName('body')
if(!body.lenth) setTimeout(windowRef.close,300)
}
</script>
</head>
<body>
<input type="button" value="send email" onclick="mailTo('email#gmail.com')" >
</body>
</html>

How to open a URL link from JavaScript inside a Google Apps Script HTML Google Site Gadget

I have written an HTML (not UI) gadget in Google Apps Script to be embedded in a Google Site. The gadget presents a drop-down with options that contain URL/display name value/text pairs.
I want to put a button in the gadget that opens a new window corresponding to the selected URL. But, basically, I get an "Object does not contain an 'open' method" error when I execute
window.open(url);
Is there a way around this? I can (and have) created gadgets with anchor tags that successfully open other windows, but doing this same action from javascript appears to not be allowed.
Anything that accomplishes the functionality is fine. A jQuery-based solution would be great.
Thanks.
Due to Caja’s sanitization, all the javascript functions are not supported that's why can't open a new window in App Script.
The workaround to display a popup in App Script is to use an overlay window(which is not a popup technically but appears like a popup) like jQuery modal dialog which are supported in App Script.
http://jqueryui.com/dialog/#modal-form
However iframe tags are not supported in App Script, so an attempt to open a url in modal window with the help of iframe tags will not work.
You can read more about these restriction in App Script from the link below :
https://developers.google.com/apps-script/guides/html/restrictions**
Hope it helps!
You can open the link directly by running the window.open() JS in a dialog using the HTMLService.
Here's a demo sheet (take a copy to see the script).
openNewWindow() is assigned to the button.
Code.gs:
function openNewWindow() {
var htmlString =
'<div>' +
'<input type="button" value="Close" onclick="google.script.host.close()" />' +
'</div>' +
'<script>window.open("http://www.google.com")</script>';
var htmlOutput = HtmlService
.createHtmlOutput(htmlString)
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setHeight(60);
SpreadsheetApp
.getUi()
.showModalDialog(htmlOutput, 'Opening New Window...');
}
It's not possible to do that because of caja sanitization. The options bellow will not work.
1) jquery - $("#some_link_id").click()
2) javascript - window.open, window.href, etc...
The only workaround but I guess that will not fit to your problem is creating links with target="_blank" to open new windows but as I said is not possible to click in these links though javascript/jquery.
My Link
I was able to achieve this using a form. On submit, set the action of the form to the desired URL, as determined by the selected item in the select box.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$('document').ready(function(){
$('#yourForm').attr('onsubmit',null); //set onsubmit to Null for NATIVE Caja sandboxmode
$('#yourForm').submit(function(){
var val = $('#yourSelect').val(); //get value of select box
$('#yourForm').attr('action',val); //set action of form
});
});
</script>
<div>
<select id="yourSelect">
<option value="https://www.google.com">Google</option>
<option value="https://www.bing.com">Bing</option>
</select>
<form id="yourForm" method="get" target="_blank" action="">
<input type="submit" value="Open Selected">
</form>
</div>

How to add facebook share button on my website?

I have this code that suppose to work, but doesn't work.
<script src='http://connect.facebook.net/en_US/all.js'></script>
<p><a onclick='postToFeed(); return false;'><img src="images/fb.png" /></a></p>
<p id='msg'></p>
<script>
FB.init({appId: "338334836292077", status: true, cookie:
true});
function postToFeed() {
// calling the API ...
var obj = {
method: 'feed',
redirect_uri:'https://www.facebook.com/cryswashington?fref=ts',
link:'https://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
name: 'Facebook Dialogs',
caption: 'Reference Documentation',
description: 'Using Dialogs to interact with users.'
};
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
</script>
I want to add facebook share button on my website, that should just post my website's content on the wall. Can anyone help me?
You don't need all that code. All you need are the following lines:
<a href="https://www.facebook.com/sharer/sharer.php?u=example.org" target="_blank">
Share on Facebook
</a>
Documentation can be found at https://developers.facebook.com/docs/reference/plugins/share-links/
You can do this by using asynchronous Javascript SDK provided by facebook
Have a look at the following code
FB Javascript SDK initialization
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR APP ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Note: Remember to replace YOUR APP ID with your facebook AppId. If you don't have facebook AppId and you don't know how to create please check this
Add JQuery Library, I would preferred Google Library
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
Add share dialog box (You can customize this dialog box by setting up parameters
<script type="text/javascript">
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'This is the content of the "name" field.',
link: 'http://www.groupstudy.in/articlePost.php?id=A_111213073144',
picture: 'http://www.groupstudy.in/img/logo3.jpeg',
caption: 'Top 3 reasons why you should care about your finance',
description: "What happens when you don't take care of your finances? Just look at our country -- you spend irresponsibly, get in debt up to your eyeballs, and stress about how you're going to make ends meet. The difference is that you don't have a glut of taxpayers…",
message: ""
});
});
});
</script>
Now finally add image button
<img src = "share_button.png" id = "share_button">
For more detailed kind of information. please click here
You can read more about share button here on Facebook developers website
Working JSFIDDLE
Also take a look at custom Facebook Share button JSFIDDLE
Include Facebook JavaScript SDK code right after the opening <body> tag
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And place below code wherever you want to show Facebook Share button
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-width="200" data-type="button_count"></div>
Check working JSFIDDLE
For Facebook share with an image without an API and using a # to deep link into a sub page, the trick was to share the image as picture=
The variable mainUrl would be http://yoururl.com/
var d1 = $('.targ .t1').text();
var d2 = $('.targ .t2').text();
var d3 = $('.targ .t3').text();
var d4 = $('.targ .t4').text();
var descript_ = d1 + ' ' + d2 + ' ' + d3 + ' ' + d4;
var descript = encodeURIComponent(descript_);
var imgUrl_ = 'path/to/mypic_'+id+'.jpg';
var imgUrl = mainUrl + encodeURIComponent(imgUrl_);
var shareLink = mainUrl + encodeURIComponent('mypage.html#' + id);
var fbShareLink = shareLink + '&picture=' + imgUrl + '&description=' + descript;
var twShareLink = 'text=' + descript + '&url=' + shareLink;
// facebook
$(".my-btn .facebook").off("tap click").on("tap click",function(){
var fbpopup = window.open("https://www.facebook.com/sharer/sharer.php?u=" + fbShareLink, "pop", "width=600, height=400, scrollbars=no");
return false;
});
// twitter
$(".my-btn .twitter").off("tap click").on("tap click",function(){
var twpopup = window.open("http://twitter.com/intent/tweet?" + twShareLink , "pop", "width=600, height=400, scrollbars=no");
return false;
});
Share Dialog without requiring Facebook login
You can Trigger a Share Dialog using the FB.ui function with the share method parameter to share a link. This dialog is available in the Facebook SDKs for JavaScript, iOS, and Android by performing a full redirect to a URL.
You can trigger this call:
FB.ui({
method: 'share',
href: 'https://developers.facebook.com/docs/', // Link to share
}, function(response){});
You can also include open graph meta tags on the page at this URL to customise the story that is shared back to Facebook.
Note that response.error_message will appear only if someone using your app has authenticated your app with Facebook Login.
Also you can directly share link with call by having Javascript Facebook SDK.
https://www.facebook.com/dialog/share&app_id=145634995501895&display=popup&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer
https://www.facebook.com/dialog/share&app_id={APP_ID}&display=popup&href={LINK_TO_SHARE}&redirect_uri={REDIRECT_AFTER_SHARE}
app_id => Your app's unique identifier. (Required.)
redirect_uri => The URL to redirect to after a person clicks a button on the dialog. Required when using URL redirection.
display => Determines how the dialog is rendered.
If you are using the URL redirect dialog implementation, then this will be a full page display, shown within Facebook.com. This display type is called page.
If you are using one of our iOS or Android SDKs to invoke the dialog, this is automatically specified and chooses an appropriate display type for the device.
If you are using the Facebook SDK for JavaScript, this will default to a modal iframe type for people logged into your app or async when using within a game on Facebook.com, and a popup window for everyone else. You can also force the popup or page types when using the Facebook SDK for JavaScript, if necessary.
Mobile web apps will always default to the touch display type.
share Parameters
href => The link attached to this post. Required when using method share. Include open graph meta tags in the page at this URL to customize the story that is shared.
For your own specific server or different pages & image button you could use something like this (PHP only)
<img src="http://i.stack.imgur.com/rffGp.png" />
I cannot share the snippet with this but you will get the idea...
This Facebook page has a simple tool to create various share buttons.
For example, this is some output I got:
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v8.0" nonce="dilSYGI6"></script>
<div class="fb-share-button" data-href="https://www.mocacleveland.org/exhibitions/lee-mingwei-you-are-not-stranger" data-layout="button" data-size="small">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.mocacleveland.org%2Fexhibitions%2Flee-mingwei-you-are-not-stranger&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a>
</div>

How do Facebook and Quora return JavaScript on Ajax responses? How do they handle the responses?

I have been noticed that some new websites are returning javascript on their ajax responses with the html and other stuff. For example, when want to send message from facebook, a popup appears, inputs and other elements get binded with events when submit, hover etc.. Quora the same thing.
Has it advantage doing this way?
You can watch with inspector (of course) but I'm putting a response example:
HeadersContentCookiesTiming {
"value": {
"html": "<div class=\"dialog_tabs\"><a class=\"tab\" group=\"__w2_PHfxEJe_tabs\"
href=\"#\" show=\"signup\" id=\"__w2_PHfxEJe_signup_select\"><span class=\"no_icon
signup\">Create an Account</span></a><a class=\"tab\" group=\"__w2_PHfxEJe_tabs\"
href=\"#\" show=\"login\" id=\"__w2_PHfxEJe_login_select\"><span class=\"no_icon
login\">Login</span></a></div><div group=\"__w2_PHfxEJe_contents\"
id=\"__w2_PHfxEJe_signup\"><div class=\"row live_login_signup_form\"><div class=\"row
p0_5\">Sorry, you must have an invitation to create an account on Quora.</div></div></div><div class=\"hidden\" group=\"__w2_PHfxEJe_contents\" id=\"__w2_PHfxEJe_login\"><div class=\"row form_row\" id=\"__w2_PHfxEJe_inline_login\"><div id=\"ld_LIJSXr_1\"><div id=\"__w2_b5Jr0f0_associated\"><div id=\"ld_LIJSXr_2\"></div></div><div class=\"w3_5 p1\"><form class=\"row w2_5 col inline_login_form\" method=\"POST\" id=\"__w2_b5Jr0f0_login_form\"><div class=\"form_inputs\"><div class=\"form_row\"><label for=\"__w2_b5Jr0f0_email\">Email Address</label><input class=\"text\" group=\"__w2_b5Jr0f0_interaction\" type=\"text\" name=\"email\" w2cid=\"b5Jr0f0\" id=\"__w2_b5Jr0f0_email\" /><p class=\"hidden input_validation_error_text\" id=\"__w2_b5Jr0f0_email_not_confirmed_error\">You need to confirm your email address\n before you can login. <br /><a hred=\"#\" id=\"__w2_b5Jr0f0_resend_confirmation\">Resend Confirmation Link</a></p><span class=\"hidden input_validation_error_text\" id=\"__w2_b5Jr0f0_email_not_found_error\">No account matching that email address was found.</span></div><div class=\"form_row\"><label for=\"__w2_b5Jr0f0_password\">Password</label><input class=\"text\" group=\"__w2_b5Jr0f0_interaction\" type=\"password\" name=\"password\" w2cid=\"b5Jr0f0\" id=\"__w2_b5Jr0f0_password\" /><span class=\"hidden input_validation_error_text\" id=\"__w2_b5Jr0f0_incorrect_password_error\">Incorrect password. Reset Password</span></div></div><div class=\"form_buttons p1\"><input class=\"col p0_5\" group=\"__w2_b5Jr0f0_interaction\" type=\"checkbox\" checked=\"checked\" name=\"allow_passwordless\" value=\"allow_passwordless\" w2cid=\"b5Jr0f0\" id=\"__w2_b5Jr0f0_allow_passwordless\" /><label class=\"login_option\" for=\"__w2_b5Jr0f0_allow_passwordless\">Let me login without a password on this browser</label><input class=\"submit_button\" group=\"__w2_b5Jr0f0_interaction\" type=\"submit\" value=\"Login\" w2cid=\"b5Jr0f0\" id=\"__w2_b5Jr0f0_submit_button\" /></div></form><div class=\"hidden e_col inline_login_preview_box\" id=\"__w2_b5Jr0f0_preview\"><img id=\"__w2_b5Jr0f0_pic\" /><br /><span id=\"__w2_b5Jr0f0_name\"></span></div></div></div></div></div>",
"css": "",
"js": "W2.addComponentMetadata({parents: {\"b5Jr0f0\": \"PHfxEJe\",
\"PHfxEJe\": \"*dialog*_1\", \"NqeVUG8\": \"b5Jr0f0\"}, children: {}, knowsAbout:
{\"b5Jr0f0\": {\"inline_login\": \".\"}, \"PHfxEJe\": {\"signup_form\": \"signup_form\"}},
groups: {\"__w2_PHfxEJe_contents\": [\"__w2_PHfxEJe_signup\", \"__w2_PHfxEJe_login\"],
\"__w2_b5Jr0f0_interaction\": [\"__w2_b5Jr0f0_email\", \"__w2_b5Jr0f0_password\",
\"__w2_b5Jr0f0_allow_passwordless\", \"__w2_b5Jr0f0_submit_button\"],
\"__w2_PHfxEJe_tabs\": [\"__w2_PHfxEJe_signup_select\", \"__w2_PHfxEJe_login_select\"]},
domids: {\"b5Jr0f0\": \"ld_LIJSXr_1\", \"NqeVUG8\": \"ld_LIJSXr_2\"}});var _components =
[new(LiveLoginDialog)(\"PHfxEJe\",\"\",{\"default_tab\": \"signup\", \"autostart\":
null},\"cls:a.app.view.login:LiveLoginDialog:OuWttII3ndCni7\",{}), new(InlineLogin)
(\"b5Jr0f0\",\"\",{},\"live:ld_LIJSXr_1:cls:a.app.view.login:InlineLogin:zLqmkvFx8WJgk2\",
{})];W2.registerComponents(_components);W2.onLoad(_components, false);"
},
"pmsg": null
}
Makinde from Facebook talks about this approach in this video and explains the benefits:
http://www.facebook.com/video/video.php?v=596368660334&oid=9445547199
In summary:
At Facebook, they reached a point where they had 1M of javascript and it made the site slow and was a nightmare to maintain. They found out that the majority of use cases were about sending a request to the server and rendering different HTML. So by pushing the business logic to the server and letting it return the html to be rendered, they managed to remove a huge amount of javascript and make the site faster. It turns out that returning HTML in the response doesn't add too much delay over returning only the json and using javascript to render it. A lot more details in the video, though. I'm working on a library that does some of that and using it in my own projects now.
its pretty simple on how to handle javascript through ajax.. they will probably use some code like this to append the js code to the dom:
var d =
document.getElementById('divContents').getElements ByTagName("script")
var t = d.length
for (var x=0;x<t;x++){
var newScript = document.createElement('script');
newScript.type = "text/javascript";
newScript.text = d[x].text; //will refer to the js property of the json
document.getElementById('divContents').appendChild (newScript);
regarding why they do it probably send in sm script content that they thought wasnt initially required by the user but when he performs some action like say he fails to authenticate himself probably they might send in sm javascript code that will be responsible for generating a Register new account markup and also add some validation rules with it..
Thus loading script on the client side may be smthing that is done when they dynamically need to insert some script.

Categories