How to Create a Personalized Social Share Widget Using Oxygen Builder

Traditionally we use plugins to add a social sharing widget to blog posts but did you know that it's actually extremely easy to incorporate social share links and buttons in your blog posts without plugins?

If you're using Oxygen Builder, you have everything you need to build a fully featured and 100% personalized social sharing widget for your blog posts.

In this blog post, I'll show you how.

Choose which social media platforms you want to include

Each social media platform has their own URL format that we can use to include a social share link or button. Let's look at some of the most popular platforms

Facebook

https://www.facebook.com/sharer/sharer.php?u=YOUR_URL

X(Formerly Twitter)

https://twitter.com/intent/tweet?url=YOUR_URL&text=YOUR_TEXT

Linkedin

https://www.linkedin.com/sharing/share-offsite/?url=YOUR_URL

Notice that each platform has a different format and url parameters, if you want to find the share url for another platform, it's easier to find it by asking ChatGPT or another AI tool than it is to search for it.

Here's a prompt you can use:

Please provide the share url format for {social media platform} to include a link for users to share my blog post

Setting this up in Oxygen Builder

Start by editing your single post template with oxygen builder.

At the bottom of your template, below the content, add a new div.

Layout Child Elements: Horizontal

Then add 3 icons.

Tip: If you click on the magnifying glass icon in the search components field you can switch to emmet. Type icon*3 and hit enter.

Now change the icons to your social media platforms. If oxygen doesn't include your platform, use an image icon instead.

We need a way where we can inject our post parameters into the url. By default the link url field doesn't let us piece together a url with dynamic data but we can get around it.

Let's build our dynamic url.

Create a text element and paste in the share url of the platform you're on, lets look at X for example because it has 2 parameters.

First we need to generate a shortcode to include in our links. It works the exact same way you would swap static text for dynamic text in oxygen.

Highlight the first param, YOUR_URL like you're going to copy/paste and then at the toolbar at the top of the oxygen editor, click Insert Data.

Another thing that you'll notice is Oxygen doesn't give us a permalink option in this list. That's ok cause we can figure out what to use by selecting the title option, be sure to check the link box.

It gives us:

Perfect, it's just called permalink. So all we gotta do is replace data='title' with data='permalink' and we want to get rid of the link attribute.

For the YOUR_TEXT value, we can use the title and that's what will be in the tweet when someone shares it.

Now you have your dynamic url.

Select the icon and then click the link wrapper icon then paste in the URL you created.

Just do the same process for your other platforms.

Wrapping Up

That's all it takes, now anytime someone clicks those share icons, the url will change based on the post.

The best thing about this solution is with oxygen builder, we can design this however we want.

Have fun doing that and let me know if you have any questions!