How to add a facebook-like button in a responsive website? - facebook-like

I am working on a new version of our website, based on a commercial framework (Aspdotnetstorefront) with a responsive template.
We have a few pages where we want to include a Facebook "like button". I tried to use the same code we have in our current site in the new responsive version but it's ruining the design (its width disregards the limit of the device screen size and so the contents of the whole page is cut).
The code we have is the one auto generated by the Facebook developers page (it creates a class called 'fb-root').
I checked the Facebook developers page and the solution they offer is still the old one I have, or in other words, completely useless.
I would like to know if there is any available version that WORKS.
Thank you!
PS: This "facebook like button" RIGHT BELOW is exactly what I need as it seems to work very responsively.

Related

How to better manage versions in Sitecore Page Editor

The way that Page Editor handles versions has been causing issues for in one of our Sitecore solutions for a client. I've posted about them here:
Sitecore instance showing incorrect workflow state in Page Editor
Expected usage of Page Editor's Experience date
I didn't get much response on those and so far I've surmised that this is just how Sitecore works. This is less than ideal for our instance, as when publishing restrictions are set, authors don't know which version they're editing which is causing various issues for them.
I'd like to implement a solution(s) to improve the experience provide the following functionality:
Something in the Experience tab that shows the number of the version being viewed.
A button on the Experience tab that resets the Date to the default (this is not simply setting the date to the current date/time, but resetting it to act as it did before a date was manually set).
A custom button in Content Editor which allows an author to open a specific version in Page Editor...set the date automatically when it opens, I guess.
An any one give me some clues on how much of this is possible and where to start?
Thanks.
For the first bullet "Something in the Experience tab that shows the number of the version being viewed", you can add version item in Core database.
Move to "Core" DB in Desktop Mode
Navigate to "/sitecore/content/Applications/WebEdit/Ribbons/WebEdit/Experience/"
Create "Versions" item like this, http://imgur.com/bPEDm7R
Create "Compare" item under "Versions" like this, http://imgur.com/dG8dz2M
The result like this, http://imgur.com/HPu3XAL
The content author can see which version they are using and they can also compare with previous versions.

Opencart different .TPL for the Home Page

I have a doubt and not really sure about how is the best approach, I have a client with a website based on opencart with really bad practices on it, for example, all products are manually placed in the home page instead to be using the CMS capabilities of OC, right now the way it works is, if you are using a computer, full browser, the site displays the full version of the site, but if you are using an ipad or iphone/android device then loads the "small" version, both versions are placed manually in the same home.tpl document and they appear/disappear by some CSS. The question is, the client doesn't want to change the way the home page is designed, so instead to be loading that enormity of code is there a way to have a different tpl for the small version? for example a home.tpl version with the code for the full version and home-mobile.tpl for the small one? how this should work? How the system should determine the screen size and point to a TPL or other TPL?
I know it's a weird request but the client is "happy" with how the site looks like and don't want to change the manual code used on the home page.
CSS is the correct way to handle the resizing and restructuring of the same content on different screens. If you want a vastly different homepage for mobile users, with different content, there are a couple of ways to do it:
Detect the browser using JS and redirect to a mobile-only page. This would probably involve copying your current home controller (and template etc.) to a new file, or using a GET variable to switch templates further down the code.
Detect the browser using PHP, and serve the correct template directly in the code. For this you could use a library like this one (untested, just an example) in your home controller, and change the template path as needed at the bottom of the script.
But first I would really try harder to emphasise to your client that he is doing it wrong.

Django-CMS sometimes cannot publish a page

I have a site in Django-CMS 2.4.1. I often go into the admin panel and change a page there, e.g. dragging a plugin from one placeholder to another, or just change the details of a plugin.
If I press "Publish draft" straight after this, I often get an error:
PublicIsUnmodifiable: The public instance cannot be published. Use draft.
Alternatively, sometimes I am told that I cannot submit the form as the slug is already taken (by the same page).
I have found that if I navigate away, come back, make the changes again, and press "Save and continue editing", and only then "Publish draft", it often works - but not always.
Also, I have found that I often cannot delete plugins from pages.
Has this happened to anyone else? Has my database somehow become corrupted?
Sorry I can't be more specific, but I thought I'd ask in case others have had the same problem. I am still trying to work out the pattern. The new management command cms check doesn't detect anything wrong.
One thought - I am using mptt version 0.5.5, which is higher than that loaded automatically by Django-CMS (which uses 0.5.2).

Anyway of knowing if a tab app is loading in the new timeline?

Is there anyway to detect if the tab app is being loading in the new timeline or not? I got clients asking to upgrade my layout but not all of them have upgraded so it makes it hard to do that. If I had a way to detect this it would be perfect.
I managed to do that by looking for an album called "Cover Photos" on the album list of that page. Here's a sample:
http://graph.facebook.com/-page_id-/albums?fields=name
You don't need a token unless the page isn't published yet.
The problem with this approach is that some pages still don't have cover picture yet, but it's the minority.

Is it possible to tell if a user has viewed a portion of the page?

As the title says on a website is it possible to tell if a user has viewed a portion of the page?
Will moving that portion to a separate iframe work? then if they scroll to the bottom, issue a get request for a small image file..forgot the name of the technique..
Update: It is called Web Bug..A Web bug is an object that is embedded in a web page or e-mail and is usually invisible to the user but allows checking that a user has viewed the page or e-mail. One common use is in e-mail tracking. Alternative names are Web beacon, tracking bug, tracking pixel, pixel tag, 1×1 gif, and clear gif.
If you are talking about to check if the user has actually viewed some part of the page you would need to install a web camera and track his eye-movement.
If you are talking about detecting how far the user has scrolled down the page, you can use Javascript to detect this in the OnScroll event. You can then fire some ajax to the server if you need to record this.
I'm not sure this would be ethical - but technically if you use javascript, you could detect the mouseover event of each paragraph tag in the document, and then AJAX that information back to the server. As the user scrolls down the page, they're likely to mouse over the paragraphs, and then you know at least approximately where they've read to.
Not reliably, no.
Simple example: I middle-click on a link, which opens it in a new background tab. I then decide against it, and close the tab without ever looking at it. Any JavaScript trick is going to report that I viewed everything above the fold.
More complicated example: A newbie user doesn't have the browser window maximised, and a portion of the browser window is off-screen. Any JavaScript trick is going to report as if the entire viewport is being viewed, so even restricting your query to only the cases where scrolling occurs will not help.
Unless you require a user action of some kind, all you will be able to tell is that they downloaded some portion, not that they actually looked at it.
Sure. Put that content inside a div, then in your html, with some javascript, capture the onmouseover event and do your work there. If they've put their mouse over something, it's a pretty safe bet that they've seen it, I'd say...
Hope this helps.