Build Your Own Business Website header image

Install, Configure and Style the Social Media and Email Signup Boxes from DIYThemes – Part 3 – Configuring the Social Media Buttons

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In part 3 of this seminar on How to Install, Configure and Style the Social Media and Email Signup Boxes from DIYThemes we show how to configure the social media buttons.

Facebook Like Button

There are also settings for these buttons that we are going to take a look at now. We’re starting off with the Facebook Like button because it actually has the most complex set of settings and the first thing is, you can choose how to display it.

Display Setting

Right now, it’s displaying as a vertical with share content and so it’s got the bubble at the top and then this but you could do the horizontal instead or horizontal with more content. For the moment, well, it’s just going to save this like that, save the template.

Let’s reload it and obviously, when you don’t do these in exactly the same way, it kind of breaks them up, right? It breaks the layout. Nevertheless, if this is what you want, if you want your Facebook say for example to be down below your single post content it could be. And you’d have an entirely different style like this with that down there and then you’ve got these ones up here as an example.

Default Image Setting

So the first thing in the Facebook is you have the arrangement of it. The second thing is the default image. Now, this is something that people run into all the time where Facebook inadvertently grabs the wrong image from the site or if you’ve got a blog post that doesn’t have an image, it grabs some other image.

Well, in this case you can place a default image URL here so that when Facebook can’t find the post image,  it will display this image so this is a good choice for that.

Sharing Your Facebook Page

You can also change the verb for example, you can change between like or recommend. You can also add your Facebook username or your ID which is especially useful if you show the open graph meta tags as well.

Let’s just go over to Facebook for a second. So I can actually just put that there and I may even be able to put my Facebook page in there instead although probably not. It probably won’t take the page name, it probably wants the username. Yeah, it does want the username.

And then if you’re going to share something, it may ask you if you’ve got a page, whether or not you want to share it as BYOBWebsite or share it as Rick Anderson. In any case, if you put that there and then click the open graph meta tags in the document head and save your template now if we come over and reload this and look at the document head, you can see we have the the Facebook and LinkedIn stuff have been added.

Notice that it identified the admin as byobrick so it’s linking my profile to the site and then it also includes all the other things that you would want it to include automatically inside of this tag. So that is a big plus for this.

In fact, let me just go ahead and add an image to this so we can see what it looks like. So if we go to the Media Library and let’s grab an image that looks like it would be appropriate for this. Okay, 130×125, so that’s the image we’re going to use. So we’ll grab it as my default image, go back over to the Skin Editor and the Facebook Like button, add that image, and save the template.

I’m going to just “Like” this so you can see what happens. It’s not showing up yet so we’ll just come back over in a moment and take a look at it. Here it is, so there is the “I recently liked” thing right there with that image that I created as the default image. You can see that little system works.

LinkedIn Button

LinkedIn does not have any settings so you can pick the organization that you want for LinkedIn but in itself it doesn’t have any settings.

Twitter Button Settings

The Twitter button does have settings. You would put your Twitter name in there, byobwebsite is mine, and we can add the Twitter Card meta data . In fact, we could also again add that same default image to this and save that. Now that meta data will be added to the head.

Google+ and Pinterest Buttons

Then for Google+, there aren’t any settings to set up for Google+ but I think actually, there are for Pinterest so we’ll drag Pinterest into this. Okay, I see so it just has the default image as the system for that.

So that’s what is available to you for these and obviously, you can put them where you want and you can use as many of them or as few of them as you want and you can change their configurations so that they are more appropriate for your site.

Can You Use Other Social Media Plugins?

Somebody asked, “Can you use other Social Media plugins of Thesis 2 instead?”, and of course you can, sure. You don’t have to use these with it, you can use another one instead. The nice thing about this is that, you actually do have total control over where they show up. You could just as easily take these and put them in the sidebar .

Let’s just open that up for a second. You could put them in the sidebar or you could put them below the post or whatever. You just have a lot of control over using the Thesis social media buttons rather than using a plugin but having said that, you can use whatever you like as a system that allows you to pick these up and place them around.

0 Comments… add one
0 comments… add one

Leave a Comment