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.

I found the Blogger API HERE.
I have no idea what to do with that.

Quote:

---

Originally Posted by browj2

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.



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.

---

John,

You can if you want just use a standard Xara 'Link to' with the Function provided:

Attachment 131935

This works as expected by reloading the page, although for me it also reloads the Google cookie each time. The API is useful but you're into some coding here.

Gary

Hi Gary,

I presume that reload means that it reloads the page, not just the blog. Correct?

Looks good!

Thanks,

Hi John,

Poor use of terminology by me; it reloads the blog only.

Gary

@Gary, thank you for getting it working as a function call; the in-line version ought to have also worked.

Acorn

I have updated the test site. @Gary, I changed the buttons as yours looks much cleaner.

I don't see how a reload on the button only reloads the blog as there is no reference to the blog iframe.

Quote:

---

Originally Posted by browj2

I have updated the test site. @Gary, I changed the buttons as yours looks much cleaner.
I don't see how a reload on the button only reloads the blog as there is no reference to the blog iframe.

---

John, it is because the standard deems a change of an IFRAME URL to be a DOM change, which requires a full refresh of the IFRAME document.
The same would happen with my other suggestion of just changing the IFRAME visibility.
The forced addition of nothing (+="") is therefore enough to trigger the refresh.

Acorn

Thanks Acorn, understood.

My next trick will be to try to figure out how to change the theme colour slightly of the Blog to be the same as my theme. My change in Blogger did not do what was intended and gave the wrong colour scheme. I'll check the Blogger user forum.

@Gary, if you go into the other items on the menu, Market and Uranium, you'll see that I put to use the info that you posted about Google Sheets. Thanks for that. Google Sheets was a new learning experience for me.

Quote:

---

Originally Posted by browj2

Thanks Acorn, understood.

My next trick will be to try to figure out how to change the theme colour slightly of the Blog to be the same as my theme. My change in Blogger did not do what was intended and gave the wrong colour scheme. I'll check the Blogger user forum.

@Gary, if you go into the other items on the menu, Market and Uranium, you'll see that I put to use the info that you posted about Google Sheets. Thanks for that. Google Sheets was a new learning experience for me.

---

Start with Themes and pick Customizer, you can enter the exact colour for the main theme and through advanced change any of the element colours:

Attachment 131937

Remember to SAVE - it's tucked away on the bottom right of the browser.

Good you found the Google Sheets demo useful :-bd

Gary

Gary,

The main color theme just gives one colour, that of the text background at the right of the darker colour. Changing it to my colour make the dark part black and the light part my colour. Instead, I went into HTML and changed the groups Body and Featured Post from 25a186 to 00b35b. I'll probably change the rest as well.

Now to change the lighter colour that matches this a bit better, or just leave it. From the Xara template, it looks like edede1 would be better.