Display content after clicking Facebook Like button - facebook-like

I have a section of a webpage that I only want people to be able to access after clicking a Facebook Like button.
How do I hide that particular area and then display it only after someone clicks the Like button.
As for the Facebook Like code it looks like this:
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="www.oursite.com" show_faces="false" width="330" font="verdana"></fb:like>
<div id="hidden-area">Hidden Content</div>

Use 'edge.create':
http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe
really simple... can even couple it with jQuery.
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo $facebook->getAppId(); ?>',
session : <?php echo json_encode($session); ?>, // don't refetch the session when PHP already has it
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// whenever the user logs in, we refresh the page
FB.Event.subscribe('auth.login', function() {
window.location.reload();
});
FB.Event.subscribe('edge.create', function(response) {
$.get('URLlink?uid=' + <?php echo $uid; ?>, function(data) {
$('#id').html(data);
});
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

I'm not quite sure if this works.
Remembering the f8 introduction of the like button facebook don't let website owners see who liked their page.
The like button is rendered client side from the java script file hosted on facebook.
I'm not a super java script expert, but I don't know a way to get variables from external java script files.
The only idea I have is when a user made his likes public. You probably could read the cookie and then look up his likes on his public facebook page.
As facebook loads most of it's content dynamically you can revers engineer the java script functions used on the public page by facebook internally, even if they are not part of the official API

Another way is the plugin Like 2 Unlock for jQuery
It allows to lock discounts, videos, download links, images, bonus content, forms and more. It’ll help you to increase the number of likes, to get additional traffic and more customers from the social network.

Related

Sitecore Controller rendering not able to load the view on postback

I am working on Sitecore MVC controller. I have created a controller “EventController” that have two actions “AllEvents” and [HttpPost] “SelectedYear” , one view “\Views\Event\AllEvents.cshtml”
“AllEvents” is attached with Sitecore controller rendering when I do publish preview from the content item page is loading with data and there is no problem. “All Events” page have a dropdown
When I click on selected year the post back is going but the view is not loading as required and losing the RenderingContext also. The url is going to hit http://testPage/api/Event/SelectedYear and image and css are not loading but data is there.
Below I have shared the sample code.
Please help me to fix the issue.
AllEvents.cshtml
<div>
#using (Html.BeginForm("SelectedYear", "Event", FormMethod.Post, new { id = "TheForm"}))
{
#Html.DropDownListFor(model => model.SelectedYear, Model.mapLocationItemTypes, "-- Select Status --", new { id = "CategoryID" })
}
</div>
SelectedYear Action
[HttpPost]
public ActionResult SelectedYear()
return View(eventCalender);
<script type="text/javascript">
$(function () {
alert("HSecond")
$("#CategoryID").change(function () {
$('#TheForm').submit();
});
});
</script>
RouteConfig
routes.MapRoute(
name: "Default",
url: "api/{controller}/{action}/{id}",
defaults: new { controller = "home", action = "index", id = UrlParameter.Optional }
In your Html.BeginForm() you specify the controller and the action to post to. But in fact, you want to post to the same Url, load the same Item and call the [HttpPost] action instead. This is a little different between ASP.net MVC and Sitecore MVC. I've written a blog post on how to handle form posts with Sitecore MVC:
http://ctor.io/posting-forms-in-sitecore-controller-renderings-another-perspective/
Also I had a presentation about Sitecore MVC at the SUGCON this year where posting forms was a topic. You may also want to look at the slides or the screencast

using a famo.us surface to link to another URL

Seems like this should be obvious but...How can you use a famo.us surface as a link to another webpage?
I've tried:
this.fooSurface.on("click", function(){
window.location.replace("www.foo.com");
});
but this doesn't replace the URL, it just puts the new URL on the end of the address currently in the URL bar. window.location.href = "www.foo.com" has the same result.
EDIT: window.location.assign("www.foo.com") and window.location = ("foo") also have the same result. I think this has something to do with this script in the boilerplate index.html:
<script type="text/javascript">
require.config({baseUrl: 'src/'});
require(['main']);
</script>
Use window.location.assign("http://www.foo.com"); instead.
I probably wouldn't use the replace() method personally, as replace() switches the current page's place in the document history with that of the one you provide to the method, which I can't say I've ever found beneficial as a user unless there's a blank intermediary login page or something very specific (and temporary).
Or you can even just use window.location = "http://www.foo.com";
https://developer.mozilla.org/en-US/docs/Web/API/Window.location
I was able to get things working just fine with the boilerplate generator-famous gives you.
The script tag has nothing to do with it. That's configuration for RequireJS to load in the famo.us library with AMD.
var logo = new ImageSurface({
size: [200, 200],
content: '/content/images/famous_logo.png',
classes: ['backfaceVisibility']
});
logo.on('click', function() {
window.location.href ='http://www.google.com';
});
This problem you're having is also not a famo.us problem. It's your Javascript...

How to redirect whole page when remote posts to iframe in Django

I am working on using Paypal payments advanced embedded / hosted checkout pages in my django site. I display an iframe for the paypal payment page, I submit the request, and it posts back to my site.
The view that handles the paypal response uses
response = redirect("shop_complete")
return response
but this makes my whole response page pop up in the iframe. I could just use a template that would look all right in that spot, but I would like to update the cart and the payment step at the same time. Is there anyway to make that response redirect the whole browser instead of just the frame?
So, my solution wound up being to add an intermediary page that consist entirely of a script to redirect the top level of the browser. I got this script from
JavaScript post request like a form submit
<body>
<script type="text/javascript">
function post_to_url(path, params, method) {
method = method || "post"; // Set method to post by default if not specified.
// The rest of this code assumes you are not using a library.
// It can be made less wordy if you use one.
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);
form.setAttribute("target", "_top" )
for(var key in params) {
if(params.hasOwnProperty(key)) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);
form.appendChild(hiddenField);
}
}
document.body.appendChild(form);
form.submit();
};
window.onload = post_to_url('{% url "shop_paypal_redirect" %}',
{csrfmiddlewaretoken: '{{ csrf_token }}',
result: '{{ result }}'});
</script>
</body>

