Blogger embedded in Xara design- publish comment jumps to Google page

Hi,

I'm trying to create a blog page on a site designed with Xara. I have created the Google Blog, added an iFrame in Xara with code to open the blog on my Xara webpage. Works fine. However, if I add a comment, as soon as I click on Publish, it jumps to the Blogger webpage instead of remaining in my embedded page.

WegPage

Add a comment, publish to see what happens. The back button at the top of the web page goes back to the site.

Does anyone have a solution to this?

Note that I am using Xara hosting.

Thanks,

John. I presume this is a google function and one has to log into their google account or sign up for the blog. I did leave a comment to test but there’s no log in communication.

John, when you create your Placeholder as an IFRAME, you will need to give it a name (e.g., name="jaysblog".
The the IFRAME can be controlled through some JavaScript.

As to how, I don't know but in the REPLY or Publish buttons you would need to override the target="_self" parameter with target="jaysblog".

You may have to look for a way to embed the blog directly, avoiding IFRAMES.

Acorn

@bwood,
Hi Bill,
In Google Blogger, you can set up various levels for authors, members of the blog and those who can comment. For commenting, the choices are: 1. Anyone (including anonymous) 2. Users with Google Accounts 3. Only members of this blog. I had selected 2.

@Acorn
Hi Acorn,
Thanks for replying. The example was not an iFrame, just a placehoder with HTML body code:

<object data=https://name_of_blog.blogspot.com width="800" height="800"> <embed src=https://name_of_blog.blogspot.com width="800" height="800"> </embed> Error: Embedded data could not be displayed. </object>

I have created a copy with an iFrame with:

<iframe id=”iShareBlog” name="iBlogger" src="https://name_of_blog.blogspot.com" width="100%" height="100%" frameborder="0" scrolling="auto" ><p>Your browser does not support iframes.</p></iframe>

That is about the limit of my knowledge with iFrames and scripting.

What is the purpose of id= and name=?

Also, when I do publish a comment and it goes to the Google page, going back does not refresh. Any idea as to how to automatically refresh upon returning to the website blog?

I don't see any way to get to the target of Publish, so there is no way to add code.

Edit: I just found that there is an option to have a popup for the comment. I have switched to this. Still need a refresh method or button.

Thanks,
John

John, glad you found a comment pop-up.
As I have never used Blogger, I don't know what API is available to manipulate it.
It does seem odd that there is no trigger on
I wasn't getting the Google jump as I was already signed in!

For an IFRAME, in general, the id is a marker so you can target its variable HTML tags for further processing.
Its name allows you to send change to the IFRAME and not its parent.

Using the <object> tag (and the fallback to <embed>), you might have to code to force a refresh.

Give the object an ID, id="iShareBl" say.

JavaScript code:
var blObj = document.getElementById('iShareBl');
var blUrl = blObject.getAttribute('data');
blObj.[COLOR=var(--highlight-color)]style.visibility = [/COLOR][COLOR=var(--highlight-literal)]null[/COLOR][COLOR=var(--highlight-color)];[/COLOR]blObj.setAttribute([COLOR=var(--highlight-variable)]"data"[/COLOR], blUrl);
lbObj.style.visibility = [COLOR=var(--highlight-variable)]"visible"[/COLOR];
You would wrap this in a function definition and add a function call as the link of a button on the parent page.

I was hoping for a simpler IFRAME call of the button link of simply blUrl and setting the target to the name of the IFRAME.

A trigger on the opening of the Comments pop-up would be far tricker to set up.

Acorn

Hi Acorn,

Thanks for the info.

Javascript is beyond my pay grade (0). I started learning it last night - too much.

I found this on the Blogger forum that seems to be a button to refresh the Blogger iframe:

Quote:

---

script opening a Click-To-Reload iframe inside a widget doing the trick.

<input type="button" id="btn" value="refresh" />
<iframe width=240px" height="240px" id="iframeid" src="https://WHATEVER"></iframe>
<script>
function reload() {
document.getElementById('iframeid').src += '';
} btn.onclick = reload;
</script>

This only refreshes the iframe and not the whole webpage

---

If I understand correctly, I could put this on a button and in place of "iframeid" use the actual id of the Blogger iframe. Is this correct?

Also, some code was proposed to refresh the iframe at set intervals. It was not resolved. This would be better than a button.

I suggest that you take a look at Blogger as it has many interesting features. Under the theme that I used, one can open and modify the HTML code - again, way beyond my pay grade.

Thanks,

John, I will look at Blogger now you've piqued my interest.

In Xara, the code will be even simpler.
Create a Shape for your button.
In its link, put:
javascript: document.getElementById('iframeid').src += '';

Change iframeid to what your IFRAME identifier is.
javascript: document.getElementById('iShareBlog').src += '';

All this is doing is forcing the IFRAME to a new URL, which happens to be the same it currently is.

TG hijacking my <object> code with colour tags.
It should be:
var blObj = document.getElementById('iShareBl');
var blUrl = blObject.getAttribute('data');
blObj.style.visibility = null;
blObj.setAttribute("data", blUrl);
lbObj.style.visibility = "visible";

Acorn

Hi Acorn,

I tried your button code with the Javascript in the link and got a blank page. I have no idea what to the other code.

I tried the code that I sent you before and tweaked it a little.

Here is the result.

I get a button at the top of the frame that does the refresh.

I put the code in the text box above the blog.

Is there any to change the size, font and colour of the button? If so, how?

I'm now looking at how to be able to add a blog item. I missed something in the Blogger setup, I think.

Thanks,
John

John, I guess you have Firefox.

Try javascript: void document.getElementById('iframeid').src += '';

Go to W3Schools for how to alter an HTML Button's appearance.
Far easier using Xara.

Acorn

Hi Acorn,

Thanks for the link to W3Schools. Great stuff and easy to understand.

However, my attempts to change that button only gave me red text.

Quote:

---

<input type="button" id="btn" width="500" height="200" style="color:red;"
style="font-family:lato;" style="font-size:300%;"
value="Click here to refresh after adding a comment" />
<iframe width="100%" height="100%" id="iShareBlog" src="https://ishareclub.blogspot.com"
scrolling="auto"
></iframe>
<script>
function reload() {
document.getElementById('iShareBlog').src += '';
} btn.onclick = reload;
</script>

---

I added a button with your link to and it does nothing. See the above script that has the function to reload. I think that something is missing.

Are you able to create a comment (on the first post) then refresh to see if the number of comments increases?

Same link.

I am using Edge and Chrome.