Links not working on Facebook Page Custom Tab - html

I have created a custom tab for a Facebook page. Everything is displaying, the only issue happening is none of the link in that tab is working. Is there a special code that I need to add for Facebook Tab page in order to make the links work?
This is the facebook tab.
https://www.facebook.com/AstellasUS/app/2475799012460272/
And the links I have used basic HTML below
<li>Twitter: twitter.com/astellasus</li>
<li>LinkedIn: linkedin.com/company/astellas-pharma</li>
<li>YouTube: youtube.com/user/AstellasUS</li>
<li>Website: astellas.us</li>

They are “not working”, because those sites forbid being displayed inside a frame on a different domain, via the X-Frame-Options header.
Trying to open those sites inside the app iframe doesn’t make that much sense to begin with - so simply add target="_blank" to those links, so that they open in a new window/tab.

Related

Is there a way to make a custom about blank page?

I'm currently working on my website and I had kept some placeholder links in it without linking it to any place, once open I get to the webpage about:blank#blocked , I was wondering if I could replace the blank screen and add a custom page maybe with .htaccess
http://rhysjosmin.tk/Subpages/Ongoing%20Projects/Ongoing.html
The link
No. When clicking invalid links such as http:// the browser does not know what to do and redirects you to some browser specific error page. Your server will not get any requests relating to this action.
I would suggest you replace all placeholder links with a valid link, let's say http://rhysjosmin.tk/Subpages/Placeholder.html, and create your custom page there.

Displaying LinkedIn content with `iframe`

I am making my website, and I want to put my LinkedIn profile in the Bio section. However, when I use iframe, I get that LinkedIn refused to connect. Is there a way to embed my LinkedIn profile in my website using HTML? Thanks!
<iframe src="https://www.linkedin.com/in/your-name"></iframe> yields:
LinkedIn allows you to create a badge, and put that badge in your portfolio/website. So, in order to make a LinkedIn badge, follow these steps:
From your LinkedIn profile, click on Contact Info which is next to the number of your connections.
Then click on the pen at the top right corner to edit the Contact Info.
The first thing you'll notice is your LinkedIn profile link. Click on it.
A new page will be opened, you'll see a column at the right of the page, and at its end, you'll find a box entitled with Public Profile badge and a Create a badge button at the bottom. Click on that button.
Copy the script tag and paste it at the bottom of your HTML sheet.
Scroll down, you'll find 4 designs for your badge. Select the proper one and copy its code from the bottom of it and paste it where you want the badge to be shared.
I know it's a long journey, but it's worth it.
NOTE: The link to your LinkedIn profile will always open in the current tab, even if you add to the a tag the attributes target="_blank" rel="noopener noreferrer". If you want the link to be opened in a new tab, put this line of code inside the head tag at the beginning of your HTML sheet <base target="_blank" />.
Another IMPORTANT Note: After putting the base tag inside your head tag, every single a tag inside that sheet will be opened in a new tab by default.
HAPPY CODING AND GOOD LUCK
Browsers these days prevent this from occurring by expecting iframes to only frame pages from the same site. It's to prevent clickjacking. and it's controlled via the X-Frame-Options header. You should see a similar error on dev tools, if you press F12 you should see this error
*Clickjacking, also known as a “UI redress attack”, is when an attacker uses multiple transparent or opaque layers to trick a user into clicking on a button or link on another page when they were intending to click on the top level page.*
Your hosting provider may have a policy in place to prevent this from occuring, or if that's you, you will be able to amend this default value on your server.
You can disable this via Chrome for your development.

WordPress Menu Link Issue

I am currently developing a WordPress website.
I have home page as parallax page. you can visit here. and parallax working fine on this page,
I have another page on same site which you can see here, you can also navigate to that page by clicking news menu link on home page.
My issue is, after navigating to news page, other links ( Home, Services ) not working.
When I right click and choose open link with new Tab its working, but when i direct click that menu link (Home, Services ), Its not working, Why? What is missing there?
I have tried to bind jQuery click event with it, and click event in jQuery working fine.
The browser is confused because you are using hashtags # in your url. Hashtags are normally used for links on the same page (anchors). The link is however not on the same page.
When you right-click and select open in new tab you are forcing the browser to go to a new page.
I do not know why the hastag is there in the first place. I suggest you remove it in the url. Do not forget the remove the hashtag in the slug of the page too.
your theme has an event on links with w-nav-anchor class in your js/plugins.js
Add more specific selector like '.home .w-nav-anchor' to run properly.

Automatically open external links with iframe?

I am working on a WordPress site that has a lot of authors. The stories often contain external links, and I am looking for a way that we can automatically have external links open with a small header that has a "Back to our site" link, along with a close button.
Ideally this would be done automatically, but we'd also like to be able to create links manually that open in this same sort of iframe with our header. How can I go about setting this up?
I suggest you build this via Javascript, so you could easily turn it off/on as needed and it will be kind of portable too and you can use it on other site as well.
steps to do:
Go through all the anchor links and if the href is external link, add attribute target blank, and change the href links
if(external_link){
a.target = '_blank';
a.href="http://example-ownsite.com/iframe_holder/?page=" + a.href;
}
Then take a look at my page on http://fedmich.com/works/odesk/
so you could provide a vertical scrollbar on the iframed page.
Im using a function called resizeIframe() there
Note: some sites dont want to be placed inside iframe and they will breakaway from the topframe.

how to force all new links opening or redirects to stay inside the iframe?

when loading http://www.dmoz.org/ via iframe.
when you click on any of the links, it will escape out of the iframe.
how to disable this from happening ?
You can't, not really. You can load their website in your frame because you control the link your visitor uses to enter that site from your page. You do not control the dmoz site though and you have no control over how they set up their links. If they have them set up in such a way that it breaks any frames, then your outta luck.