Facebook social plugin localisation - localization

As instructed on the FB Developer site, I've integrated the social comments plugin on our website and changed the lang parameter to Dutch. However this does not seem to affect the interface. The plugin is still in English.
<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/nl_BE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Example:
http://www.miramiro.be/nl/festival/programma/die-verdammte-fanfare-cabrio
Anyone an idea?
Many tnx
Gino

Visit Facebook Developer page and go to edit the App Settings. In there, select the app you wish to edit and visit the 'AppDetails' tab. In there, change your primary language to Dutch and it should work.

Related

Twitter Video Embed auto play

I have looked through certain resources on the stack over flows but some doesn't have answer nor they are inactive.
I will want to autoplay a twitter video when some arrives on my website.
Currently It looks like this:
I was able to do Youtube, so believe this should be possible also?
Note: The solution below does not work anymore out of the box due to new CORS policies of the browsers.
The twitter widget script seems to inject the player after clicking the image into an iframe, but the link to click is... embedded in an iframe. So when you see on your screen the "player" to click, it is in fact not the player but just a link to activate the injection of the player.
So your goal is to activate this injection by the following steps:
set up a target listener for the widget factory
get the widget element, once it's added to the DOM (but after it has been altered by the widget factory)
get it's iframe document's link that triggers the embedding of the player
Set up Twitter for websites
Prepare your page according to the following documentation:
<div id="videoTarget"></div>
<!--<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>-->
<script>
window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
</script>
Our factory target will be the videoTarget. This is the place, where the iframe with the video injection link will be placed.
Create the embed link
First wait for the twttr to be ready. Read more in this in the scripting events.
Then use the factory function to create your video.
Once it's loaded, you can use jQuery to find the iframe content's link, that triggers the injection.
Code:
window.twttr.ready(function(_twttr) {
_twttr.widgets.createVideo(
'560070183650213889',
$('#videoTarget').get(0), {
lang: "en",
}
)
.then(function(el) {
const dataId = $(el).attr('data-tweet-id');
const doc = $('iframe').get(0).contentWindow.document;
const link = $(doc).find("a[href*=" + dataId + "]")[0];
link.click();
});
});
Working solution: https://jsfiddle.net/5qmh1Lpn/121/
Summary
Twitters video embed lacks of proper ways to do autoplay. However, it is IMHO an antifeature and it should be the user's decision, wether to play a video or not.
The solution is only a hack and may not work on all browsers in all situations.
Please create a fork, if you want to extend the fiddle to your needs.
Edit: Just for your interest, I found a hidden link with cookie consent in this code, which basically breaks down to "if you click this you agree to our policies" which is very strange, since nobody can't see this message as it's hidden.
Thanks to:
https://stackoverflow.com/a/2893315/3098783
https://stackoverflow.com/a/303961/3098783

Route to different View(use #Html.ActionLink and ng-view in View) in Asp.Net MVC with AngularJS, ng-view only work one time, location url strange

In my case, I need use #Html.ActionLink to Route to different View with AngularJS.In each view1/index.cshtml in asp.net has <div ng-view></div> that will load its html template.
the following link image is my project structure:
click
My problem is: it only route success first time.I think it cause wrong location url.
Views/Share/_Layout.cshtml:
<ul>
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("Device Management", "Index", "DeviceManagement")</li>
</ul>
Views/Home/index.cshtml:
#{
ViewBag.Title = "Home Page";
ViewBag.InitModule = "homeIndex";
}
#section Scripts {
<script src="~/app/home/homeIndex.js"></script>
}
<div ng-view><div>
app/home/homeIndex.js
var homeIndex = angular.module('homeIndex', ["ngRoute"]);
homeIndex.config(["$routeProvider", function($routeProvider){
$routeProvider
.when("/home",{
templateUrl:"app/home/homeIndex.html",
controller:"homeCtrl"
})
.otherwise({
redirectTo:"/home"
});
}]);
app/home/homeIndex.html
HOME2
app/deviceManagement/deviceManageIndex.js
var deviceManageIndex = angular.module('deviceManageIndex', ["ngRoute"]);
deviceManageIndex.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when("/device", {
templateUrl: "app/deviceManagement/deviceManagementIndex.html",
controller: "deviceManageCtrl"
})
.otherwise({
redirectTo:"/device"
});
}]);
the web site has sidebar, Home and Device Management Buttons in the sidebar.
when I click Home, it will redirect right location, it can load homeIndex.html successful:
location is:
http://localhost:13060/#/home
but when I click Home Button second time, it can't load homeIndex.html anymore.
location will change to:
http://localhost:13060/#
the same problem is happened in another Button Device Management
when I click Device Management, it will redirect right location, it can load deviceManagementIndex.html successful:
location is:
http://localhost:13060/DeviceManagement#/device
but when I click Device Management Button second time, it can't load deviceManagementIndex.html anymore.
location will change to:
http://localhost:13060/DeviceManagement#
I think the location is quite strange,in first time,it should be :
http://localhost:13060/DeviceManagement/#/device
I guess that is main reason not to load html template correctly...
But why the location url can't show correctly, Please Help me solve the headache problem....
Thanks to Shawn tip!In my case, I should use angular routing in client side, $routeProvider with templateUrl to trigger servier side controller to load server side View,That's I found solution, in this way actionlink behavior could through server side, it will follow server side route rule to chose appropriate View. It shoud be work...:D

