Anchors nor working with Facebook Objects
Autor: John H.Hi guys,
Got a problem using Anchors on a page with Facebook Objects. See attached pic for setup.
https://garfieldvictoria.com.au/facebook-links.html
I have set up links to this page from my Sponsor Customer. See attached pic for setup.
https://garfieldvictoria.com.au/sponbuspage.html
Customers have been linked as follows:
Cannibal Creen as FBCC - this link goes to bottom of page
Chris the Garden Man as FB01 - this link works fine
Garfield Fresh Harvest as FB02 - this link also goes to bottom of page
Impodimo as FBIMPO - this link also goes to bottom of page.
If I type the links in at the address bar as https://garfieldvictoria.com.au/facebook-link#FBCC the link works fine.
I need to be able to link all Facebook Objects properly as when viewed on a mobile it takes ages to find the Facebook link. Again, if link is typed in at the address bar on mobile it finds it correctly.
What am I doing wrong, I am just so confused as the Anchors work fine on other pages.
Any help would be greatly appreciated.
Cheers - John
John
The anchors only actually work on a row basis, to make your links work reliably you would need to place each facebook object on its own row when laying out the page
Even your "Chris the Garden Man as FB01" link fails when the page is displayed in mobile resolution at this time (and will fail at other reolutions when you do the responsive settings for other resolutions).
Your FB02 anchor should work, "sponsor business in that text box"?
There is a flaw in the anchors, they need an offset (if using sticky bar in particular). Rather than use code I always place an object (simple separator works well) above the object I wish to jump to and add the anchor there.
What other pages have links (that work)?
Autor
Thanks for your reply, I appreciate it. I see what you mean by Anchors only working on a "row basis" - that is probably why my other anchors work. LOL
I will try and either set the page up with all Facebook Objects in a row, which may look a bit strange in full screen PC view, but would work fine on Mobile view.
Alternatively, I could as you suggested put a separator line between each 3 Facebook Objects. I think I tried that but somehow that didn't work either. I will try again, and keep persevering until I get it right.
Thanks again for your help and I will let you know how I fair.
Cheers - John
John, I am in your timezone (down near Phillip Island) so if you need to get my attention and I am not watching the Help Centre, you will find my contact details on https://esahc.com
To make anchors work I suggest you would need to set up a single column on the page
Autor
Thank you so much. I am 70 years old and am setting up a community website for our township of Garfield.
I am hearing you when you say to place them all in one single row. With the Anchor working should make it easier to find a particular Sponsors Facebook page.
I will work on this in the morning and let you know the outcome when complete.
Again, thanks mate.
Cheers - John
Hello John
Just a suggestion :
To have a better page-load you could use an iframe. You only need one iframe. You could then make links that replaced the iframe with the facebook -profile chosen. Facebook has a feature that generates code for the content of an iframe.
I have an example here :
You go down the page until you come to this:
Then try clicking the links to the right - and you should see the content change. Imagine that the content that is shiftet is facebook profiles.
Just a suggestion.
But placing all the different facebook objects in one column (as Gordon suggests) will also function.
Forgot link to the page : https://bramminginfo.dk/museet.html
(It > En) ... maybe you have activated some wrong or conflicting server-side rule in ".htaccess", to avoid ...
... you were wrong to indicate in Step _5 the site address which is not congruent (www!) :
...!... >> https://www.garfieldvictoria.com.au/
.
Autor
Hi guys,
Thanks to all for your help. I have just spent another afternoon wasted in cyberspace. LOL
Just can't seem to see what I am doing wrong. I tried the following solutions.
1. Tried John S suggestion with iframe and still all Anchors go to bottom of page.
2. Tried placing a line in between each Facebook Object as suggested by Gordon. Also not working.
3. Sorry KolAsim not quite sure what you mean. I have set up my .htaccess file to omit having to use the .html
extension. The Anchors works fine on the /index (Home Page)
4. Tried to do the same as I have done with Anchors on my Home Page (index.html) which by the way works fine.
However, this would not work with the Facebook Objects.
I have added pictures of how I have set up both the Home Page and Facebook Page. If you go to the following link you will get the page where I link from. Facebook link on individual Sponsors does not work, but the links at the bottom right going to the same setup on my Home Page do work. Also the link going to the first anchor on the Facebook Page works.
https://www.garfieldvictoria.com.au/sponbuspage
Seems like once it hits a Facebook Object it just wants to go to the bottom of the page.
Still totally lost. Maybe I should set up a separate page for each customer Facebook page. Kinda defeats the purpose of how the way the website was meant to work.
Any help would be appreciated. Once again thanks guys.
Cheers
John
Autor
Sorry forgot something....
If you first find that the link does not work and you type the Anchor link at the top in the address bar it works.
How strange is that ??
- .
ciao
.
Autor
Thanks KolAsim. I am using Let's Encrypt for my https security, probably not a good move using a free service.
Never noticed this as when I use the links I have set up everything works.
If I type in www.garfieldvictoria.com.au it takes me to the correct https site. I now see that if I type in anything other than the index.html file with www. we get an error message. Not good for my customers.
I will have to investigate this issue further to make sure I don't get this error. Maybe have to pay for a proper encryption certificate.
Thanks again.
John
John, as KolAsim said, you are going to have to get an ssl certificate or if your host provides one for free, contact them to make it work (you may have knocked the code out when editting the .htaccess file?) My bowser put up a hell of a fight to stop me going to your website.
It appears you are busy creating a new page for every business - that's a bit of work (with some upsides).
Before giving up on anchors, please create a new page with one or 2 businesses exactly as in your screen shot and test again. I suspect you have a corruption in the xml file that generates the page. If the problem persists I would be happy to look at your project directly - send an email with your phone number to gordon(at)esahc.com
Autor
Thanks Gordon, I hope I am not being a pain. I have checked the website out now on both Chrome and MS Edge and I can get on both as https://www.garfield.com.au/(any extension)
Can you try https://www.garfieldvictoria.com.au/sponbuspage.html as I saw KolAsim also got error message.
I did change my setting in Let's Encrypt to include www which I think wasn't there before.
Will have a look at some other SSL certificate, my hosting mob Crazy Domains charge $97 + GST for one year, a bit pricy. LOL
I will send you an email in the morning, my brain is not working at its fullest capacity at the moment. I have attached a copy of my .htaccess file.
I was originally talking about the web.config file when I mentioned not having to use the .html extension.
Thanks again.
Cheers - John
Hello John
- Time in cyberspace is not wasted. All/most knowledge is coming from trial and error. You should learn something by every attempt - even if it fails.
- Using my suggestion should require no anchors. You create one iframe. Then create some links. Each link should load different content (facebook sites) into the iframe.
If you want to go this way, you could make a testpage so I can see what eventually goes wrong. Or - I could make a test for you if you like the method with the iframe.
.
(It > En ) ... see previous STAMP ... ... the problem of Anchors and Anchor points is not a problem of the program, it is the same for all the websites of the WEB, but it is difficult to understand, as in the case of external anchors ...
... in your case the problem consists in the slow opening of the page, objects not immediately available that slow down the formation of the page for several seconds, so it is not possible to calculate the anchor coordinate ...
... obviously for the Anchors of the same page, already open, the problem does not exist, and it has always been like this ...
... for the current situation you can solve in two ways:
1) ... assign a fixed height of 550 pixels (550px) to the cells that act as containers for Facebook windows (and not automatic height)! ...
2) ... only if you feel like it and you feel like trying, to be able to use my exclusive invention with my EXTRA code, through the Expert panels present in the Program ...
.
ciao
.
Autor
Hi John S
I like the idea of the iframe but what I can see from Facebook is that this only works with Facebook Posts not Facebook Pages? Am I not seeing it correctly? If you have a way of linking Facebook Pages through an iframe I would be very interested in you creating a sample iframe so I can see what you mean.
Thanks for your help.
Cheers,
John
Autor
Hi all,
Just a quick note of thanks to all who have reached out to give me some help.
One good thing that came out of this is that I now believe I have setup my SSL properly by including the .www field. Didn't quite understand what I was doing with this. All fixed now, I hope.
I have asked John S to give me some more guidance on the Iframe idea and have sent Gordon my phone number.
KolAsim has basically confirmed that is will not work due to the loading of the Facebook Pages taking so long. Thanks, but I did assign a height of 550px in the Facebook Object itself, cannot see anywhere else I can change this. Your suggestion of trying your EXTRA code through the Expert panel sounds a bit too complicated for my small brain. LOL
Again, thanks for your help and if I cannot sort this out, I will just have to go back to how I had it originally. There should ever only be 12 Sponsor Facebook pages at most.
Kind regards,
John H
Hello John
I have an example here: https://www.bramminginfo.dk/bramny03/side-31.html
The iframe and links is not styled - it is rather quick-and-dirty. But you should be able to see what I mean.
The links could be a little clickable image - or it could be a combination like here :http://calendarforum.dk/examples.html
Imagine that the Q-codes was images (which it actually is) or logos of the different businesses.
Autor
Hi John S.
Love what you have done, even though I don't quite understand it. LOL
The sample on side-31 probably seems to be the easiest for me to set up, if you are able to guide me through the process.
The other one of course looks nicer but I think it might be out of my league to understand the process.
I need to be able to update the outcome so I need to understand the process. I have had a look at the Facebook Embedded Posts and the Page Plugin but can't see how this relates to the above.
Your help would be greatly appreciated, plus it would help me learn something new.
Cheers,
John H
Hello John
As you like the iframe method, I have made a new example.
The iframe method is also good for the page load as there is only ONE facebook item shown.
Here is what I have done :
The 1 is just an image object.
The 2 is a html-object. This is where the targeted link for the iframe is set.
Content of 2 is:
<a href="https://www.facebook.com/v10.0/plugins/page.php?adapt_container_width=true&app_id=&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fx%2Fconnect%2Fxd_arbiter%2F%3Fversion%3D46%23cb%3Df34521fa7d790cc%26domain%3Dgarfieldvictoria.com.au%26origin%3Dhttps%253A%252F%252Fgarfieldvictoria.com.au%252Ff3aec14b02605e8%26relation%3Dparent.parent&container_width=338&height=500&hide_cover=false&href=https%3A%2F%2Fwww.facebook.com%2FGarfieldFreshHarvest&locale=en_US&sdk=joey&show_facepile=true&small_header=false&tabs=timeline&width=380" target="faceframe">Garfield Fresh Harvest</a>
The 3 is the iframe. Content is this:
<iframe name="faceframe" width="380px" height="500px" data-testid="fb:page Facebook Social Plugin" title="fb:page Facebook Social Plugin" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" allow="encrypted-media" src="https://www.facebook.com/v10.0/plugins/page.php?adapt_container_width=true&app_id=&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fx%2Fconnect%2Fxd_arbiter%2F%3Fversion%3D46%23cb%3Df14e6b668112%26domain%3Dgarfieldvictoria.com.au%26origin%3Dhttps%253A%252F%252Fgarfieldvictoria.com.au%252Ff3aec14b02605e8%26relation%3Dparent.parent&container_width=338&height=500&hide_cover=false&href=https%3A%2F%2Fwww.facebook.com%2Fcannibal.creek.wine%2F&locale=en_US&sdk=joey&show_facepile=true&small_header=false&tabs=timeline&width=380" style="border: none; visibility: visible; width: 338px; height: 500px;" class=""></iframe>
The name of the iframe is faceframe. This is also the name that each targeted link should refer to.
The initial content of the iframe could be an image instead of a facebook item. Or it could be some text.
The conmtent of the other two html-objects is :
<a href="https://www.facebook.com/v10.0/plugins/page.php?adapt_container_width=true&app_id=&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fx%2Fconnect%2Fxd_arbiter%2F%3Fversion%3D46%23cb%3Df14e6b668112%26domain%3Dgarfieldvictoria.com.au%26origin%3Dhttps%253A%252F%252Fgarfieldvictoria.com.au%252Ff3aec14b02605e8%26relation%3Dparent.parent&container_width=338&height=500&hide_cover=false&href=https%3A%2F%2Fwww.facebook.com%2Fcannibal.creek.wine%2F&locale=en_US&sdk=joey&show_facepile=true&small_header=false&tabs=timeline&width=380" target="faceframe">Cannibal Creek Vineyard</a>
And
<a href="https://www.facebook.com/v10.0/plugins/page.php?adapt_container_width=true&app_id=&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fx%2Fconnect%2Fxd_arbiter%2F%3Fversion%3D46%23cb%3Df17fca5486c4498%26domain%3Dgarfieldvictoria.com.au%26origin%3Dhttps%253A%252F%252Fgarfieldvictoria.com.au%252Ff3aec14b02605e8%26relation%3Dparent.parent&container_width=338&height=500&hide_cover=false&href=https%3A%2F%2Fwww.facebook.com%2Fluluslollyshop&locale=en_US&sdk=joey&show_facepile=true&small_header=false&tabs=timeline&width=380" style="border: none; visibility: visible; width: 338px; height: 500px;" target="faceframe">Lulu's Lolly Shop</a>
The formatting(in red circle) is made by giving the objects 1 and 2 a background and the in the object 1 the right margin is set to 0 and in object 2 the left margin is set to 0. This is done to give the 2 objects a look so it is obvious that they belong together. And then I think it looks nice.
Hope this solves your problem.
Autor
Hi John S.
I love it..... absolutely love it. Thank you so much for your help with this.
I have set it up as a quick test and it looks very easy to implement and with a bit of design will look fantastic.
Look here and you'll see that I have tried it and get the idea.
https://www.garfieldvictoria.com.au/page-20.html
Needs some more cosmetic work which I can do tomorrow, it's 8.30pm here and the "old man" has just come home from dinner out and needs a cup of coffee and start unwinding before getting ready for bed. LOL
Really appreciate your help. I owe you one.
Cheers
John H
John H, the solution offered up by John S looks great!!
For the record I have confirmed the original problem of not jumping to the correct anchor on a FB object appears to be a bug in WX5. I have created a new post with an example project for incomedia's attention.
https://helpcenter.websitex5.com/es/post/240135
(It > En) ... you have placed double Anchors; ... in principle not good; ... IDs must be unique ...
... ... if you are still interested in Anchors, to use my unique and exclusive EXTRA code, it's not complicated even for the inexperienced; ... you must be able to do a single and simple copy / paste in the Step_3 / EXPERT section...
... in this way the page structure remains sent, what it is currently, without having to make changes and therefore you could solve the problem without having to do anything else; ... my code calculates the right moment to call the Anchor point and position it correctly ...
... so if you're interested in trying, let me know ...
... otherwise continue with the other suggestions; .. even the IFRAME TARGET method is fine, I had already created and recommended it in the forum in 2004 in contrast ...
.
ciao
.
.-
.
... you did well to report it and I agree so that we can provide if it were possible, but it is not to be considered a bug of our program for the reasons I said before, and it has also been reported in the past, but hopefully always in something new...ciao......
.
Autor
Hi KolAsim,
Thanks, I think I will also give your solution a try if you are still offering. The good thing about your solution would be the mobile phone part should work better.
I like John S solution and am very grateful for his help and if your solution doesn't suit, I can still use his. Or it may come in handy in something I have planned for later on.
Please let me know what I need to do to try your solution.
Thanks to all of you for helping me out.
Cheers
John
Hello John
You are right - the solution is not optimal for smaller screens.
I suggest you also add a dropdown, and the hides the other links for resolutions below where they are useful.
I have added a rather simple dropdown in my example: https://bramminginfo.dk/bramny03/side-31.html
In my example I now hide the other links for smaler screens - I think this could be a good solution for you.
Doing it this way the ysers on a desktop will see all the links immediately which is the easiest for selecting a facebook. And you had it look nice.
Then on smaller screens the dropdown is the only way for navigating. I think will function OK on mobiles.
If you wish to use images in the dropdown is up to you - I think it looks better when there is an image for every link.
smaller - not smaler
users not ysers
I think will - should have been I think it will
Autor
Thanks John S.
I will try in the morning - we are in two different time zones I think - LOL
It's 8.30pm here and I've been on the system all day. LOL Just can't get enough of it.
Will let you know the outcome here tomorrow.
Thanks again.
Cheers
John H
If you stick a long pin right through the earth, I might be poked
(It > En) ... OK ... you be prepared to follow these simple instructions carefully without making mistakes; ... it's just one copy / paste ...
... you have to be careful because I have neither a PC nor the program, and therefore the outcome of the exclusive code that I invented is in your hands, you have to apply it, export it, and verify it on the NETWORK, and therefore I also expect that you notify me so that I can check ...
... the code is exclusive to the "facebook" page (facebook.html); ... if you need it for other pages, let me know to correct the code and dedicate it to these ...
... ... ... ... keep it going ... ... ... ...
.
... this code, which you find both in clear text, and also as an attached file below, you have to paste it in this position, selecting the Properties of the "facebook" page:
>> Step 3 - Map > The 'Page Properties' window > Options in the Expert section | ▪Custom Code: > (3 ^) third option ▼Before closing the HEAD tag
... ... ... code:
<script>
$( document ).ready(function() {
//--- sezione -- preloader by KolAsim ---
preK='<div id="loaderK" style="position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:1000000; background-color:rgba(0,0,0,0.5);background-image: url(\'https://hello-site.ru/main/images/preloads/tail-spin.svg\');background-repeat: no-repeat; background-attachment: fixed; background-position: center center;background-size:20%"> </div>';
$("body").append(preK);
//=====function Anchor by Kolasim=======
function anchorK() {//K;
k=$("#imCell_223").css("height"); k = Number( k.match(/\d+/) );
if(k >100) { fineK();anchorK = location.hash;
x5engine.utils.location(anchorK, null, false); }}
function fineK() {//K;
$("#loaderK").hide();clearInterval(calcoloK); calcoloK =0;}
function avvioK() {//K;
calcoloK = setInterval(function(){ anchorK() }, 2000);} avvioK() ; });
/** === by KolAsim== **/
</script>
.
... FILE ... ↓↓↓ ...
.
... in this way there is no need to change the structure of the page, which remains what it is currently ...
... notify me when you have entered the code and published, so I check ...
.
ciao
.
... an advice; ... in order not to depend on the preload file in Russia, with the right mouse button download this file:
>> https://hello-site.ru/main/images/preloads/tail-spin.svg
... then you send it on the NETWORK in the ROOT of your site, with a third party FTP client, like Filezilla ...
... and then fix the code by replacing the file here:
background-
image: url(\'https://hello-site.ru/main/images/preloads/tail-spin.svg\');
... so:
background-image: url (\'tail-spin.svg\');
.
Autor
Good evening and/or good morning to you all,
I have great news to report. The Facebook page now works like a charm with using KolAsim's special code.
the sponsors are here: https://www.garfieldvictoria.com.au/sponbuspage.html
the facebook page is here: https://www.garfieldvictoria.com.au/facebook.html
I have renamed the Anchors to what they were before so I can identify who they belong to.
Many thanks for all your work KolAsim, it has been quite a learning curve for me too. I don't think I will need the part for Russia as I don't think I will have any viewers from there. My site is mainly aimed at the local market.
Another big thanks goes out to John S. for his solution, which I will be using on another project, so please don't feel your effort was not appreciated.
Thanks again to all of you for the assistance given to me on this project, I could not have made this work without you.
Kind regards and have a great weekend.
Cheers - John H
Good you found a solution.
In case something should want to take a look at my examples - this is not possible, as I have now removed them The page is not needed anymore.
... I have seen, and it also works well in the smartphone......
... consider that it is my exclusive invention, used by few because few have understood it, and that you have been able to use it quickly and correctly, better than others, and thanks for confirming......
... it can stay that way, but if you download and use the SVG preload from your site, as I said before, it would be even better, and for this you will decide if you want to do it ...
.
ciao
.