My requirement is to integrate my client webpage and facebook using the Flike button.
I have an html page which is used for all the products. Based on the product code selected, the content in the page changes. The URL format is something like this -
in the browser it shows : http://xyz.com/product.aspx,
in the view source, in the action attribute of the form tag : ../../product.aspx?prdcode=123&catcode=3453
Now, my requirement is to place an flike button on this page. I have tried doing it in several ways... but the issue is:
If I click on flike button on one page.. the button is disabled for every other product.
Not sure what all needs to be included in to get this functionality right.
For a product listing page you'd need to have multiple like buttons, each pointing at a URL which represents an individual product - each of those pages needs the appropriate open graph meta tags, include the JS SDK once on your listing page, and have multiple <fb:like tags pointing at the individual product URLs
If the page content is dynamic, I think you can do the same, but you'll need to remove and add the like button as the content changes
Related
I have 2 pages in my web application. Lets say an home page and news feed page. When user clicks a hyperlink on home page then she/ he gets redirected to News feed page. I have 2 separate components in each page like
Home Page --- Header Component & Home Page Details Component.
News Feed Page --- Header Component & News Feed Details Component.
Both the pages has a common component Header. Can I prevent component reloading for the header component when users reaches the second page by clicking link on the first page.
By component reloading I mean the HTML code (HTL) code in the component should not be updated again with updated data instead for the second page, I just want to show the same data associated with header component in the first page.
A new page will always be loaded as a whole, because of just how [HTML] page loads work. What you are looking for is a single page application. They are possible with AEM but are a pain to design, especially the authoring mode behaviour.
This is a very common HTML pattern and possible duplicate of related questions such as: How to auto refresh a section of a page
There are two general approaches, the first being far preferred and supported in various frameworks, all based on JavaScript (AJAX):
Break page into different DIV tags that are independently updated (header separate from body sections, each loaded via AJAX such that only part of the page that has changed is updated).
Use iFrames such that effectively there are different pages - each loaded separately from the other.
I noticed some facebook company pages like:
http://www.facebook.com/companyname
Can change the persons name to the company name and also add a like button. How does one achieve these two things?
Add a like button to a company page of a URL like this - http://www.facebook.com/companypage
Add a like button on that page?
You need a special account designed for business, you cant just do it to a personal account.
https://www.facebook.com/business/overview
Once you reach enough likes on Facebook you can get your own "short page-link". You only need a few likes (100-200 I think it is).
A like button is already on your page. However you can add an extra tab using HTML and Iframes to a remote document with a like button. The like button is found on Facebook's dev pages.
https://developers.facebook.com/docs/plugins/like-button/
Code in HTML for Like Button
Detailed steps mentioned on the page on how to embed
You can add various styles too and a code will be generated for you
My goal is that have a fb page app (only in one tab) and use it with linkable subpages inside it.
For example:
If I click on subpage link there would be a http or ajax request inside the iframe. Thats fine, i can do that.
BUT
in the solution I also want to implement these two features:
1.:
I want that page to be accessible directly from an url like:
http://facebook.com/pagename/app..blabla/subpage1
or
http://facebook.com/pagename/app..blabla&sk=535&subpage=1
or
http://facebook.com/pagename/app..blabla#subpage1
2.:
On subpage link click inside iframe I want the browser url to turn into something like mentioned in the 1. point. (even when using ajax - probably with a hash tag)
Is it possible?
If you look at the page tab tutorial http://developers.facebook.com/docs/appsonfacebook/pagetabs/ at the bottom of the page they describe how you can create the 'subpage' idea using the app_data parameter. So your links will look like http://www.facebook.com/YourPage?v=app_1234567890&app_data=any_string_here
For your second question, in the links on the page you would specify target="_top" in any links you have with the href being: http://www.facebook.com/YourPage?v=app_1234567890&app_data=subpage1. This will cause the entire page tab to load through Facebook and you'll get the signed_request and your app_data parameters.
You probably don't want your ajax to load through facebook, because you'll get the Facebook page back instead of json or whatever you are trying to load. Instead you'll just make ajax calls to your server and pass the parameters you need to, like app_data or whatever you want.
Facebook provides us with an option to choose a custom landing tab for the new visitors (i.e. non-fans). Can we have a custom Landing tab for fans so that every time i open the page, i m directed to that custom page rather than the Wall..
Have you checked Facebook Help Center?
How can I select a tab as default for people who already Like my Page?
This functionality does not exist.
What you are trying to do is straightforwrd.
Create a "landing page" tab app and add it to your page. Here is a tutorial on how to do it: http://how-to-create-facebook-app.koliber.com
Make this tab the default for your app. On your page, in the upper-right corner click "Edit Page" and change the "Default Landing Tab" to the one you would like displayed by default.
Now everyone will be shown the default tab when they log in. How to distinguish between those visitors who "liked" your page and those that didn't? Easy. Make two versions of the page and display one to those who liked and one to those who didn't like. How to find out whether the current visitor liked your page or not follows:
When your Page Tab URL is called in the iframe, it is passed a signed_request POST parameter. This parameter contains the info you need. However, it is encoded and structured so it needs some processing to get the info
Split the signed_request on the '.' character. The first part is the signature. The second part is the encoded_data
Decode the encoded_data into a JSON string using the URLBase64Decode function equivalent in your server-side programming language
The JSON object contains a node called "page". This contains a node called "liked".
If "liked" is true, the user liked the page and you display the "liked" version of your app. If false, show the "Please like me" version of the site.
This way, when visitors visit your page, they see your custom app in a tab. The actual content is determined server-side on your server based on the page.liked property inside of the JSON object passed to you in signed_request
The simple answer as far as I have been able to find out is "No". There is no setting which aligns with this requirement.
The wall is the default tab for people who like the page.
http://apps.facebook.com/static_html_plus/ this application gives you those options... enjoy!
My one web page uses Ajax to display information about multiple activities.
I'd like to have one Like button per activity. This would mean multiple Like buttons on the page, one per activity. Can this be done?
Can the Like button's url include #!state1 ?
Eg, a web page is located at www.example.com/index.html
It has multiple FB Like buttons on it, one for url www.example.com/index.html#!activity1
another for www.example.com/index.html#!activity2
Will the two Like buttons work independently?
You can have multiple like buttons on a single page, but each like button must be linked to a separate page.
Eg: if you have products, each listing could have a like button next to it, but that like button would link to the product details page.
If you really wanted to, create phantom pages on your site with some meta tags. Then on your index.html, use like buttons that link to those pages.
To ensure no one ever gets to your phantom page, include the tag:
<meta http-equiv="refresh" content="0;url=http://www.example.com/index.html/">
That way, if someone clicks on the link that comes up on a facebook wall, they'll be redirected to the correct page.