How to make the Opencart mini cart close when touched by iPhone/iPad user

I am making a responsive theme for opencart. When in iPhone view I can click on the cart and the contents drop down and show what is in the cart. The problem I am having is that I can't get the cart to close again so it stays open and in the way.
I managed to get it to work by changing 'mouseleave' to 'click' but it only works once, I then have to refresh the page to get it to work again. I'm sure this is very simple for someone.
Here is the code;
/* Ajax Cart */
$('#cart > .heading a').live('click', function() {
$('#cart').addClass('active');
$('#cart').load('index.php?route=module/cart #cart > *');
$('#cart').live('mouseleave', function() {
$(this).removeClass('active');
});
});
Any ideas?
Thanks in advance.
I put something along the lines of this code above your pasted code in common.js to fix this issue.
$('html').on('touchend.tap', function(){
if ($('#cart').hasClass('active')){
$('#cart').removeClass('active')
}
});
$('div#cart').on('touchend.tap', function(e){
e.stopPropagation();
});
This allows the links to function within the minicart

Remember preferable language

I've made a simple website for my daughter.
It is in Dutch and for every page there is a English version as well.
Dutch URL: nl/index.html
English URL: eng/index.html
What I would like to do is give the visitor the option to set one language as preference. So if they come to this site the next time they will automatically linked to the preferable page.
I know this can be done with a cookie and saw the explanation on this forum ( How to remember the currently clicked url? javascript?PHP? ).
I've tried to make this work but apparently I am doing something wrong?
Can somebody guide me through step by step? That would be great!
Kind regards,
Jurgen
If you are familiar with jQuery you can use the cookies plug-in to persist the user's language choice and redirect him to the appropriate page every time he comes back to your site. Bellow is a sample code that uses two buttons to set the language:
First you declare the jQuery scripts (I use to store them in a Script folder, hence the following):
<script type="text/javascript" src="../Script/jquery-1.7.2.js"></script>
<script type="text/javascript" src="../Script/jquery.cookie.js"></script>
Then you define the page ready event like this:
$(function () {
var url = 'your_url';
var english_page = 'eng/index.html';
var dutch_page = 'nl/index.html';
if ($.cookie('default_page') != null) {
if (window.location.href != url + '/' + $.cookie('default_page')) {
window.location.href = url + '/' + $.cookie('default_page');
}
}
$('#set_english_butt').click(function () {
$.cookie('default_page', english_page, { expires: 999 });
alert('English was set as the default language');
});
$('#set_dutch_butt').click(function () {
$.cookie('default_page', dutch_page, { expires: 999 });
alert('Dutch was set as the default language');
});
});
Which is hooked to some html buttons in you page:
<div>
<span>Select your language:</span>
<button id="set_english_butt">English</button>
<button id="set_dutch_butt">Dutch</button>
</div>