I have Facebook iframe app where I am pulling content with JSON and representing it in a list with search criteria.
On item click new content shows on the same page (using ajax), and that page shows more info about item. I want to add a LIKE button for every clicked item.
But it must be a different URL so I can publish it on my FB wall. So when I check link from Like button on wall, it will redirect me on that special item.
Here are few issues:
1) How to define Like button for every item?
<div class="fb-like" data-href="LINK FOR LIKE BUTTON" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" data-colorscheme="dark"></div>
Here is LIKE button, I need to specify different data-href for every item.
2) I need to send some parameters to url. Let's say when clicking on item, I should send item id to URL. Right now I can send item id to my URL but it is doing just in my iframe -- not in facebook URL. How can I do this?
I think second problem would give an answer for my first problem.
Edit: I am doing this using jQuery.
edit2:
so, i am using jquery for my site, pulling content with JSON and representing it with html and jquery, i have, it is all the same page, but on click i hide some contents and show another, so my main content is a list of items, click on item i hide main content, and i show item info content
so, it is all one page, so it has the same URL (main content, item content,... all the same URL)
so for adding LIKE buttons for every item, i need to make a difference between those items, so i done this
'window.location.href=window.location.href + "#id=" + propertyid;'
so right now, every item has its own URL, which i done manually, so right now every item has own URL which i could use for LIKE button
but, when i alert this new window.location.href is seems all right, i get this new location with #id=12345 included, but when i try to send that location to LIKE button data-href it is always just the main location, without this new part includind item id #id=12345
Yes, you can create FB Like buttons for "items" shown on dynamically created screen content (eg Ajax popups).
Issues:
Individual item urls
FB demands a "social graph endpoint" for each item that can be liked. So you also need to support a url which returns only the "item." This is the url for the individual item. It is also the url that a FB viewer will click on if they want to find out more about the item.
Example: a page shows a list of articles. There is an individual Like button next to each article. When a person "Likes" article B, it is shown in their FB stream. When they click on "Article B" in the stream, it should go to a page that only shows article B.
Also, the url for just article B will be queried by Facebook to obtain the FB meta headers for the individual item (image, classification, etc).
Parsing the new dom for FB items Depending on which method you use for adding FB like buttons et al, you may need to tell FB to explicitly (re-)parse the new parts of the dom that you just added dynamic content to. (Your pop-up.)
Since you know the element that you added the popup to, there is no need to tell FB to reparse your entire dom. Tell them to parse starting at the beginning of your newly added/changed element:
Code I use:
if (event_data) { // event_data was received, show it
panel.setBody(event_data); // set the pop-up's body
if (!this.ie && typeof(FB) != "undefined" && FB.XFBML)
{FB.XFBML.parse(this.panel_el);} // Parse FaceBook markup
....
Docs from FB on this:
http://developers.facebook.com/docs/reference/plugins/like/
http://developers.facebook.com/docs/opengraph/
http://ogp.me/ # FB site about "Open Graph Protocol"
Place this in a for loop, and you should be fine.
var elements = $("#divId").html();
$("#divId").html(elements + "like button code");
$("#divId.fb-like").attr("data-href", "what you want to link to");
See .html() and .attr() specs.
Related
I'm having a bit of an issue figuring out a very simple interaction.
Some Context:
I'm working on a website that showcases some products in a grid and when clicked, a Lightbox pops up with the information of the product..pretty simple! Roughly my markup/script:
<img id="1234" src=".../blah.jpg"></img>
$( img ).click(function() {
// open (this) lightbox
// etc. etc.
});
Now I'm trying to implement the search functionality, which exists obviously in another page. The search reutrn a list of products each one with a path such as:
Product 1234
So if I click the item, it will take me to the correct page where the item exist and since I'm including the anchor link, it will kind of place it visible to the user. This works fine.
My question is, how can I make the Lightbox open automatically after being directed from the search to the actual category page where the product exists?
This seems to be super simple, but for some reason I can't manage to figure it out! Any help would be really appreciated!
Thanks!
So when the dom is ready on the category page, you wan to check the url to see if an anchor exists. This will mean that they have arrived via the search results page.
reference:
How can you check for a #hash in a URL using JavaScript?.
Something like this:
if(window.location.hash) {
var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
alert (hash);
// hash found
// open (this) lightbox
}
If it exists, get the product id from the hashtag and trigger the lightbox functionality
I have page flow like this
User lands on the landing page.
Then does some selection of some select boxes and then hits search.
Then use is taken to new page with all search criteria and displayed search results.
In this page we have left section to display all results and when user clicks on any result item we show the result details on right side.
All this was fine. But now client want a bookmarkable link for the open section i.e. when use clicks on the left div, right div should open and this should have proper url, so that it can be shared.
How can i achieve this, making urls for open divs? i tried #id=1002 everything worked, but when user copies the url and pastes, java is not able to get the hash tag.
Here is one of doing it. -- Codify and map URLs and then handle them within the javascript.
Let me explain.
Say for example, you have 2 divs -- div1, div2
(1) Codify and create a mapping logic/convention ---
Map the states of divs to URLS --
div1 open div2 close --> URL = mysite.com/page/d1-open/d2-close
div1 open div2 open --> URL = mysite.com/page/d1-open/d2-open
div1 close div2 open --> URL = mysite.com/page/d1-close/d2-open
div1 close div2 close --> URL = mysite.com/page/d1-close/d2-close
and so on
(2) Handle the URL at Server --- Just make send the output of mysite.com/page , ignore the rest
(3) Handle the URL at Client ---
something like this
function handleURL() {
var myURL = window.location.href;
var urlArray = myURL.split("/");
//examine the urlArray and decode the URL code after mysite.com/page/
// and open or close your divs accordingly
// eg: if the url-part after page/ is div1-open/div2-close
// i.e urlArray[2]=div1-open and urlArray[3]=div2-close
// you would know what to do accordingly...
}
The example I explained you, is barely scalable. You will have to manually come up with 2^n mappings for each combination of n divs. However, if really want to make it scalable, you can automate the codification too.
You can assign each state of the page a unique id.
Eg: mysite.com/mypage/page-config-id=abcd1
Then you ask the server the for the div configuration
i.e which div is open which divs are closed etc as a JSON. And then you can use Javascript to parse the JSON and rearrange the page.
You can store the div config --> page-config-id key-value pair in a key-value database on the server in a database or file or noSQL or whatever.
You need URL to right divs content only.
You will have to come up with a uri router that links to the searched resource.
If your search resource is user profile then all user should be accessible via some uri like /user/:userid.
Suppose the search is for a person named z.Your left div will have all profiles with name z. Clicking on any result item will open that person in detail view, however the URL should be changed using location attribute to /user/z1.
Also you will need to check if the user that is searching for the resource has access level to view that content.
Let's say that I'm building something like order cart.
I have one main page, and a lot of subpages.
On the subpages I have some specified product which user can add to the order by clicking on the button.
If the user click the button, javascript is called grabbing the name of the product and sending it AJAX to some PHP file which add this product name to some $_SESSION array.
If there's atleast one product in the cart, the FIXED div on the bottom of the screen appear. This div runs modal (bootstrap) and it contains all of the products which user had add to the order. Again I'm using here javascript + AJAX to determine click. If it's, there is a call to .php file which return STRING contains all the products. Then, this string is appended to the div inside this modal.
Content of this modal looks like:
'name_of_the_product', 'delete', 'id_from_session_array'
...
...
So I want allow the user to use DELETE option for any of his products in this list if he no longer want this product in the cart. I wrapped the delete text in some anchor and gave it class - let's say '.delete_from_cart'.
And now, when I'm trying to check in javascript if this element ('.delete_from_cart') has been clicked, nothing happens.
Sample code for this looks like:
$('.delete_from_cart').click(function() {
alert("foo");
});
No alert at all after clicking some .delete_from_cart div. However, in the code source all of this anchors has this class.
How to fix that? It seems like javascript doesnt see appended elements from ajax in this div. Any help?
since you said that your modal is generated using an Ajax call, you will not be able to attach the click event to the element. You will need to use jQuerys on() method to bind the onclick.
$("#themodal").on( "click", ".delete_from_cart", function(){
alert('it worked');
});
See on() method more details.
https://api.jquery.com/on/
I have 16 database results shown on my website. Using a load more button, the user can load the next 16 database items and they get appended into the container.
Im trying to make a way so that if the user clicks back after visiting a link, they will get shown the same amount of results as they had loaded.
My plan for this is to add a page number to the url after each load more function. When the user clicks back in the browser, i can then use that parameter in the LIMIT php claus.
So, in my ajax response, i append the data and then i wish to add a page number to the url, or update the page number if there already is one.
An example of what i want to achieve is:
www.mydomain.com/?page=1
I have made a jsfiddle with a basic button click function just for testing since im away from my laptop until later.
jsFiddle
And the code just incase:
var url = document.URL;
var pageID = '1';
$("#addtourl").click(function(){
// add page id to the url
alert(url);
});
Where the url is alerted i want to modify the URL. I already create a page ID so thats not an issue.
Thanks!
You can use the HTML 5 history.pushState function as explained here .
i have a page on my site (let's call it list_page.html) with js functions that allow you to click a link and see a list of multimedia objects. clicking another link (on the same page) will hide the div with the multimedia list and reveal a list of video objects. another link will hide whatever list is visible and reveal a list of audio objects, and so on...
$("#multibtn").click(function(){
$(".menuslab").hide();
$(".menuslab > *").hide();
$("#multi_div").fadeIn("slow");
$("#multi_div > *").fadeIn("slow");
});
if on my main page (mainpage.html) i have a link named "multimedia", is there a way i can get it to navigate to list_page.html AND execute the function that calls the list of multimedia objects?
Closest way perhaps would be to append a query string to the URI, parse location.hash and see if it's a certain value, and if so trigger that click.