Ruby on Rails: simple share button and pop-up window

I want to simple share button on my page, which after clicked open pop-up window to share the current url.
I try to do it using facebook developers code (from official site)
https://developers.facebook.com/docs/plugins/share-button
but when I add ruby variable request.url (but with data-href="http://myweb.com" it works)
<div class="fb-share-button" data-href="#{request.url}"></div>
<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/pl_PL/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
it doesn't work - I have the window below
How can I do it correctly ?
Are you trying to open up the share button in a new window? Are you also using the correct variable for that model you have it in?
Try switching it to this since I'm assuming you're using erb
<div class="fb-share-button" data-href="<%= request.url %>"></div>

How to get OAuth working on MVC4 mobile

I have been struggling to get OAuth to work on my MVC4 mobile application.
I basically
Created an MVC4 Mobile application
Created an MVC4 Web application
Copied the AccountController, AccountModel, InitializeSimpleMembershipAttribute and all account views into my MVC4 Mobile application
Enabled Google and Facebook OAuth providers
I also ensured RoleManager was initialized according to simplemembershipprovider-not-working, although I do not think that was important. ( I needed it for some role-based security I was testing)
Disabled ajax ( I think) by setting data-ajax="false":
using (Html.BeginForm("ExternalLogin", "Account",new RouteValueDictionary { { "ReturnUrl", ViewBag.ReturnUrl } }, FormMethod.Post, new Dictionary<string, object> { { "data-ajax", false } })) (This did not seem to have any effect on the page - so I may be doing something wrong here...)
I can get to the LogIn view /Account/Login, and when I click the google button, the debugger breaks into public ActionResult ExternalLogin(string provider, string returnUrl)
However - the public ActionResult ExternalLoginCallback(string returnUrl) is never hit.
Visually, I get the jquery mobile "page loading" animation - then I get "Error Loading Page"
I have two questions:
How can I get more information when I try to figure out what happens?
How can I get OAuth working on my MVC4 mobile site?
BTW: Both sites target .Net4.0
OK - so I figured out the answer - the cuplrit was indeed the ajax in jQuery mobile.
I modified my _layout.cshtml so that it can render a custom script after loading jQuery, but before loading jQuery mobile:
#Scripts.Render("~/bundles/jquery","~/scripts/RemoveHashFromWindowLocation")
#RenderSection("beforeJqueryMobile", required: false);
#Scripts.Render( "~/bundles/jquerymobile")
#RenderSection("scripts", required: false)
Then I modified my Login.cshtml so that it contains the section:
#section BeforeJqueryMobile {
#Scripts.Render("~/scripts/disable-ajax.js")
}
And finally, I added the following to my scripts folder:
disable-ajax.js:
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
RemoveHashFromWindowLocation.js: (Thanks to Facebook Oauth Login With Jquery Mobile #_=_)
if (window.location.hash == "#_=_")
window.location.hash = "";
Voila - OAuth working with jQuery mobile. :-)
The above answer from espenalb does work if your site loads directly to the login page, however if you have say a home page and then and a link to the login page(which uses the same layout), you will get an error loading page when you click one of the social login buttons.
To fix this add
<script>
$('#login-link').live("click", function () {
$.mobile.ajaxEnabled = false;
});
</script>
to the bottom of your mobile layout page, this will attach an event handler that will disable ajax to the login link.

Conditional initial page in jquery mobile

I'm using jQuery mobile with PhoneGap, and would like to show a login page the first time the app is used, and show the index page on subsequent loads.
My current solution is to use the following on deviceready
if(!localStorage.registered){
$.mobile.changePage( "#login", { transition: "none"} );
}
However, my issue with this is that you still see the page transition. I would like the login page to be the first page that is visible.
Any advice? Thanks!
This Q is a few months old, it remains unanswered, I don't have any experience with phone gap but I do jQM, so I figured this may help.
I current employ a solution to this on my app by delaying auto initialisation of jQM.
This is an example of how you could based loosely on how my application does it.
(function() {
#stop jQM from auto initialising
$(document).on("mobileinit",function() {
$.mobile.autoInitializePage = false;
});
var my_app = new MyApp();
# custom afterinit event is triggered on the app instance
$(my_app).on('afterinit',function() {
var initial = 'login';
if(localStorage.registered) {
initial = 'home';
}
# set the page hash to our start page
window.location.hash = initial;
#initialise jQM
$.mobile.initializePage();
});
})();
Make sure you secure the thing that decides if login is allowed, in my application I have a data structure that is required by the app ajax in to MyApp.appdata it will only be there if login was actually successful.
Another solution may be to have a proxy page.
A different approach that I employed on another app.
An initial "loading" step, which is just a dummy page.
Make a page in your doc as the first page, eg.
<div id="loading" data-role="page">Loading</div>
in the mobileinit step bind to the pageshow event.
$(document).on("mobileinit",function() {
$('#loading').on('pageshow',function() {
# ...
# do login check here
# ...
var initial = 'login';
if(localStorage.registered) {
initial = 'home';
}
# change to our initial page
$.mobile.changePage(initial);
});
});
What about hiding #registration and #login then do:
if(localStorage.registered){
$('#login').show();
} else {
$('#registration').show();
}

Resources