Tips, Expertise, Articles and Advice from the Pro's for Your Website or Blog to Succeed
Once we started developing applications in MuleSoft and storing our code in source control platforms like GitHub, Bitbucket, GitLab, or Azure, just to mention the most common ones, we needed to look into automating the process to deploy our applications either to CloudHub or an on-premise server.
In this post, I will try to explain how a MuleSoft application can be automatically deployed into CloudHub or an on-premise server from Azure DevOps as our main CI platform and source control platform.
The availability of third-party add-ons for Google Docs, Sheets and Google Slides have certainly made the Google productivity suite more capable and useful. If you haven’t tried them yet, open any Google document or spreadsheet in your Google Drive and look for the extensions menu near Help. Google Workspace users may have to ask their admin to enable support for add-ons for the organization.
For starters, Google add-ons are like extensions for Chrome. Extensions add new features to the Chrome browser and add-ons extend the functionality of Google Office applications.
Anyone can write a Google add-on with some basic programming knowledge for writing HTML and CSS for styling the add-on. The server side code is written in Google Apps Script which is similar to JavaScript but runs on the Google Cloud.
Google Add-ons are written in the Google Apps Script language but while regular Google Scripts can work on any document in your Google Drive, add-ons only work against the document or sheet that’s currently open in your browser.
The other big difference is that you can view the source code of regular Google Scripts while in the case of add-ons, the code is hidden from the end user. This helps developers protect their code but a downside is that the user has no clue about what’s happening behind the scenes.
We have seen issues with Chrome extensions and add-ons for Google Docs can be a target as well. For instance, an add-on can possibly email a copy of the current document or sheet to another email address? Or maybe it can share a folder in Google Drive with someone else. The good part is that add-ons listed in Google Workspace have been tested and reviewed by Google and, they go through a security review process if it requires access to sensitive scopes (like sending Gmail or accessing Google Drive).
The Google Workspace marketplace lists hundreds of Google add-ons and here are some of favorite ones that you should have in your Google Docs and Sheets. The are compatible with both GSuite and consumer Google accounts.
Related tutorial: How to Create a Google Docs Add-on
I have multiple .TXT files in a folder. Each text file has the same outline of paragraphs out of which I wish to select everything between 2 specific words.
I have a regex code for finding the particular text of interest.
The aim is to write a python code that can extract the desired text from all the .txt files and place it in an excel sheet next to the name of the .TXT file
Do you want to embed Facebook albums in WordPress?
Embedding Facebook albums is a great way to get more engagement on both your WordPress website and your Facebook page. It can also grow your social media following.
In this article, we’ll show you how to easily embed Facebook albums in WordPress.
Showing albums on your WordPress website can make your pages more engaging.
As you add more photos to Facebook, they’ll appear on your site automatically, so it’s also a great way to keep your website fresh, even for regular visitors.
You can even use embedded albums to promote your Facebook page. If visitors see lots of interesting photos then they’ll want to follow you on Facebook. This can get you some extra followers and more engagement.
WordPress used to come with built-in embed support for Facebook albums. Just like you embed a YouTube video, you could simply copy and paste the URL of any Facebook album and WordPress would display that album automatically.
However, Facebook and Instagram have since made changes to their API. These changes make it impossible for WordPress to continue oEmbed support for Facebook and Instagram.
If you try to embed a link to an album, then WordPress will tell you that ‘Sorry, this content could not be embedded.’
Thankfully, there is a way to fix Facebook and Instagram embeds in WordPress using a plugin.
Let’s see how you can easily embed Facebook albums in WordPress, including how to show a specific album on any page or post.
The best way to embed Facebook albums in WordPress is by using the Smash Balloon Custom Facebook Feed plugin.
This plugin lets you show Facebook albums, comments, reviews, community posts and more on your site.
It also lets visitors take a closer look at your photos and images without having to visit Facebook, by opening a lightbox popup on your website.
In this guide, we’ll be using the pro version of Smash Balloon as it allows you to embed Facebook albums, display videos, show photos in a custom Facebook feed, and more. However, there’s also a free version that allows you to create a custom Facebook feed for WordPress, no matter what your budget.
The first thing you need to do is install and activate the Smash Balloon Custom Facebook Feed plugin. For more details, see our guide on how to install a WordPress plugin.
Upon activation, you’ll need to go to Facebook Feed » Settings and enter your license key into the ‘License Key’ field.
You’ll find this information under your account on the Smash Balloon website.
After entering the key, click on the ‘Activate’ button.
Smash Balloon Custom Facebook Feed allows you to embed albums from your different Facebook pages and groups. You can even show the latest comments in a dropdown box below the photo, along with the like and shares.
To connect your Facebook page or group to WordPress, go to Facebook Feed » All Feeds and then click on ‘Add New.’
Smash Balloon lets you show posts from your photo albums, timeline, events, and more.
To embed your Facebook albums, you’ll need to click on ‘Albums’ and then click on ‘Next.’
Now, you need to select the Facebook page or group where you’ll get the albums from.
To get started, click on ‘Add New.’
On the next screen, choose whether you want to show albums from a page or group.
After that, just click on ‘Connect to Facebook.’
This opens a popup where you can log into your Facebook account and choose the pages or groups where you want to embed albums from.
After making this decision, click on ‘Next.’
Once you’ve done that, Facebook will show all the information that Smash Balloon will have access to, and the actions it can perform.
To restrict Smash Balloon’s access to your Facebook account, just click any of the switches to turn it from ‘Yes’ to ‘No.’ Just be aware that this may affect the albums and photos that you can embed on your WordPress blog or website.
With that being said, we recommend leaving all the switches enabled.
When you’re ready, click on ‘Done.’
After a few moments, you should see a message confirming that you’ve connected your WordPress website to Facebook. With that done, it’s time to click on ‘OK.’
Smash Balloon will now take you back to the WordPress dashboard automatically.
You will now see a popup with the group or page you just linked to your website. Simply select the radio button next to your source and then click on the ‘Add’ button.
If you accidentally closed the popup, then don’t panic. You can simply refresh the tab to reopen the popup.
After that, WordPress will take you back to the Facebook Feed » All Feeds page automatically. Just like before, click on the ‘Add New’ button, select ‘Albums’ and then click on the ‘Next’ button.
Now, select your Facebook page or group, and click on ‘Next.’
On this screen, you can choose the template you’ll use as the starting point for your feed. All of these templates are fully customizable so you can fine-tune the design depending on how you want to show the Facebook albums on your website.
We’re using the ‘Default’ template, but you can choose any template you want.
With that done, click on the ‘Next’ button.
Smash Balloon will now go ahead and create an album feed based on your source and the template you’ve chosen. This is a good start, but you may want to fine-tune how the albums appear on your WordPress website.
The Smash Balloon Custom Facebook Feed plugin gives you lots of ways to customize how the albums are displayed. With that in mind, it’s worth seeing what changes you can make.
On the Facebook Feed » All Feeds screen, find your album feed and then click on its ‘Edit’ button, which looks like a small pencil.
This opens the Smash Ballon feed editor, which shows a preview of your Facebook albums to the right.
On the left-hand side, you’ll see all the different settings you can use to customize how these albums appear on your site. Most of these settings are self-explanatory, but we’ll quickly cover some key areas.
To start, you can change how the albums are displayed by clicking on ‘Feed Layout.’
On this screen, you can switch between different layouts, such as masonry and grid, and change the feed height. As you make changes, the preview will update automatically so you can try different settings to see what looks the best.
By default, the feed will show the same number of posts on desktop computers and mobile devices such as smartphones.
You can preview how your albums will look on desktop computers, tablets, and smartphones using the row of buttons in the upper-right corner.
Mobile devices usually have smaller screens and less processing power, so you may want to show fewer albums on tablets and smartphones.
To do this, just type a different number into the ‘Mobile’ field under ‘Number of Posts.’
By trying out different layouts you can create a custom feed that looks great, no matter what device the visitor is using.
By default, the Facebook feed shows less columns on smartphones and tablets, compared to desktop computers. This helps all your albums and photos fit comfortably on smaller screens.
After testing the mobile version of your WordPress website, you may be unhappy with how the columns look on smartphones and tablets. If this is the case, then you can show fewer columns by changing the numbers in the ‘Columns’ section.
When you’re happy with the changes you’ve made, click on the ‘Customize’ link.
This will take you back to the main Smash Balloon editor, ready for you to explore the next settings screen, which is ‘Color Scheme.’
By default, Smash Balloon uses a color scheme inherited from your WordPress theme, but this screen allows you to switch to a ‘Light’ or ‘Dark’ look,
You can also create your own color scheme by selecting ‘Custom’ and then using the controls to change the background color, change the text color in WordPress, and more.
By default, Smash Balloon adds a header to your feed, which is your Facebook profile picture and the name of the page or group.
To change how this section looks, click on ‘Header’ in the left-hand menu.
On this screen, you can change the size of the header, its color, hide or show your Facebook profile picture, and more.
If you want to remove the header completely, then click to turn off the ‘Enable’ toggle.
By default, Smash Balloon shows the title of each album. If you want to hide the title, then select ‘Posts’ from the main Smash Balloon editor menu.
Then, click on ‘Post Style.’
Here, you can remove the album titles by clicking on the ‘Show album title’ slider.
This can be useful if your album titles distract attention away from the photos, or they don’t make sense when embedded on your website.
On this screen, you can also choose whether to show how many photos are in each album.
To add this number, simply click on the ‘Number of posts in album’ toggle.
By default, Smash Balloon doesn’t include the Facebook ‘like’ button in your feed. To get more Facebook followers, you may want to add this button by selecting ‘Like Box’ from the editor’s left-hand menu.
After that, simply click on the ‘Enable’ button so that it turns blue.
By default, Smash Balloon adds this button below your embedded photo albums, but you can change this by opening the ‘Position’ dropdown and choosing ‘Top.’
On this screen you can also change how the ‘like’ section looks including adding a custom call to action, showing how many people follow you on Facebook, and more.
When you’re happy with how the ‘like’ button looks, you can move on to the ‘Load More Button’ screen.
The Load More button encourages visitors to scroll through more of your Facebook feed, so Smash Balloon adds it to your embedded photo albums by default.
Since it’s such an important button, you can help Load More stand out by changing its background color, text color, and label.
Another option is to remove the button completely, by clicking the ‘Enable’ toggle.
By default, Smash Balloon allows visitors to look through your Facebook albums without leaving your website.
They can simply click on any album to open a lightbox, as you can see in the following image.
The visitor can then use the arrows to scroll through the album.
If they want to like a photo, leave a comment, or share the image with their Facebook friends, then they can click on the ‘View on Facebook’ link.
There are a few different ways that you can customize the default lightbox.
To see your options, click on ‘Lightbox’ in the left-hand menu.
Here, you can change the color of the lightbox’s text, links, and background colors.
The lightbox feature makes it easy for people to engage with your photos, but it also allows people to scroll through your albums without visiting your Facebook page. If you want to get more visitors to your Facebook page then you can disable the lightbox feature by clicking on the ‘Enable’ toggle.
Now, if a visitor clicks on an album they will be redirected to your Facebook page in a new tab.
When you’re happy with how the photo albums look, don’t forget to click on ‘Save’ to store your changes.
You’re now ready to add these albums to your WordPress website.
You can add your Facebook albums to WordPress using a block, widget, or shortcode.
If you’ve created more than one feed using Smash Balloon, then you’ll need to know the feed’s code if you’re going to use a block or widget.
Simply go to Facebook Feed » All Feeds and then look at the feed="" part of the shortcode. You’ll need to add this code to the block or widget, so make a note of it.
In the following image, we’ll need to use feed="4".
If you want to embed your Facebook albums in a page or post, then you’ll typically use the Custom Facebook Feed block.
Simply open the page or post where you want to embed your albums. Then, click on the ‘+’ icon to add a new block and start typing ‘Custom Facebook Feed.’
When the right block appears, click to add it to your page or post.
The block will show one of your Smash Balloon feeds by default. If you want to use a different feed instead, then simply find ‘Shortcode Settings’ in the right-hand menu.
You can now add the feed="" code to this box. After that, click on ‘Apply Changes.’
The block will now show the albums from your Facebook page or group. Just publish or update the page to make the albums live on your website.
Another option is to add the feed to any widget-ready area, such as the sidebar or similar section. This allows visitors to see your Facebook photos from any page of your site.
Simply go to Appearance » Widgets in the WordPress dashboard and then click on the blue ‘+’ button.
Once you’ve done that, find the Custom Facebook Feed widget.
Then, just drag it onto the area where you want to show the feed.
The widget will show one of the feeds you created using Smash Balloon.
To show a different feed instead, type the feed’s code into the ‘Shortcode Settings’ box and then click on ‘Apply Changes.’
You can now click on the ‘Update’ button to make the widget live. For more information, please see our step by step guide on how to add and use widgets in WordPress.
Finally, you can embed your albums on any page, post, or widget-ready are using shortcode.
Simply go to Facebook Feed » All Feeds and copy the code in the ‘Shortcode’ column. You can now add this code to your site.
For more information, please see our detailed guide on how to add a shortcode in WordPress.
Smash Balloon also allows you to embed a specific Facebook album anywhere on your WordPress site. This allows you to show your latest or best album to visitors, or to display an album that’s relevant to the rest of the page’s content.
To embed a particular Facebook album, you’ll need to buy and install the Album extension by going to Facebook Feed » Extensions.
Here, find the ‘Album’ extension and click on its ‘Add’ button.
This will open the Smash Ballon website in a new tab, with instructions on how to purchase the extension.
Once you have the extension, you can install it in exactly the same way you install a plugin. If you need help, then please see our guide on how to install a WordPress plugin.
After activating the plugin, go to Facebook Feed » All Feeds and click on ‘Add New.’
Under ‘Advanced Feed Types,’ select ‘Single Album’ and then click ‘Next.’
You can now choose the page or group that you want to use as your source, and choose a template by following the same process described above.
On the next page, you’ll need to enter the ID of the album that you want to embed.
In a new tab, simply open the Facebook album that you want to display.
You can now copy the numbers after the = symbol, and inbetween the first two periods. For example, in the following image we need to copy 447443907512397.
You can now paste these numbers into the WordPress dashboard.
After that, click on ‘Next’ and Smash Balloon will fetch the album.
After that, you can style the album and add it to your site following the same process described above.
We hope this article helped you learn how to embed Facebook albums in WordPress. You may also want to check out our guide on how to create a custom Instagram photo feed in WordPress, and how to create an email newsletter to connect with your visitors after they leave your website.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
The post How to Embed Facebook Albums in WordPress first appeared on WPBeginner.
This article is sponsored by BeTheme.
We had a heck of a year in 2020. Businesses were forced to pivot in new and creative ways. Consumers had to adjust. As a result, the web needed to change, too.
Before we get too far into 2021, it’s absolutely critical that we reflect on the changes of the past year. Because many of the web design trends that worked for pre-2020 consumers and businesses aren’t going to work anymore.
Today, we’re going to look at what the newest design trends will look like, why they’ve come about, and we’ll also check out examples of websites and BeTheme pre-built sites that are already making good use of them.
Whether you’re designing a site for a new client or you want to pivot an existing client’s site to align with post-2020 design trends, keep reading:
In years past, web design trends lists favored bolder color palettes and gradient schemes. If you wanted to quickly capture a visitor’s attention and elicit an emotional response, you’d use strong colors to do so.
But with all the drama, panic and fear that dominated 2020, we’re going to see brands tone down their usage of color in 2021.
That doesn’t mean that color can’t still be used to inspire visitors to feel a certain way. It just means that color palettes will inspire feelings of calm, comfort, and safety this year.
Bellroy, for example, is a company that sells carry goods — things like wallets, bags, and phone cases that keep people’s items safe and organized:
Although some of its products come in bright colors, the white space and photo backgrounds used on the website lean towards a more neutral and natural color palette.
The BeSpa pre-built website is another good example of soothing colors done right:
As you can see, a tamer color palette doesn’t have to translate to boring. It’s simply prioritizing a different set of priorities and emotions; namely, security and comfort.
Many people were stuck at home with very little to do but look at their screens in 2020. This led to a greater blending of their real lives with their digital ones.
In the past, web designers generally focused on creating websites with either photos or illustrations.
Photos allowed brands to depict real world scenarios as well as to show off their actual products. Illustrations, on the other hand, were useful for depicting abstract concepts and to explain highly technical products.
However, now that the line has blurred between the physical and digital worlds, web design can start reflecting this change, too. It doesn’t need to be one or the other.
Here’s an example of this in action from fashion designer Constance Burke:
Her portfolio could’ve gone either way in the past (i.e. real models wearing clothing she’s designed or a lookbook of hand-drawn fashion sketches). But she’s blended the two here in a very creative way.
You might also consider blending the physical and digital similar to how the BeSki pre-built site does:
The homepage starts with a photo of someone skiing. However, notice how the snow in the hero image eventually blends into the next section.
This isn’t just a white background. The top of the section resembles the top of a snow bank.
This section then transitions back to a real world image, only for it to once more go back to the digital design.
With more people shopping online than ever before, ecommerce sites need to be designed for more efficient pathways to conversion.
This is especially important as consumers grow wary of all the time they’re spending online. While they’ll still have to buy things online, they’re going to look for brands that help them get in and out of their online stores in a reasonable amount of time.
From providing add-to-cart shortcuts in product search results to designing more concise product page descriptions, we’re going to see more and more ecommerce sites provide quicker and pain-free shopping experiences.
Walgreens, for example, has a product page design that works well for ecommerce in 2021:
All the pertinent details about the product, special offers, and pickup/shipping options are available above-the-fold.
If anyone wants more information on the product’s specs or reviews, they can scroll to find them. Otherwise, those who are confident in their purchase, are empowered to take the next steps.
BePestControl’s pre-built site takes a similar approach to ecommerce design:
As you can see, the main selling points (i.e. the product name, price, and description) are kept short and sweet. For anyone who needs more information, the description and other specs are readily available beneath the “Add to cart” button.
These well-organized and shorter product pages (among other time-saving ecommerce features) will make online shopping a more enjoyable and satisfying experience for shoppers in 2021.
There was a time when video was all the rage on websites. Hero background videos would be the first thing people saw on websites. Animated explainer videos introduced complex technologies to prospective customers. And so on.
Thanks to people spending more time on video platforms like Zoom to connect with friends, family, and coworkers, it’s a medium they’re comfortable with right now.
As a result we’re going to see video make a comeback this year. However, there’ll be no auto-play backgrounds or embedded videos. Videos will only appear when visitors want them to.
To do this, web designers will need to include video “play” buttons into their designs. Here’s how Payoneer currently does it:
Notice how the white “play” button stands out amidst all that color. The recognizable icon lets people know the option to watch the testimonial is available if they’re interested.
BeOptics is a pre-built site that subtly interjects a video option into the mix as well:
Again, visitors don’t need to see an actual video player in order to recognize that there’s a video option here. The “play” button and the way it transforms upon hover will let them know they have the option to learn more by watching a video.
Trust has always been an important matter for businesses. But as more people are choosing to shop online instead of in person these days, trust builders are non-negotiable in web design.
As such, web designers will need to make more room for trust builders that increase consumer confidence. Things like:
If you want your website to convince prospective customers, clients, users, readers, or subscribers to take that big leap, consider which trust builders will be the most important for them to see.
Omaze, for instance, is a platform that gives people entries for prizes based on the donations they’ve made. Rather than focus strictly on the prizes, Omaze highlights all the good it and its donors have done:
It also has a space where it shows off reputable publications that have featured Omaze (which brings legitimacy to the organization):
And it uses data visualization and non-profit testimonials to provide further transparency about what’s happening behind the scenes:
Even if you’re designing a site for a much smaller organization (or even yourself), there are impressive trust builders you can put out there for visitors.
BePortfolio, for example, is a great example of how you could do this for your own portfolio site (or for a fellow creative’s site):
The home page has dedicated a lot of space to trust builders:
People want to feel safe and secure online and giving them more than enough reasons to trust your brand will go a long way in making that happen.
Things like minimalism and bold headline typography will never go out of fashion. But there are other trends from recent years that will need replacing as a result of 2020.
In order to bring greater feelings of security and comfort to consumers, web designers will be switching to calming color palettes, mixed website imagery, efficient ecommerce design, user-triggered video, and trust builders in the year to come.
We’ve already seen a small handful of real world examples that make use of these new web design trends. If you want to easily implement these trends in your own website designs, BeTheme has over 600 pre-built sites to help you out.
The post New Web Design Trends and Inspiration for 2021 appeared first on Codrops.