Stacks Image 332

Blogspot.stack

Display Google's Blogspot blog on your own website


With the Blogspot.stack, for use with Yourhead's Stacks-plugin for RapidWeaver , you can display any public accessible Google Blogspot-subdomain, aka Google Blogger-blog, inside your own or your customer’s websites, that you create(d) with RapidWeaver .

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.
The Blogspot.stack is a set of 4 so called ‘stacks’, for use with Yourhead Software’s Stacks plug-in , which in turn runs inside Realmac Software’s RapidWeaver .

After purchase, you may use it forever,
for any amount of websites you create,
commercial or non-commercial.

or

 

History and ...

Originally developed as a RapidWeaver page-plugin, named RapidBlog, by Loghound , then sold to Yourhead Software , where development halted, because the page plugin is old, needs updating, it’s not suited for mobile themes and doesn't fit into the Stacks-scene.

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

Stacks Image 22
Blogspot : this the controlling stack. All settings are made here, and it’s also the place where the posts are displayed.

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.

System requirements

These stacks have been tested on vanilla installations of macOS X 10.7 Lion through macOS 10.13 High Sierra, with PHP versions 5.4 through 7.1.7.

The results of these tests show that the Blogspot.stack will work with:

And ... in Blogger:
  • Remove any redirects to Feedburner.
  • Set the RSS-feed to 'full' : Settings -> Other -> Site Feed -> Allow Blog Feed : Full

    04-blogpost-rss-full

How to use

The fastest way to see what it is all about, is to:
  • 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
Stacks Image 32

Quick preview

Stacks Image 36
Stacks Image 34
Live previews

here Marc's Place (my blog)
and here SDS82
and here Snoezelen-pillow
and here Transadminsys.com

Read this blog post on how to redirect your Blogger-blog permanently to your own website.

How to use with themes with a sidebar

When you use a theme with a visible sidebar, then you can’t put any stacks in there. Stacks are bound to the main content area.
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.
Stacks Image 45
Stacks Image 49
Note: I have seen that some have a domain name and load their webpage there from a totally different domain, via an iframe. In that case, the generated RSS-feed link might be wrong. Instead of using the RSS-feed stack or code-snippet in these cases, place the following code everywhere ont the page where you want the RSS-feed to appear:

<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>

Settings

Blogspot.stack Settings

Stacks Image 53

Page settings (blue ones)

Domain
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.

    RSSfeed.stack Settings

    Stacks Image 316
    The RSSfeed.stack 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, uncheck this setting.

    Use FontAwesome Icons

    Stacks Image 295

    Use FontAwesome icons
    When checked, FontAwesome icons are shown before the author, date, categories, permalink, RSS-feed, etc.. You should uncheck this if your theme’s CSS adds background icons to these blogpost-items. You can of course modify the styles.css file of that theme and get rid of these background icon-settings.

    In general, the only FontAwesome icons that are supported, are the ones that Stacks supports.

    Blog-post sections

    Stacks Image 67
    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.
    If you want to omit certain sections form blog posts, choose the blank menu-option, as in this example:
    Stacks Image 210

    Interblog

    Stacks Image 75
    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.
    Stacks Image 82
    Stacks Image 84
    Note: when adding PHP code, you might get parse errors, like for example like this one:

    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

    Stacks Image 86
    When exactly the Interblog should be displayed, can be controlled by the settings ‘Insert after’ and ‘Repeat after’. Default value for both is 1, so the Interblog will be shown after the first post and then after each subsequent post.

    Inside blog-entry footer

    When this setting is checked, the Interblog-stacks are displayed at the bottom of blog-posts:
    Stacks Image 180
    When this setting is unchecked, the Interblog-stacks are displayed between blog-posts:
    Stacks Image 184

    Using blogpost attributes

    If you want to use parts of your blogpost in the Interblog-part, you can do so. The blogpost is made available in the PHP variable $myEntry, which is an array with the following 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>"; ?>

    Localization

    Stacks Image 94
    Translate the default labels to the language you need. For an world-wide audience, leave it in English.

    or

     

    You can style the various elements of the Blogspot-stacks by using their classes in the CSS-part of the RapidWeaver page. This is the list of classes:

    .blog-entry-title
    .blog-entry-body
    .blog-entry-date
    .blog-entry-category
    .blog-entry-permalink
    .blog-entry-author
    .blog-entry-comments
    .blog-category-link-enabled
    .blog-archive-link-enabled
    .blog-read-more


    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:

    .blog-entry-category a

    addresses all <a href="">...</a> category links.
    Stacks Image 267
    For PHP debugging purposes, I have added a checkbox which, when checked, switches all error display-settings to 'on'.
    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.
    When you publish your webpage via RapidWeaver, there's no problem. The publishing process places the files in their correct positions. But, if you export first to a folder on your Mac and then upload / sync per FTP, you need to upload / sync the rw_common/plugins/stacks/ folder too!
    After installing the update, you have to mark the page as changed and...
    Stacks Image 283
    .. and re-publish it, so the updated code files get uploaded to your server:
    Stacks Image 288
    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:
    • archiveMonths.xml
    • blogContents.php
    • blogEntry.php
    • blogspot.css
    • blogspot.js
    • bshelpers.inc
    • bspear.inc
    • bsremotegrab.inc
    • bsrequest.inc
    • bssocket.inc
    • bsurl.inc
    • bsxml.inc
    • feedtimeline.js
    • LHPEAR.php
    • localVars.php
    • rapidblog.js
    • rapidBlogHelpers.php
    • remoteGrab.php
    • Requestrb.php
    • Socketrb.php
    • URLrb.php
    • xmlrb.php
  • 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.
  • 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.
  • Smart Archives is a feature to speed up loading of your blog. Its goal is to store archive links locally in a file, and with future requests of your webpage, read that file instead of querying Google again. The file is updated once a day, so one of your website visitors may experience slower loading times, but only when you have more than 500 posts in your archives.

    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.

    On this website, Google Analytics is used to track visitor statistics. These are anonymized data about the number of visitors, which pages they visit on this site, from which regions they visit, which web browsers they use, etc..
    Privacy Statement