Documentation:OpenBadges/Faculty Guide/Web Design/Create/Earners/Sharing

From UBC Wiki


After you click the hyperlink symbol and select the LinkedIn option on the pop-up menu, LinkedIn will ask if you want to the badge quietly to your profile, or if you want to make it an update so everyone knows about your new badge.

Credly linkedin choices.png

Let's assume you want to add it to your profile quietly. Click "Add to Profile." You'll then be asked to login to your LinkedIn account.

Linked login.png

Go to your LinkedIn page and at the top, you should see the following:

Linkedin additionalrequest.png

Click the yellow button that says "Add to profile." Scroll down your profile to the Certifications section and check out your badges! Woowoo!

Credly linkedin showing off.png


After you click the hyperlink symbol and select the Facebook option on the popup window, you'll be asked to login to your Facebook account.

Credly facebooklogin.png

Facebook will ask if you want to add a comment to your post before you share it. Type in your thoughts.

Credly facebook comment.png

Click "Share" and go to your Facebook feed. Now everyone can see what you accomplished :-)

Credly facebook new.png


After you click the hyperlink symbol and select the Twitter option on the popup window, you'll be asked to login to your Twitter account.

Credly new twitter.png

Modify the tweet and check it out on your feed!

Credly badge.png

Mozilla Backpack

After you click the hyperlink symbol and select the Mozilla option, Mozilla will let you know that you are about the send the badge to your backpack. You will then be prompted to login to your Mozilla Backpack account. If you have an account, click the login button.

  • Note: Documentation on creating a Backpack account is coming soon.
Credly mozilla login.png

Here's what signing into your Backpack looks like:

(Note: if you are already signed into your Backpack, you won't get this prompt, and instead will be taken straight to the next step.)

Mozilla signinPersona.png

Next, Mozilla will ask if you want to accept the badge. Click the "accept" button.

Credly mozilla accept.png

A new pop-up appears confirming that you've exported your new badge to the Backpack. Click the word "Backpack" - which should be hyperlinked - to see your new badge in the Mozilla Backpack.

Credly mozilla backpack.png

And ta-da! Your new badge is in your Backpack!

Credly mozilla done.png

Website or Blog

To put your badge into a website, go to your Credly account. On the right-hand menu select "Credit," which will show your badges enclosed in a square. This square will have headers such as "Inbox," "All," "Public," "Hidden," "Categories," and "Other." Select the header called "Categories."

Credly ategories.png

If you do not have any categories, you'll need to create one. Check out the "Creating a Badge Collection" page to create a category. (Note: Mozilla calls these collections of badges "collections," but Credly calls them "categories." Just so you know, they both mean the same thing.)

Once you've created a category click the </> icon next to the category name.

Credly embed1.png

A pop-up will appear asking you to select a grid option. This determines how big the badge will be on your webpage.

Credly embed size.png

Once you make this choice, a message will appear asking you if you would like to get the embed code.

Credly embed get code.png

Highlight the code and press "CTRL+C." This copies the code.

Credly highlightlink.png

If you modify your website by changing the HTML files, open the file for the page where you want to display your badge and paste in the badge code by pressing CTRL + P.

Credly html.png

If you have a website powered by WordPress or Blogger, you'll need to navigate to the HTML backend of your website. To get there, first go the webpage where you want to show your badge. Then click the tab that shows the HTML of that webpage. If you're in WordPress, this is the "Text" tab in the upper-right corner.

Credly wordpress.png

For Blogger, click the "HTML" tab in the upper-left corner.

Credly blogger.png

When you've pasted the badge code, publish the webpage. Looking pretty nice!

Credly html published.png
  • Note: Credly only posts a picture of your badge, and does not include a hyperlink to the badge metadata. If you need to do this, find the webpage for your badge by posting your badge to LinkedIn, and clicking the pencil symbol beside the badge name. Doing this should bring up a list of metadata, including a field for certification. You can copy the web address from the badge in this field.
Cretification url.png

Similarly, you can click the "evidence" field in the Mozilla Open Badge metadata. This also contains the web address of your badge.

Credly metadata.png

Press CTRL +C to copy the website address of your badge. Next, navigate back to your Credly page and take a screenshot of your badge. Save this as a picture, then upload it to the files associated with your website.

You now need to do some HTML! The general form of your HTML line will look something like this: <a href="badge web address"><img src "badge image name"/></a>

Here is an example:

<a href=""><IMG SRC="badge_credlyworkaround.png"/></a>

Put this code into your website and revel in the joy of a clickable badge!