Stumble Upon has now closed and the developers have now developed Mix.com to replace it. Here’s how to add a Mix Share Button to your WordPress blog.
If you’ve used Stumble Upon in the past then you’ll know it had the potential to increase blog traffic by referring posts that had been added to profiles there.
Earlier this year the development team decided call time on SU and create a new platform called Mix.com.
As this is a tutorial on how to add a Mix Share Button to your posts I won’t go into detail about why it closed or why you should now be using their new medium. If you want to know more about that then I’ll refer you to my blogging guru Janice Wald at MostlyBlogging and her post on the subject here:
Do You Need Sites Like Stumble Upon?
This tutorial is aimed at WordPress.com blogs. I will give the universal code for a Mix referral and point out where to add the equivalent code used here to harvest a full blog post at the end. If you are hosted by a different system then you will need their version of it.
Fast track for those that know their dashboard.
Use Step 1 below to get the Mix.com badge image.
Enter the Add New Service dialogue box.
Name the share button,
Sharing URL: https://mix.com/add?url=<%post_full_url%>
Provide the badge image URL and create the service.
Add the sharing badge as you would normally from the edit share buttons page.
If that makes no sense at all then…
I’ve broken this down to include a step by step walk-through after some requests by people unfamiliar with using the WordPress dashboard.
Step 1. Adding the Mix icon to your media library.
Mix provide images at 18 x 18 and 30 x 30 for this purpose here
https://community.mix.com/blog/2018/7/12/add-a-mix-badge
These are license free and are located at the top underneath each other. Simply right-click or tap on one to add a copy to your image library on the device you are using.
I used the larger 30 x 30.
At this stage I won’t patronise, because all of you know how to add images already to your WordPress media library. (Go to the Media menu bar and Add New. Select the Mix icon and job done). No need for schematics here.
Later you will need the actual URL of this image. Don’t worry here if that makes no sense, it will be illustrated when we get to the relevant dialogue box.
Step 2. Adding a new service.
This requires you to enter the WordPress Admin dashboard. From the reader this can be located at the bottom of the menu list on the left. Please note this will open new page in your browser. This allows you to keep the required dialogue boxes open while navigating to required information from your blog.
Clicking this will open a new page taking you to the WordPress dashboard. Open the side menu by clicking or tapping the menu bar at the top left. Scroll to the bottom and click “Settings.” Scroll down again and click “Sharing.”
This will will open up the bit we are interested in, the “Share Settings” dialogue box.
There are two tasks to do here.
- If you have not already done so, then delete the Stumble Upon service. Look in the lower box at your “Enabled Services.” If you’ve added SU previously as not part of the default theme services it will have small circle with an “x” in. Above in mine you can see that for FlipBoard and Mix. I’ve already removed SU by clicking on the “x.”
Be aware SU is no longer working so if you have not removed it’s share badge then you have a defunct service running.
- Add a new service. Click on this to open the next dialogue box.
Step 3. Adding the new sharing badge.
If everything has gone well you should now be seeing this.
Service name
This one’s easy. What do you want to call the badge? In this case it’s “Mix.” Simply type that into the box.
Sharing URL
This is the tricky bit. The base code required is this.
https://mix.com/add?url=<URL>
If you only add this into the sharing URL dialogue box then the badge will open Mix.com, but fail to find the blog URL you are trying to share and return an error on the Mix page after it tries to harvest the post.
This is the ubiquitous code that should work on all blog platforms.
The bit that will be different is the <URL> at the end. This is where we need to tell the sharing redirect what it is trying to actually share. If you now go back to the previous image above, underneath the WordPress dialogue box you will see variables that can be added to the service sharing URL.
It may look complicated, but what we have in layman’s terms is the core code above lying underneath the share badge. The core says go to Mix and share what the instructions (variables) say in the <URL> script.
If you look at those above (all beginning with % signs) they all instruct the share button what to send with the redirect to (in this case) Mix. Most are obvious when you know that and read the words inside the % signs. Post titles, slugs, tags and so on. You can actually use combinations together.
However, the one that I’m interested in is %post_full_url%. This drags the full blog post URL into the transfer to Mix.
The generic code above is therefore changed to replace <URL> with that.
Ergo the actual code to copy into the Sharing URL dialogue box is
https://mix.com/add?url=<%post_full_url%>
N.B. Syntax with scripting is everything. Get it wrong, or add a space where it shouldn’t be and it won’t work properly. The ONLY text you are changing is URL. The script declarations <script> must be present around the variable inserted, no spaces.
Icon URL
This can be done several ways. The easiest and, probably, most reliable is to use an image in your own media library. Using an external source works fine, but if that source is deleted or down then your sharing badge will fail to find it and won’t work. I’m saying this because recently a friend had issues while tidying up their own media library and finding images in posts no longer being displayed properly.
Every image on a webpage has its own URL. It’s what your browser hunts for in order to display the page properly. Your blog works exactly the same. Each image in your media library has a unique URL that tells the loading page where to find the image.
Back in Step 1 we inserted a Mix image into the media library. If you know how to find it’s URL then that’s what to add into the Icon URL dialogue box.
Open your media library. There are two ways to do that. One is from the dashboard and the other, probably more familiar, is from your normal blog interface. From the reader, click “My Sites” and navigate to “Media.”
This shows my library. On the left is the media button (Not Add) which opens the library as shown. Click on the icon as circled and then on “Edit.” This will take you to the following page that allows you to edit the selected image.
This provides an easy way to copy that image URL. Note mine is small. It’s supposed to be because the badge icon is tight. A large image might get cropped or distorted. It’s why I suggested the 30 x 30 from the Mix page. Oddly it appears as 31 x 31 above.
Click the “Copy” button and then hit “Done.”
Return to the Add New Service section and paste this into the Icon URL dialogue box (right-click, paste or click inside and CTRL V).
That’s almost it. Click “Create Share Button.”
If everything has been entered correctly then it will return you to the “Share Settings.” If it remains on the “Add New Service” dialogue box then it’s either failed to connect to Mix or failed to find your media image. Check both again.
Step 4. Adding the new button to your posts.
Almost done now. We have created the button, but not yet instructed WordPress to display it. If all is well we should now be back on the “Share Settings” page in your dashboard.
We now need to visit the sharing page highlighted above. Click on that and we should arrive here.
Next click on “Sharing Buttons”as shown to arrive here.
Now click on “Edit sharing buttons” to arrive at the bit we are interested in.
Under the “Edit visible buttons” you should now see your new Mix badge. Select the “Button style” matching your other icons and simply tap on the Mix one to send it upwards so it appears in the “SHARE THIS” section.
If all is well your screen should now resemble mine. Lower box icon grayed out and top box icon solid alongside your other sharing buttons.
At this point click “Save Changes.” I know this is tremendously obvious, but can anyone not claim to be smug and have never saved changed made before raging wildly at the machine?
Step 5. Testing it works.
Log out of WordPress.
Go to a post on your blog. You should see the Mix share badge smiling at you.
Click on it and it should open a page directing you to Mix.
If you are already logged into Mix it will pull up the recommended sections to mix it into. They will appear only if the Blog URL has been located. Mix it.
Find the post you just mixed on your mix profile.
Click on it to ensure it redirects you back to your blog post.
Ask a few bloggers to test it also works for them.
Step 6. If you do not use WordPress.
The method of adding new share buttons will be similar. You will need an image and it’s URL.
You will also need the base Mix redirect code.
https://mix.com/add?url=<URL>
If the script to harvest the page differs from that used by WordPress, i.e.
%post_full_url%
then you will need to find the equivalent to replace “URL” in the referral code. There is a vague chance such things are standard, but I’m not confident they are. Try it and see. If it fails then the error will be in the variable used. Look for the code in your support pages. However, if the service dialogue is half way decent then the variables possible will be present as they are with WordPress. One of these will be the right one to use.
I know this might seem convoluted, but after talking to a few people navigating the process,if it’s unfamiliar, can be daunting. I make no apologies for that. The quick method is at the top for those who know their dashboard.
I hope this works for you. It caused me much frustration initially!