Software development, photography, jokes, ....

Sites by me

 
tas-logoTransportation Administration System
snoezelkussen-logo-kleinstSnoezelen Pillows for Dementia
ikzoekeenbegeleider-logoBegeleiders voor gehandicapten
Laat uw hond het jaarlijkse vuurwerk overwinnen
Betuweroute en Kunst
logo 50x50Hey Vos! Je eigen naam@vos.net emailadres?
Kunst in huis? Nicole Karrèr maakt echt bijzonder mooie dingen
nettylogo2Kunst in huis? Netty Franssen maakt ook bijzonder mooie dingen
Professionele opvang bij Gastouderbureau
Kind-Zijn
Salarisadministratie en belastingadvies bij
De Zaak Loont
Zutphense Bomenstichting

Hosting Favorites

 
ANU Internet Services
XelMedia .internet services
register.com
GoDaddy.com

Blogroll

 
Bomenstichting
MacFreak
Google Translate
PHP
MySQL
jQuery
jQuery UI
codecademy
YourHead Stacks API
Favicon Generator. For real.
Check HTTPS problems



Marc's Place


 
00-logo

Blogspot.stack v1.2
 
Display Blogspot blog on your own website

With the Blogspot.stack you can display any public accessible Google Blogspot-subdomain, aka Google Blogger-blog, on your own or your customer’s websites.

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.

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 add PHP code to, for example, 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.

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.

    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 : FontAwesome v4.7.0

    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.

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

    CSS

    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.

    Debugging

    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.

    Publishing

    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 History

    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 is out with the following changes:
    Released on 04 Oct 2018.
  • Some single quotes caused a crash with PHP 5.3 when using the Interblog-feature.
  • © 1997- Marc Vos (and others)   -   Privacy Statement   -    Contact Me