Display Google's Blogspot blog on your own website
The advantage of using this stack, is that only the blog-content is read and thus all RapidWeaver theme settings and styling will be used to display the blog posts.
Plus, the sidebar, menubar, and all of that, is also present because it is part of your website.
The CSS-part of the RapidWeaver page can be used to add styling to each blog post part, like I have done on my blog. You'll find more info further down this page.
The stack offers display options just for your website, like placing the Categories and Archives lists where you want them, or the Interblog-feature to place stacks in the footer of posts or between posts, and the option to determine the order in which the individual blog post elements are shown.
Another option is to use this stack on multiple webpages to list only blog posts of certain categories, like a webshop-filter.
Furthermore, if you know a bit of PHP, you can add PHP code to the Interblog-part. I have done that in my blog to generate the 'Tweet' and 'Google+' buttons in the footer of each blog post - no need to add these manually to each blog post in Blogger. And here I used Interblog to display 4 FontAwesome icons between blog posts.
And the best thing - use the most simplest of themes in Blogger and redirect your blog permanently to your own site , so visitors are always visiting your site, not Google's.
History and ...
And ... because I use RapidBlog everywhere I can, already since RapidWeaver 5, I really need a reasonable replacement for RapidBlog. One that’s made for the various screen-sizes we have nowadays.
I have no need for creating blog posts inside RapidWeaver. I can do that very well nowadays online with Blogger .
I will miss the integration with SiteMap Plus, but that’s a page-plugin too, and not suited for use with, for example, the Foundry theme and Stacks. So, that might be my next stack ;-)
In short, I just need all the display capabilities of RapidBlog in RapidWeaver, and to be able to freely place the various parts on a page, would be really something.
Currently, the only way to do this, is to take it on myself to develop something that will do what I need. In my opinion, the easiest way to get what I want, is to make a ‘stack’ out of RapidBlog, for use with the Stacks plug-in.
I asked Yourhead Software how they felt about that, and I got a green light .
As a coincidence, I just followed the Weaver’s Space Online Conference where Isaiah from Yourhead Software did a session on how to build stacks.
I love it when a plan comes together.
The four stacks
Blogspot archives : this stack displays a flat list, or a popup menu, of monthly archives found inside the blog. If you use a theme with a sidebar, see below how to place that list there.
Blogspot categories : this stack displays a flat list with links to categories found inside the blog. If you use a theme with a sidebar, see below how to place that list there.
Blogspot RSS Feed link : this stack displays a link to Blogger's RSS Feed of your blog. If you use a theme with a sidebar, see below how to place that list there.
The results of these tests show that the Blogspot.stack will work with:
- MacOS X 10.9 or higher
- PHP 5.4 or higher
- Realmac’s RapidWeaver v6 or later
- Yourhead’s Stacks-plugin v3.5.7 or later (not needed with RapidWeaver Elements)
- A Google Blogger / Blogspot blog .
And ... in Blogger:
- Remove any redirects to Feedburner.
- Set the RSS-feed to 'full' : Settings -> Other -> Site Feed -> Allow Blog Feed : Full
How to use
- Create new Stacks-page
- Drag the Two-Columns stack on the page and divide the columns 75% / 25%
- Drag the Blogspot stack into the left column.
Click the (i) to open the stack’s settings and enter your Blogspot subdomain name.
If you don’t have one yet, enter for example sds82 into the domain-name field. This will load the blog posts from https://sds82.blogspot.com/.
- Drag the Blogspot categories stack into the right column.
- Drag the Blogspot archives stack into the right column, below the categories.
- Drag the Blogspot RSS Feed link stack into the right column.
- Click Preview
How to use with themes with a sidebar
But, you can put the following code snippets in the sidebar to display the categories and/or archives in there:
<?php renderRSSlink(0 or 1); ?>
<?php renderCategoriesList(); ?>
<?php renderArchivesList(); ?>
Note: all code MUST be cleared of formatting and must be ignored.
Note: the renderRSSlink() function displays a 'Copy'-button by default. With this 'Copy'-button a user can copy the RSS feed link to the clipboard with one click. If you want to hide and disable this Copy'-button, pass 0 as the only parameter.
<div id="blog-rss-feed"><a class="blog-rss-link" href="https://your.iframe.website.com/index.php?rssfeed" rel="alternate" target="_blank" type="application/rss+xml" title="RSS Feed">RSS Feed</a> <button class="rss-copy-button" onclick="copyToClipboardCN('blog-rss-link', 'href')" title="Copy RSS link to clipboard" style="cursor:pointer;">Copy</button></div>
Page settings (blue ones)
- Subdomain part of ‘subdomain.blogspot.com’
- Categories filter
- Only show posts and an archive-list of specific categories. If you specify more than 1 category (comma-separated), only posts which have all specified categories will be listed. So 'books,trains' lists only posts which have both these categories.
If, for example, you post about books and magazines, you can create a webpage on your website about books, add the Blogspot.stack with a category-filter on 'Books', then create another webpage on magazines and add the Blogspot.stack with a category-filter on 'Magazines'.
See for an example my 'Books & Manuals' page, which lists only posts having the category 'books'.
Note : Blogger category-names are case-sensitive! So 'books' and 'Books' are totally different categories!
- Show RSS link
- Show a link to the Blogger RSS feed. Next to the link is a button by which one can copy the link to the clipboard with a simple click.
- Enable categories
- When checked, the categories-list is loaded, whether you display it, by using the stack or the code-snippet, or not.
- Enable archives
- When a menu-option is set (not blank), the archives are loaded, whether you display it, by using the stack or the code-snippet, or not. (popup menu) = show the archives-list as a popup-menu, instead of a flat list.
- Archive dates
- How the title of the archive links should be formatted.
- If you choose '2000', links are per year.
- If you choose any other option, links are per month.
- Show archive count
- Show the number of posts in that month, or year, next to the title.
Blog-post settings (grey ones)
- Posts per page
- How many post should be listed on one page.
- History (days)
- ‘Posts per page’ from last week, last month, etc..
- Enable permalinks
- Show permalinks to posts withtin every post.
- Blog title is permalink
- When checked, the title is the permalink and no separate permalink will be shown.
- Date & time formats
- Well, ehm....
- Comments from
- Which commenting system to use. Currently only Blogger and Disqus are supported.
- Display various pages as a summary
- Show only part of the post, with a ‘Read more...’ link.
- Note: The use of the jump-break (<!--more-->) or the setting 'Main page as summary' can break formatting of a post, when the part for the summary is placed in the middle of DIV, SPAN, P and or PRE tags. In such a case, the closing tags are missing. The Blogspot.stack tries to calculate which closing tags are missing from DIV, SPAN, P and/or PRE tags, and adds them at the end of the summary, when needed. This ensures a correct display of your posts. But ... you should really try to limit the use of these tags in your posts, because even this smart solution might not always yield the expected result.
Use FontAwesome Icons
In general, the only FontAwesome icons that are supported, are the ones that Stacks supports.
- Alternate ordering
- When checked, 7 popup-menus will show up. Use these to determine the order in which the various parts of a blogpost should be displayed.
- Add stacks between blog posts
- When checked, a Stacks-container opens up inside the Blogspot stack and two counters are shown in the settings pane.
- In blog-entry footer (default)
- When checked, the content is shown inside, at the bottom, of the blog-entries.
When unchecked, content is shown between blog-entries.
Parse error: parse error, expecting `','' or `';'' in /private/var/folders/my/x59nw8817yq1j0swv9vx9skw0000gn/T/com.realmacsoftware.rapidweaver/RapidWeaver/62452/document-0x6000003f6100/RWDocumentPagePreview/files/bshelpers.inc(182) : eval()'d code on line 1
Here, I forgot an apostrophe somewhere.
So please be very careful and test your code before publishing.
Quick Interblog preview
Inside blog-entry footer
Using blogpost attributes
$myEntry['POSTID'] = a Blogpost-ID
$myEntry['SELF'] = index.php?id=(a Blogpost-ID), for example index.php?id=7818122989699959676
$myEntry['TITLE'] = Blogpost title
$myEntry['BLOGGERSEO'] = Blogpost title, lowercased and spaces replaced with underscores. This one is added to the permalink, for example.
Note: write these exactly as you see here, regarding lower- and uppercase characters, otherwise you'll het errors or crashes.
Note: use a backslash in front of the $-sign when coding PHP-variables, otherwise you'll het errors or crashes.
Example code I use to show a Tweet and Google+ button for each blogpost (notice the backslashes in front of each PHP-variable):
<?php echo "<a href='https://twitter.com/share' class='twitter-share-button' data-url='https://marc.vos.net/" . \$myEntry['SELF'] . (!empty(\$myEntry['BLOGGERSEO']) ? '/' . \$myEntry['BLOGGERSEO'] : '') . "' data-text='" . \$myEntry['TITLE'] . "' data-count='horizontal' data-via='MrMacvos'>Tweet</a> <g:plusone size='medium' href='https://marc.vos.net/" . \$myEntry['SELF'] . (!empty(\$myEntry['BLOGGERSEO']) ? '/' . \$myEntry['BLOGGERSEO'] : '') . "'></g:plusone>"; ?>
This is the list of IDs:
#blog-rss-feed (The RSS-feed link on a page)
#blog-older-posts(The DIV surrounding the 'See older posts ...' link at the bottom of a page)
#blog-next-page (The ‘See older posts...’ link at the bottom of a page)
#blog-empty (The 'No posts found' text)
If you add a single ‘ a’ behind a class or ID, then you address the links inside that div with that class or ID, for example:
addresses all <a href="">...</a> category links.
That way you can see any PHP warnings on screen.
If you do, please make a screenshot and send it to me. Then switch this setting off again and republish the page.
- Version 1.0
- Intial release on 18 feb 2018.
- Version 1.1
- Released on 21 feb 2018.
- Added 'In blog-entry footer (default)' to the Interblog-settings.
- Version 1.1.1
- Released on 22 feb 2018.
- Bug fixed in XML parser.
- Version 1.1.2
- Released on 23 feb 2018.
- Bug fixed when viewing a permalink.
- Permalinks now have the Google SEO name added to their URLs.
- Version 1.1.3
- Released on 23 feb 2018.
- You may now also enter the complete domain, like myblog.blogspot.nl, if you feel more comfortable about it.
- Domain check: if the domain you entered, doesn't exist, an error is displayed at the top of the page. In Preview and real-time mode.
- Some PHP4 code removed.
- Fixed E_STRICT and E_DEPRECATED errors. Not simply by switching error-reporting off, but really fixing the code!.
- Version 1.1.4
- Released on 27 feb 2018.
- Known issues with deprecated, removed and changed PHP calls from PHP v5.4 through v7.1 : fixed
- Some other bugs fixed.
- Added a checkbox 'Display errors on', which shows possible PHP warnings. Use it on your local machine and on your live site and then please report any warnings and errors you see (Deprecated: , Warning:, Notice:, Fatal error:), to me, with screen-shots. Then switch it of again.
- Added YEAR-only option to archives. When selected, archive-links are shown as 1 link per year, and when 'Show archive count' is checked, with the number of posts per year.
- Removed 'Show author' checkbox - you can swicth it on or off in the 'Alternate ordering'-settings.
- Added the option to leave out blogpost-sections inside 'Alternate ordering'. If you don't want a certain section in your blogposts, check 'Alternate ordering' and choose the 'blank' option for that section.
- Added the RSS feed link as a stack. Instead of being always on top of the blog, you can now place it anywhere you prefer, or use this code snippet: <?php renderRSSlink(); ?>
- Included FontAwesome via Stacks API.
- Cosmetic changes.
- Version 1.1.5
- Released on 05 mar 2018.
- Better error handling.
- Reports error message from Blogger, when there is one.
- Added localization field for 'No posts found' string.
- When no posts are found, a 'No posts found'-string will be shown. If you do not want this message displayed, simply empty the corresponding localization field.
- The categories-list is now sorted case-insensitive. Categories in Blogger are case-sensitive!
- Added a category-filter to only show posts and an archive-list of specific categories. If you specify more than 1 categpry (comma-separated), only posts which have all specified categories will be listed.
- Moved the common shared PHP code files to the side-wide assets folder.
This means that you can clean-up the 'files' folders inside your blog-folders.
To do this, first republish all your blog-pages with RW, then start your FTP client. Open your site folder, open the folder of the blog-page, open the 'files' or 'index_files' folder and delete all of the following files, when you see them there:
- Moved the common shared PHP code files to the side-wide assets folder.
- RSS feed link is a link again.
- Various internal bugs fixed.
- Updated the documentation on this page.
- Version 1.1.6
- Released on 05 mar 2018.
- Some oddities fixed
- Version 1.2.0
- Released on 16 mar 2018.
- You can now change FontAwesome icons. There is a new section, called 'FontAwesome Icons', where the checkbox has been moved to and input fields are added where you can change the icons, supported by Stacks : https://fontawesome.com/v4.7.0/icons/
- The RSS-feed link now links to XML data, generated by the Blogspot.stack, on your own webpage. The XML data is pulled from Blogger and the links to your Blogger-posts are changed so they point to your webpage's blog. When you have chosen to filter the posts by category or categories, the RSSfeed data is also filtered by those same categories.
- Added a blank option to the 'Time format'-popup menu. When chosen, only the post's date will be shown.
- Removed the 'Show RSS link'-checkbox. If you want to list the RSS link, place the 'Blogspot RSS Feed link'-stack where you want it, or use the code snippet.
- Removed the 'Enable categories'-checkbox. If you want to list the list of categories, place the 'Blogspot Categories'-stack where you want it, or use the code snippet.
- Added CSS to .blog-entry and .blog-entry-body classes, so the use of float and other styles do not affect the layout.
- Version number in edit-mode now shows the actual version number.
- Some oddity with server locales / timezones when formatting the archive dates correctly has been fixed.
- A problem with detecting if Blogger is reachable has been fixed.
- Some problems with showing Blogger or Disqus comments have been fixed.
- The localized string for 'Comments' was not used with Disqus comments. Fixed.
- Some problems with displaying UTF8 characters in localization strings have been fixed.
- Changed all HTTP URLs to HTTPS URLs where appropriate
- Version 1.2.1
- Released on 19 mar 2018.
- When using Disqus, you can now have the number of comments shown, in each post.
- Categories, archives and the RSS-feed would not render with some PHP installations. Reason: on those servers PHP is not allowed to fetch data via regular PHP commands. This has been fixed by using HTTP requests.
- Version 1.2.2
- Released on 16 Apr 2018.
- Fix that caused a parse-error on PHP v5.3 or lower.
- Version 1.2.3
- Released on 05 Jun 2018.
- Fix that caused an unexpected '[' on PHP v5.4 or lower.
- Fix that caused an unrecognised constants SORT_NATURAL and SORT_FLAG_CASE on PHP v5.3 or lower. If PHP 5.3 or lower, SORT_STRING is used.
- Added a META tag in the HEAD-section which contains the actual PHP-version.
- Version 1.2.4
- Released on 04 Sep 2018.
- Texts with wrong information in supporting stacks have been removed.
- The 999 number of posts when a category was clicked, has been fixed. Now, the number of posts to show from the settings is used.
- The link 'See older posts' is now enclosed in a DIV and does not float right of a small blog post any more.
- RSSFeed.stack has been updated to v1.1.0:
- A new setting has been introduced to show or hide the 'Copy' button. When enabled and the user clicks this button, the RSS Feed link is copied to the user's clipboard.
- RSSFeed.stack has been updated to v1.1.0:
- Version 1.2.5
- Released on 04 Oct 2018.
- Some single quotes caused a crash with PHP 5.3 when using the Interblog-feature.
- Version 1.2.6
- Released on 03 Apr 2019.
- The 'jump-break' from Blogger is now honoured, regardless of the 'as a summary' setting. This means you can now add 'Read more...' links to single posts yourself, as you wish, without having to switch to 'Summary'-mode for all posts. A jump-break is added by entering <!--more--> in your text on the spot where you want the text to break. More info about the jump-break.
- The 'Read more..' link is now only added when the length of the whole post is not equal to the length of the summary.
- Version 1.2.7
- Released on 05 Apr 2019.
- The use of the jump-break or 'Main page as summary' can break formatting of a post where DIV, SPAN, P and or PRE tags are used, because the closing tags would be missing. The Blogspot stack now tries to calculate which closing tags are missing from DIV, SPAN, P and/or PRE tags, and adds them when needed. This ensures a correct display of your posts. But ... you should really limit the use of these tags in your posts, because even this smart solution might not work as expected.
- The 'Show comment count' now uses your Disqus shortname. In previous versions, it uses a hardcoded test-counter.
- Implemented Sparkle-updates so you can now update to new versions from within Yourhead Software’s Stacks plug-in .
- Version 1.2.8
- Released on 28 Nov 2019.
- Google reduced the number of posts returned at a time to 150. Therefore some internals would jump to the wrong set of posts and so skip some posts that would then not be visible in the Archives-list.
- An error with an unused variable has been fixed.
- Version 1.2.9
- Released on 05 Feb 2020.
- Sorting of categories case-insensitive did not work with PHP7. This has been fixed.
- A new feature has been implemented to speed up the loading of Archive-links. See the Smart Archives section next to this section.
- Version 1.3.1
- Released on 12 May 2020.
- Removed an error that occurred before building the archives-list.
- Version 1.3.2
- Released on 16 June 2020.
- Removed an error that occurred before building the categories-list, when you have no categories.
- Version 1.3.3
- Released on 16 June 2020.
- Removed an in PHP 7.3 deprecated parameter. Not to worry, the code still works on older PHP-versions.
- Version 1.3.4
- Released on 16 November 2021.
- Now works with PHP 8.
- Version 1.3.5
- Released on 8 December 2021.
- Sometimes URLs were not encoded and the request would crash on the plus-sign of the time zone: +02:00.
- Version 1.3.6
- Released on 23 February 2022.
- Fixed URL encoding issues.
- Version 1.3.7
- Released on 8 March 2022.
- Fixed URL encoding issues for PHP 6 and earlier.
- Version 1.3.8
- Released on 3 May 2022.
- Fixed date formatting and other issues for PHP 8.1 and higher.
- IMPORTANT after updating to v1.3.8: Due to a caching mechanism in RapidWeaver, you have to reselect the date formats in the stack's settings, otherwise one will see %-signs in the dates and times of your posts. Simply select another date format and then reselect the original date format. The same must be done for the time, too, even when initially no time was selected. After having done that, republish the page
- Version 1.3.9
- Released on 21 October 2022.
- Replaced getting remote data with improved functions (thanks to Gregory from ChilliDog Software).
- Version 1.4.0
- Released on 19 Juy 2023.
- Old curly braces code fixed.
There are some important settings on the server to get this to work.
The Smart Archives feature assumes a subfolder 'files', which normally is created when publishing a Stacks-page:
This folder must be writable by Apache (the webserver).
If you use Panic's Transmit , then you can see if that is the case.
In the following examples, I will show you how that looks and how you can change it:
If Apache is mentioned as 'owner', the folder is writable and you do not have to change anything.
When Apache is mentioned as 'group', you have to click the empty circle for 'group' only, leaving the 'world'-circle empty, and click 'Apply' (do not click 'Apply to Enclosed'):
In my case, 'files' is not writable by Apache, because Apache is not mentioned as 'owner' or 'group', and 'world' may not write:
Click the empty circles under 'Write' to make the folder writable by 'group' and 'world' (i.e. any user), and click 'Apply' (do not click 'Apply to Enclosed'):
The Blogspot.stack checks if the subfolder 'files' is writable or not. If not, it will function normally as before, and pull the archives from Google on each webpage request.