I am trying to get a widget that is inside an iframe to install as a facebook page tab. The way it is set up now is the user can customize the widget, then when they have done that a button appears that directs them to the "Add Page Tab" page. The widget url for the widget they have customized is added to the end of the url so:
https://www.facebook.com/dialog/pagetab?app_id=MY_APP_ID&next=CUSTOMIZED_WIDGET_URL
The problem I am running into is this: Once the user clicks to "Add Page Tab", it just goes to that widget url and not to the page tab with the url contents displayed inside that iframe. A page tab is added to the test page I have but it does not display what I want it to and I will get to that later. I have looked at some other widgets that do what I want and they redirect from that "Add Page Tab" page to the actual page tab with their customized widget in the iframe there.
I am also unsure of what I should have the Page Tab url set to in my app settings considering that the url for the widget will change from user to user. If I set the Page Tab to a specific url, it of course shows that url in the iframe after I have done the "Add Page Tab" and doesn't show my widget.
I have tried looking for a tutorial on this but I can't seem to find any. Please let me know if I need to clarify any of this. Any suggestions are greatly appreciated.
Related
I am not sure what the correct way to ask this question is.
I will post a screen capture and let that assist me.
Notice the bottom of the screen capture. There is a row of buttons. They are Pictures, Likes, and BookNow buttons. How are buttons added to that location? What is the name of that portion of the screen? How can I add a button like the BookNow button?
These buttons are called Tabs which are displayed on a Facebook Page. There are few tabs provided by Facebook that a Page Admin can add to his page like Events Tab, Videos Tab, Photos Tab and Likes Tab.
Page Admins can additionally install other custom or available Page Tabs as per the requirement to increase the User's engagement with the Page. BookNow! App in your attached screenshot is a custom Page Tab that the Page has installed to allow other Page Admins to add the same to their Business Pages.
To add a custom Page Tab to your Business page you need to invoke the Add Page Tab Dialog box and select the Page from the list of Pages that your administer to add the Page Tab.
I am building a Facebook Page Tab. It links to a website that is being loaded into Facebook as an iFrame, following strictly along the lines of developing Facebook page tabs.
I notice though, on Facebook Stories (a tab from the Facebook fan page) they have a border around the loaded iframe.
It does not appear at the original source of the iframe, though. And I do not see an option for it in the Facebook Page Tab settings - it also appears to match the style/css of the facebook iframe.
My question is: How can I have a border surrounding an iframe loaded in another page (this instance, Facebook Page Tab) that does not appear at the original source of the webpage?
Thanks!
The Facebook stories tab you refer to doesn't have a border on the iframe. The border is set on the body with css.
If you check the source of the tab : https://www.facebookstories.com/tab/
You will see the border next to the scrollbar.
I hope this answers you question :)
I added the like facebook button on my website, it works well except that the popup window doesn't show me the correct content.
Simple sample:
In the homepage of my website I set the title tag to its name, suppose it is called "the universe".
Then I go to another page that has a title like "the sun is hot". If I click "like it" on this page the popup content shows me "the universe". This is wrong, I want "the sun is hot".
How to set the correct content on the popup window? Does the button "like it" take the title tag or what else?
Thank you
Does the like button refer to the url of the homepage and not the page you are actually on? The way the like buttons work now is they pull the meta Open Graph tags from the url in the like button, so the meta tags on the page called by the button dictates the content.
If you make it the url the current page with the correct meta, that should fix it.
Run the page your like button is pointing at through Facebook's Debug Tool
This will show you the metadata Facebook is detecting for that URL, and/or clear the cache if you've updated the meta tags on your site recently
Can anybody guide about how
does the new FB timeline incorporate the iframe for its pages.
Or is there any new stuffs coming in to replace these stufs?
The way you create and display your iFrame will be the same, except for a size change.
The new iFrame will be 810px wide, instead of 520px - existing tabs (apps) that are set to 520px will just be centered on the page, so they aren't "broken." Giving us 290 extra pixels is great!
You can no longer set a tab as "default landing page". Instead, users always see the main Timeline view and have to actively click through to custom apps.
To edit which apps you display, click the drop-down icon to the right of the tiles, click the ‘+’ button to import your custom apps, and then hover over them and click the pencil to swap them around.
If you have a contest or something on a tab which you would have wanted set as the "default landing page", you can create a post on your page which has a few sentences advertising such, with a link to the tab. You can then "pin" this post to the top of your page, so it will be the first thing users read. "Pinning" and "starring" on your Page act exactly like they do on your personal timeline.
Here's a good explanation of all changes
I have a facebook app which has 4 pages. When i try to click on the link it just refreshes the page and shows a blank page. If i click on the link and open in a new tab it works fine opens the other page properly. What might be wrong?
I had to just add target="_top" in the anchor tag to solve the blank page issue.