In this video, Marcus explores three FREE plugins that extend the capabilities of the new WordPress 5.0 Gutenberg editor.
These days, having a social media presence is almost as important as setting up a website for your business. Some people choose to focus on one over the other, but there’s no reason why you can’t have both a healthy social media presence and a compelling WordPress website. In fact, you can even find ways to integrate the two.
In this article, we’ll cover three types of WordPress social media integrations, including:
Using a WordPress social media plugin.
Integrating WordPress with social media using a third-party platform.
Leveraging your social media platform’s embed functionality.
There are a lot of options when it comes to combining social media with WordPress, so let’s get right to work!
Why You Should Integrate WordPress With Social Media Platforms
If you have a moment, go check out a few of your favorite websites right now. We’re willing to bet that all of them have social media profiles set up, and most probably display links to multiple platforms. The reason website owners go through all that effort is because social media is one of the best ways to drive more traffic to your website and share your content.
The problem is that your website and your social media profiles are different entities, even if you use largely the same content on both, with www.socialfirestarter.com you can find the right help and advise for your social media . This means they each need to be managed separately, which can add up to a lot of work.
By finding ways to integrate WordPress with social media, however, you can cut down on that amount of work significantly. Plus, these integrations often come with a host of other benefits, such as:
Driving additional traffic. As we mentioned earlier, social media platforms are fantastic sources for organic traffic.
Providing new channels to engage your users on. The more social media platforms you’re active on, the more likely it is that your visitors will follow you on at least one of them.
Making it easier for users to share your content. For example, integrating WordPress with Facebook can enable your visitors to share your posts with a single click, leading to more views and exposure.
Some other good ones that just didn’t make the video this time (there’s a lot of feature overlap, but each has its own unique block offerings as well):
The Transcript
Hey, YouTube, it’s Marcus from HeadingTwo. Happy 2019. I know it’s February. We’re a little late out of the gates, but we’re getting this thing goin’.
As you might know, WordPress recently went to version five, which included Gutenberg as the new editor. So we’ve figured, to get things started off, we will look at some ways to extend the Gutenberg plugin with some other blocks, so let’s take a look.
Advanced Gutenberg
The first plugin that we’re gonna take a look at is called Advanced Gutenberg. So I’m gonna head over to our plugins where I’ve already got these added, and activate Advanced Gutenberg. We’ll head to Posts and we’ll just take the default post that comes with WordPress and we’ll look at that.
The first thing that you’ll notice about Advanced Gutenberg blocks is that they’re in this kind of purple color, mixed in will all the rest. And we’re gonna start with one called Advanced Image. A few things that make this an advanced image over the normal Gutenberg image, but we’ll add this photo here and I’ll give it a title of Cocoa Beach, and then subtitle which is the first thing that makes it an advanced image. We’ll just add the pier from my drone, which is a picture that I took from my drone in Cocoa Beach. And we’ll slide over here to the settings and take a peek and see, first off you can see that you can link to the image. You can change the width to the full width of the block and adjust the height a little bit so that we can see some more. These color settings are for the title and for the subtitle. So we can change those to make that a little bit more visible. And then there’s an overlay when you hover. So I’ll change that to white. And we’ll close that up. You can also change the alignment of the text, so maybe we can slide it to the bottom left. And now of course you can’t see the text anymore so let’s hop back to the color settings and we’ll change that to white. Change the subtitle to white and maybe the overlay to a darker color instead. So now when you hover you see a dark gray color. So let’s close that up. Let’s update the post and go take a look and see what we ended up with. And just like Gutenberg promises, we kind of see what it was that we saw in the back end. So let’s go ahead and edit this post again, and we’ll clear this advanced image block out and go ahead and add a different block.
Let’s go with Advanced List down here. So right off the bat, it’s mostly the same as a normal list. I’ll go ahead and add a couple of items real quick so that we have a list. You could change the list to an ordered list if you wanted to, or leave it none ordered list. I think we’re gonna go ahead and leave it none ordered list for now. And we’ll slide over here to the settings to see what makes an advanced list. First thing is changing the icon. As you can see on the left over there, changing the icon gives us whatever we want out to the side. So let’s bump the size up a little bit so we can see what we’re doing. And we’ll slide down to icon size. We can change that to whatever we want. Change the line height of the items themselves. Change the margin for the icons or the padding for the icons and the items themselves. And then lastly, what we can do is we can also change the color of these icons to whatever color we want. So maybe kind of this red, pinkish color. And we’ll update the post. And let’s go take a look and see what that looks like. Again, looks just on the front end the same as you would expect based on it looking that way in the back end editor.
So let’s hop back in here. We’ll get rid of this and we’ll take a peek at maybe one more block from Advanced Gutenberg. The one I want, I don’t see right up in the common elements. You can go ahead and click through the tabs to try and find all the different ones but I know which one I’m looking for so I’ll go ahead and just search for it. And we’ll add this Social Links block. And maybe for this first one we’ll add Facebook and then that’s the icon there. And we’ll go ahead and put in our Facebook URL. And we’ll click over to the second icon and make that a Twitter link. And for this last one, let’s do Instagram. And let’s go ahead and save that. And look at the post. And voila, we have some tiny icons. So let’s go maybe make those a bit more noticeable.
Let’s hop back to our block. And then we can change the icon size. So maybe we’ll bump that up to about 40 or so. We’ll change the spacing a little bit to give them some breathing room. And then let’s change the color. Maybe we’ll do our HeadingTwo branding red. So we’ll do that and you do have to switch the icon colors individually, which is actually a good thing if you wanted to make you know, the Facebook, Facebook blue and the Twitter, the Twitter blue, and the Instagram, whatever Instagram’s color is. And we’ll go ahead and update that and go ahead and look at our post. And there we go. We have some bigger, red icons. And if we click on the Twitter one, it’ll pop open a new tab and you see the Twitter page.
CoBlocks
The next plugin we’re gonna take a look at is called CoBlocks or C-O Blocks. So let’s hop over to plugins and activate that one. And then we’ll head back to posts. Posts and our post that we’ve been working with, and let’s take a look at, I’m gonna call them CoBlocks. Now they’re here in this kind of purple color, maybe that’s a blue. But they also have their own tab as well. You can see all the blocks in one place that belong to CoBlocks. And we’re gonna start with kind of a fun one. Let’s go with click to tweet.
Here in this box, I’m just gonna go ahead and type something that somebody would surely want to tweet from my blog. And let’s just go ahead and save this and see what we get just with that. Go to view post. And kind of as you’d expect, you see the Twitter block and we have this little tweet button down here. When you click that, it goes ahead and fills in the quote and the link to the site where the quote came from. Very cool. So let’s edit this post.
One of the other interesting things about this is that you can add your username for Twitter in there as well. And when you update and save that and go to the post, and now when we hit the tweet button, it’ll actually add via and your user handle to the end, which is really cool. That way you get notified when somebody mentions that quote on Twitter. So that’s a very cool one. Let’s edit this and let’s go ahead and kill this block and take a look at another fun one that CoBlocks has.
Slide down here to this tab and we’ll pick this one for gifs. This is actually straight from Giphy. They’ll look it up. So you type in a search and you can pick one of the animations there. You can, you know, make it wide width or even all the way full width from edge to edge, which is a bit much so we’ll stick with centered. I’ll update this block and we’ll view the post. And there you go. That animation is loaded right into the page right from Giphy. And yeah, it’s very cool. Then you hit the little trashcan icon to remove it and you can search for something else.
Let’s go ahead and remove that block and we’ll take a look at something a little bit more helpful, a little more useful. Let’s do this Media Card. So this is probably a layout that you’ve seen. You’ve got a large image on one side and then some text on the other. And a bit of an overlap. You pick one of these images from my media library. And this is an image that I shot in Disneyland last summer, so we’ll just go ahead and put Disneyland. And then we’ll write a little bit of text to go with this. You can add some more text. You know what, let’s add some lorem ipsum text here just to kind of show that you can put as much text as you’d like next to this. And it’ll still work. All right, let’s update this post. And go take a look. And there you go, nice and easy. You’ve got this Media Card with the image on the left and some text on the right, looks really good.
Let’s go back in here and look at some of the settings. You can change the container padding to something larger or smaller. We’ll stick with none, I think, here. And change the max width of the container. If we hop down here we can actually add a shadow, drop shadow to the card, which is cool, and to the image. I think I’m gonna leave the image one off, we’ll leave the card one on. And we can also change the background color for the container itself. Maybe we’ll go with a light gray. And well let’s just go ahead and save that. And go see what that looks like. We’ll view post. And kind of as you’d expect, it’s the same card. We’ve got our drop shadow and our gray background. And let’s go see if there’s anything else we can do with that.
I’ll pick the block here. And we can flip flop the card image and text. We can also make the entire thing full width, and that’ll take up the span of the whole width, which leads to our last block that I’m gonna look at. So we’ll just go ahead and add it right above here, and that’s a really cool design element called the Shape Divider.
I’ll go ahead and match up the background color so that this looks like it’s one continuous section. We’ll choose the same gray color. And then we’ll hop to styles and you can see that we have all these different kind of styles that we can use to divide our section from the top there. Let’s just maybe go with wavy. And you can also drag these little handles to adjust the height of both the space and the wave itself. Maybe just for fun, we’ll go ahead and add another divider here at the bottom, so it doesn’t just cut off a straight line. Let’s flip it vertically so that it butts up to our section. Hop into our styles. Maybe we’ll do a pointed divider. You know what, maybe we’ll go with waves. So adjust the height here. Make it a bit smaller. Maybe we’ll go taller for the waves themselves. And let’s match up our color so that it looks like one section, get our gray lined up there. And if we go ahead and save that, and view the post, you’ll see that edge to edge on the browser here we’ve got a nice wavy divider on the top and we’ve got our section with our photo. And underneath that we’ve got out waves, which makes a really cool section and you can mix and match all the different types of blocks there with the background colors and that makes some really cool sections.
And that’s not it for CoBlocks. If you look under the tab, there’s a whole bunch more. There’s, you know, maybe a dozen and a half here, different things, so definitely play around with CoBlocks and see what other kinds of layouts or elements you can add to the page.
Block Gallery
Okay, and the last on we’re gonna look at is called Block Gallery. So let’s head to our plugins and we’ll activate Block Gallery. And this one is fairly simple, but there’s some really powerful things with blocks for imagery, image galleries. So let’s go take a look.
Add a block and you’ll see that Block Gallery also has its own tab. And if you twirl that open, there’s only gonna be three blocks. So we’ll start with the carousel and we’ll look at the other two in just a minute.
For the carousel, hop to the media gallery and go ahead and add all of the images that I have uploaded. And you can edit the gallery here, but we’ll just go ahead and insert that for now. And right off the bat, what you end up with is this real easy carousel of your images that you can flip through with arrows. And you can change that to full width or back to the regular width. We won’t do that right now. You can edit your gallery. Let’s slide over here to the side and tweak some of these settings.
As you can see, you can change the gutter in between the images. You can change the height, we’ll make it a little bit taller I think. And you can round the corners of your images, if you’d like. If we look at the slider settings, there’s a couple little toggle in here. You could auto play, turn on or off the draggable, turn on or off arrow navigation, which does show still on the back end, but will be gone in the front end when you preview. And you can turn on and off dot navigation, which is a little hard to see right now, but it is down there. So we’ll turn that back off for now. And let’s go ahead and update and just take a look at what we have, just looking at a couple of the settings.
So we scroll down here a little bit, you can see that we’ve got this beautiful carousel that you can flip back and forth with the arrows. You can drag. On a mobile device, that’d be helpful to be able to drag them back and forth. So let’s edit this and look at what other settings are in here. Let’s close that up.
Some color settings that we can change the background color of the container block, or the caption text color. Let’s see, let’s make this a darker color. Maybe a dark gray. We can change the padding. Let’s make it a little smaller I think. Too small, there we go. You can round the corner of the container itself. Maybe we’ll leave that alone for now. And we’ll turn the Dot Navigation on. And let’s see. Let’s go ahead and update. Yeah, let’s make it full width. And make it a little taller, let’s update that again. And go take a look and see what that looks like. So we’ve got this beautiful edge to edge gallery.
We can drag it, it’s got the Dot Navigation down at the bottom to show us where we are. And it’s just really fluid, really nice, easy carousel. Nothing really to do other than load your images in and change some settings. So let’s take that block and let’s bring it back in and we’ll change it to a different one of these. We’ll switch it to a Masonry gallery.
You can see that it used the same images and just went ahead, really with the same settings and created this nice grid for us. This Masonry grid where the images are different heights. We can drag them around here and put them in a different order if we’d like. You know, just creates this beautiful gallery that we didn’t have to do any coding to make happen. Let’s just tweak some of these settings here. So the column size, we can change the number of columns. We can mess with the gutter, also do the rounded corner thing again. We can turn captions on and off. I’m not using any here so we’ll turn them off and link to the file itself or the attachment page. We’ll just stick with none. Let’s close these up. Under the background settings we can change the padding for the overall container. You can change the color. We’ll just switch the color of the background back to white here for now. We’re not using captions so we’ll close that up. And let’s just update and we’ll view the post again.
There you go. Without any coding, any extra JavaScript plugins or anything, we have this beautiful Masonry grid, kind of out of the box, just with some blocks. And the nice thing, if we go ahead and toggle on some responsive tools here, you can see that as we change the width of the browser, that Block Gallery goes ahead and does all the responsive work for us as well. So on the wide screen we have this nice columns, and as we start to narrow the screen in, you can see that it re-flows and drops down to two columns. As we continue, it continues to re-flow. And then when we get even narrower, it drops all the way down to the single column for you know, a smaller mobile device. So that’s really awesome that it comes with all the responsiveness built in. Now let’s hop back in here and we’ll just swap this over to the last kind of block in Block Gallery, and that’s just a simple stacked.
As you might expect, it just stacks all of the images on top of each other in a single column. There are a couple of settings that we can look at. We can toggle all full width images, which just means if the images don’t span the full width, that they’ll drop down to their normal size and continue to be in the stack. We can tinker with the gutter here. And let’s scroll down. You can see how the gutter changes the distance between the images. We can mess with the round corners again. We can do drop shadowing on these images as well. Small, medium or large drop shadow, just to kind of separate them from the background a little bit. We can link them to the image file itself. And then we can do our normal padding and rounded corner background container settings here. And I close these up, you can see that we can change the background color of the container as well. So maybe we’ll do a blue color here on these. And we’ll go ahead and update the post and we’ll view the post.
As you would expect, we have our Block Gallery stacked container with our images inside, drop shadow and the blue background.
All right, that’s it for today. If you like the video, go ahead and hit that thumbs up. Subscribe to our channel and tap the bell to get notified when there are new videos and until next time. See you later!
