I have a local host application in which a user can enter a blog to website by logging in and anyone can read the contents of the blog. while creating the blog the application auto generates a url based on the name of the blog. The URL is a basically a string e.g. Name: "New Blog" URL: "New-Blog".
Now when a person views the blog i want to give him the ability to share the blog on his Facebook account. So i used a Facebook code generator to ge teh code for the share button.
<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 = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v3.2';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-share-button" data-href="http://localhost/Blog/{{BlogList.Url}}" data-layout="button" data-size="large" data-mobile-iframe="false"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse" class="fb-xfbml-parse-ignore"></a></div>
This was the code that was generated. Now i realize that this is not going to work with the url i am passing: http://localhost/Blog/{{BlogList.Url}}
Now what url should i use to be able to share this on facebook while also get the url name that was auto generated.
The URL must be absolute, and it must be public:
http://yourdomain/Blog/xxx
You need to replace localhost with your domain, and you may want to use https instead of http. You should not use http anymore, but that is just a side note.
Related
Using the iOS Facebook Messenger App on my iPad, I'm building a bot that will send a user a media player link.
After the user has clicked the link, it opens the link inline, inside the Facebook Messenger App (at least this is the iPad behavior). At the end of the media playback, I'd like to automatically close the inline browser window and return the user to the current conversation.
When I try to and do window.close() that is not closing the inline browser window that is opened within iPad Facebook Messenger. Is there any other way to close the Facebook browser window?
Widely Supported
Facebook Messenger Extension close method is the most compatible way to do it. On mobile it closes the webview, on desktop it will close the tab (webviews open in new tabs on desktop messenger).
First, whitelist your domain to be able to use Messenger Extensions, use the access token for your app. Use the page_access_token you generated for your bot.
curl -X POST -H "Content-Type: application/json" -d '{
"whitelisted_domains":[
"https://petersfancyapparel.com"
]
}' "https://graph.facebook.com/v2.6/me/messenger_profile?access_token=PAGE_ACCESS_TOKEN"
Load the Messenger SDK on your webview page with the video
<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.com/en_US/messenger.Extensions.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'Messenger'));
</script>
Then add an event listener to the video element to call the close browser function
<video src="video.ogv" id="myVideo">
video not supported
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
MessengerExtensions.requestCloseBrowser(function success() {
}, function error(err) {
});
}
</script>
iOS Only
Quick and dirty ios only way is to do a redirect to to https://www.messenger.com/closeWindow/?image_url=IMAGE_URL&display_text=DISPLAY_TEXT which shows the specified image and text briefly before the window closes. Docs on this
For that you would do
window.replace('https://www.messenger.com/closeWindow/?image_url=IMAGE_URL&display_text=DISPLAY_TEXT')
I've got an odd issue that I cannot figure out. When using Twitter and Google+ share buttons, it shares the correct page title, but also gives a completely wrong URL.
What's even more weird is that it is using a URL from another website of mine, completely unrelated!
These are the buttons:
<li>Tweet</li>
<li><div class="g-plusone" data-size="medium" data-annotation="inline"></div></li>
Here is the javascript that powers them:
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
I've made sure to be logged into the right account when grabbing the code for the buttons.
I don't get it!
ps. It is being done within my own Wordpress Template if that helps, but I've done this before with no problems.
Make sure you don't have a rel=canonical link on your page pointing to a different URL. Perhaps another plugin is outputting it?
and thanks for taking a moment,
I have gone to the twitter site and created an embedded timeline per their instructions.
if I place the generated code on a simple html page on my desktop, all works as expected. When I place the same code inside my SPA application, i only get a 'follow me' link on the site. The SPA application is built on the John Papa example.
There are no javascript errors thrown. I'm guessing that the heart of the issue may have something to do with the routing, b/c if I navigate directly to the page where I've embedded my timeline, the code works as expected.
i.e. http://localhost:50000/App/views/shared/pillar.html
However, I also have a google calendar widget, and that works as expected.
Tested this in Chrome, FF, IE. Behavior is the same.
Any thoughts on how I might diagnose this further? Or is my approach totally wrong? I'm just looking to add the latest n-number of tweets to what is basically a blog. Nothing too fancy.
<a class="twitter-timeline" href="https://twitter.com/PoundingCode" data-widget-id="313336765203218432">Tweets by #PoundingCode</a>
<script>!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);
js.id=id;js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}
(document,"script","twitter-wjs");
I figured out a solution, but rather than take this down, I hope it might help the next person:
Put the twitter widget code into a new html document.
Have that document take in a querystring called handle
Have that html document parse the querystring and inject it.
Create an iframe bound to an observable that has your twitter handle, passing in that handle as your querystring parameter.
the iFrame data-binding:
iframe data-bind="with: twitter, attr: { src: '../App/views/shared/twitter.html?handle=' + twitter() }" style="height:622px;" seamless="seamless"
The twitter page
<body>
<a class="twitter-timeline" href="https://twitter.com/" + get('handle') data-widget-id="313336765203218432" ></a>
<script>
function get(name) {
if (name = (new RegExp('[?&]' + encodeURIComponent(name) + '=([^&]*)')).exec(location.search))
return decodeURIComponent(name[1]);
}
!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s); js.id = id;
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");</script>
</body>
The Twitter script only checks the DOM once after being loaded. An SPA changes the DOM dynamically, so you have to tell the Twitter script to scan the DOM again:
const twttr = window.twttr
twttr.widgets.load()
If the script was loaded already (usually https://platform.twitter.com/widgets.js), then the twttr object is available in the global namespace.
Here is the relevant documentation: https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/guides/scripting-loading-and-initialization
I'm using Rails 3.0.9.
Trying to login to my (localhost) site through Facebook.
My init params on the login page:
FB.init({
appId : '<%= FB_APP_ID %>',
status : true,
cookie : true,
xfbml : true
});
The login button works, I get the Facebook login popup and I can successfully log in to Facebook.
Then the following event is reached:
FB.Event.subscribe('auth.sessionChange', function(response) {
if (response.session) {location.href= ...}
And I'm being redirected to the wanted location.
But - can't get any cookies of "fbs_" or "fbsr_" like the Oauth is looking for at: get_user_info_from_cookie(cookies)
My cookies = {}, nothing there.
In a few occasions, I recall I did have some facebook cookies there, I can't reconstruct such case, but anyway, it didn't include the "fbs_" ones, only others.
Also, after logging in, when I go back to Facebook tab on the browser and refresh, it does show me my Facebook page, but after a second, it shows a popup says "you need to log in". In my app though, it still knows to keep directing me to the wanted href, like needed when a user is logged in.
I would really love to hear if you have anything that can help me... :-)
Thanks,
Moozly.
Just got the scenario with some Facebook cookies again (still not by the wanted names). Got the following names: "datr", "locale", "locale", "reg_fb_gate", "lu".
But even to these I can't get to with the Rails cookies param - cookies["dart"] returns null.
cookies param only shows the cookies with the host of localhost (which contains data when I'm logging in (with Clearance) - the regular login procedure to site.
Just wanted to update to say that I had solved my problem:
I had added to the init the param: oauth : true:
FB.init({
appId : '<%= FB_APP_ID %>',
status : true,
cookie : true,
xfbml : true,
oauth : true
});
Apparently, there is a bug with adding the parameters added in
js.src, so I removed them(!) and problem was solved:
(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" //removed: #xfbml=1&appId=<%= FB_APP_ID %>";
fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));
That solved the cookies problem for me!
if you want to use localhost for facebook development, add "127.0.0.1 localhost.local" record to your /etc/hosts file, change domain in application settings in developers.facebook.com and point browser to this url - it works flawlessly
Having some trouble getting the link back to the page from a posted FB Comment plugin to work. Here is my situation:
Setup Comments plugin using HTML5 code snippet provided by FB.
Page renders correctly with FB Comments plugin showing.
I'm able to successfully post a comment using the plugin.
The submitted comment properly displays on my FB Wall. However, when I click on the link to be taken to the commented article I am led to the page properly, but my FB comment is missing from the plugin section.
In other words, if I go to a URL like below I can post my FB comment and refresh the page and the comment appears:
http://www.foo.com/bar/
However, when clicking on the post from my FB Wall I am led to a URL like below which shows the plugin area with no posts:
http://www.foo.com/bar/?fb_comment_id=fbc_10150317957204611_18871330_10150317957674611#f14f0016ac
My code snippet for the page with the plugin looks something like this:
<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>
<div class="fb-comments" data-href="http://www.foo.com/bar/" data-num-posts="2" data-width="668" style="margin-top: 10px;"></div>
The problem might be on how you get the url you feed fb-comments (http://foo.com/bar/)
DO NOT use data-href="< ?php echo $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"]; ?> to get the url. For some reason Facebook's new comment id parameter doesn't work with that.
If you get the url from a local function such as data-href="<?php echo get_post_permalink() ?>" it works! And when you click the post from FB wall, it takes you to that exact comment