How to Add a Steemit Profile Widget on your Website?

in steemit •  last year

Would you like to know how to put a widget of your Steemit profile on your website or WordPress blog because this might be a good way to link both sites and show your audience that you are on Steemit?

How to Add a Steemit Profile Widget on your Website?

I am very excited to show you this website that I have just found because I had been looking for something like this for quite a long time. I wanted to display a profile widget on my WordPress blogs and this is now made possible and it's easy to implement.

How to Add a Steemit Profile Widget on your Website?

The website where you can get the code from is Steemit Widgets and it looks like this. It was created by @mkt.

Steemit widgets

You can click the "Demo" button if you wish to see all kinds of widgets that you can have on your website, or click the "Generator" button to follow this tutorial.

This is a direct link to the generator: https://mktcode.github.io/steemit-widgets/generator.html

Steemit widgets

What you have to do is select "Profile" for the widget, enter your Steemit username, change the color if you don't like the default one. Then you can unselect the options that you don't want.

Just below the form is a preview where every data about your profile is showing, even the Voting Power.

Steemit widgets

Then, you have the code you need to use to show the widget on your site.

The first little piece of code has to be placed where you want to show the widget.

<div id="steemit-widgets-profile"></div>

The second longer code is what is calling the data from Steemit and the cosmetic of the widget.

It has to be placed just before the </body> tag on the HTML page where you have the widget.

Steemit widgets

If you have a regular website in HTML, it is easy to do, and you may ask your web developer to just add the code for you.

In WordPress, you will need a plugin like this "Head & Footer" to add the code in the footer of your blog on posts and pages.

Steemit widgets

You may also have a place on the post editor where you can put that code.

Then, in the post, use the "Text" window and put the code where you want the widget to be.

Steemit widgets

This is how it looks like on my blog here: http://www.michelgerardonline.com

Steemit widgets

You can also display the Steemit widget in one of your WordPress widgets.

I chose to have it in the footer, and you just have to put the same code.

<div id="steemit-widgets-profile"></div>

I use an "Enhanced Text" widget in WordPress so I can use code in it.

Steemit widgets

This is what it looks like in the footer together with other widgets.

Steemit widgets

One issue I have had is that apparently you can only display the widget once on any page or post on a WordPress blog, but there is a solution to this that the developer gave me in the comments.

Here it is.

I put this code on the page itself as explained earlier.

<div id="steemit-widgets-profile"></div>

Then, I put this code with a different id in the WordPress footer widget.

<div id="steemit-widgets-profile2"></div>

Finally, the code that goes before the </body> tag in the "Head & Footer" WordPress plugin.

1st part.

<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
<script src="https://mktcode.github.io/steemit-widgets/assets/js/steemit-widgets.min.js"></script>

2nd part.

<script>
  steemitWidgets.profile({
    element: 'steemit-widgets-profile',
    template: '<div style="border: 5px solid rgb(0, 168, 230); border-radius: 5px; font-family: Arial, Helvetica, sans-serif;"><div style="background-image: url(\'${COVERIMAGE}\'); background-position: center center; background-size: cover; background-color: rgb(0, 168, 230); display: flex; border-top-right-radius: 0px; border-top-left-radius: 0px;"><div style="background: url(\'${IMAGE}\') center center / cover; width: 50px; height: 50px; border-radius: 36px; margin: 10px;"></div> <div style="flex: 1 1 0%; margin: 10px; line-height: 18px; text-align: left;"><a href="https://steemit.com/@${USER}" style="color: rgb(255, 255, 255); text-decoration: none;">@${USER}</a> <span style="background: rgb(0, 168, 230); border-radius: 10px; color: rgb(255, 255, 255); font-size: 11px; padding: 2px 5px; font-weight: bold; border: 1px solid rgba(255, 255, 255, 0.5);">${REPUTATION}</span><br> <a href="${WEBSITE}" style="color: rgb(255, 255, 255); font-size: 12px; text-decoration: none;">${WEBSITE}</a><br> <span style="color: rgb(255, 255, 255); font-size: 12px;">${ABOUT}</span></div></div> <div style="color: rgb(120, 120, 120); background: rgb(255, 255, 255);"><div style="display: table; table-layout: fixed; width: 100%; text-align: center; font-size: 18px; line-height: 21px; padding: 10px 0px 5px;"><div style="display: table-cell;"><b>${POSTCOUNT}</b><br><sup>Posts</sup></div> <div style="display: table-cell;"><b>${FOLLOWERS}</b><br><sup>Followers</sup></div> <div style="display: table-cell;"><b>${FOLLOWING}</b><br><sup>Following</sup></div></div> <div style="display: table; table-layout: fixed; width: 100%; text-align: center; font-size: 12px; border-top: 1px solid rgb(221, 221, 221); padding: 5px 0px;"><div style="display: table-cell;"><span style="width: 15px; height: 15px; display: inline-block; vertical-align: top; margin-right: 3px;"><svg fill="#888888" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129"><g><g><path d="M50.2,39.9c-2.3,0-4.1,1.8-4.1,4.1v41.5c0,2.3,1.8,4.1,4.1,4.1c2.3,0,4.1-1.8,4.1-4.1V44C54.3,41.7,52.4,39.9,50.2,39.9z"></path><path d="m30.4,39.9c-2.3,0-4.1,1.8-4.1,4.1v41.5c0,2.3 1.8,4.1 4.1,4.1s4.1-1.8 4.1-4.1v-41.5c0-2.3-1.9-4.1-4.1-4.1z"></path><path d="m10.5,105h86.7c2.3,0 4.1-1.8 4.1-4.1v-17.4h17.2c2.3,0 4.1-1.8 4.1-4.1v-30c0-2.3-1.8-4.1-4.1-4.1h-17.2v-17.2c0-2.3-1.8-4.1-4.1-4.1h-86.7c-2.3,0-4.1,1.8-4.1,4.1v72.8c0,2.2 1.9,4.1 4.1,4.1zm90.8-51.5h13.1v21.9h-13.1v-21.9zm-86.7-21.3h78.5v17.2 30 17.4h-78.5v-64.6z"></path></g></g></svg></span>Voting Power: ${VOTINGPOWER} %</div> <div style="display: table-cell;"><span style="width: 15px; height: 15px; display: inline-block; vertical-align: top;"><svg fill="#888888" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"></path></svg></span> Joined: ${CREATED}</div> <div style="display: table-cell;"><span style="width: 15px; height: 15px; display: inline-block; vertical-align: top;"><svg fill="#888888" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span> ${LOCATION}</div></div></div></div>',
    user: 'gmichelbkk',
    reputationPrecision: 1,
    votingPowerPrecision: 1,
    updateInterval: 60
  });

  steemitWidgets.profile({
    element: 'steemit-widgets-profile2',
    template: '<div style="border: 5px solid rgb(0, 168, 230); border-radius: 5px; font-family: Arial, Helvetica, sans-serif;"><div style="background-image: url(\'${COVERIMAGE}\'); background-position: center center; background-size: cover; background-color: rgb(0, 168, 230); display: flex; border-top-right-radius: 0px; border-top-left-radius: 0px;"><div style="background: url(\'${IMAGE}\') center center / cover; width: 50px; height: 50px; border-radius: 36px; margin: 10px;"></div> <div style="flex: 1 1 0%; margin: 10px; line-height: 18px; text-align: left;"><a href="https://steemit.com/@${USER}" style="color: rgb(255, 255, 255); text-decoration: none;">@${USER}</a> <span style="background: rgb(0, 168, 230); border-radius: 10px; color: rgb(255, 255, 255); font-size: 11px; padding: 2px 5px; font-weight: bold; border: 1px solid rgba(255, 255, 255, 0.5);">${REPUTATION}</span><br> <a href="${WEBSITE}" style="color: rgb(255, 255, 255); font-size: 12px; text-decoration: none;">${WEBSITE}</a><br> <span style="color: rgb(255, 255, 255); font-size: 12px;">${ABOUT}</span></div></div> <div style="color: rgb(120, 120, 120); background: rgb(255, 255, 255);"><div style="display: table; table-layout: fixed; width: 100%; text-align: center; font-size: 18px; line-height: 21px; padding: 10px 0px 5px;"><div style="display: table-cell;"><b>${POSTCOUNT}</b><br><sup>Posts</sup></div> <div style="display: table-cell;"><b>${FOLLOWERS}</b><br><sup>Followers</sup></div> <div style="display: table-cell;"><b>${FOLLOWING}</b><br><sup>Following</sup></div></div> <div style="display: table; table-layout: fixed; width: 100%; text-align: center; font-size: 12px; border-top: 1px solid rgb(221, 221, 221); padding: 5px 0px;"><div style="display: table-cell;"><span style="width: 15px; height: 15px; display: inline-block; vertical-align: top; margin-right: 3px;"><svg fill="#888888" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129"><g><g><path d="M50.2,39.9c-2.3,0-4.1,1.8-4.1,4.1v41.5c0,2.3,1.8,4.1,4.1,4.1c2.3,0,4.1-1.8,4.1-4.1V44C54.3,41.7,52.4,39.9,50.2,39.9z"></path><path d="m30.4,39.9c-2.3,0-4.1,1.8-4.1,4.1v41.5c0,2.3 1.8,4.1 4.1,4.1s4.1-1.8 4.1-4.1v-41.5c0-2.3-1.9-4.1-4.1-4.1z"></path><path d="m10.5,105h86.7c2.3,0 4.1-1.8 4.1-4.1v-17.4h17.2c2.3,0 4.1-1.8 4.1-4.1v-30c0-2.3-1.8-4.1-4.1-4.1h-17.2v-17.2c0-2.3-1.8-4.1-4.1-4.1h-86.7c-2.3,0-4.1,1.8-4.1,4.1v72.8c0,2.2 1.9,4.1 4.1,4.1zm90.8-51.5h13.1v21.9h-13.1v-21.9zm-86.7-21.3h78.5v17.2 30 17.4h-78.5v-64.6z"></path></g></g></svg></span>Voting Power: ${VOTINGPOWER} %</div> <div style="display: table-cell;"><span style="width: 15px; height: 15px; display: inline-block; vertical-align: top;"><svg fill="#888888" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"></path></svg></span> Joined: ${CREATED}</div> <div style="display: table-cell;"><span style="width: 15px; height: 15px; display: inline-block; vertical-align: top;"><svg fill="#888888" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span> ${LOCATION}</div></div></div></div>',
    user: 'gmichelbkk',
    reputationPrecision: 1,
    votingPowerPrecision: 1,
    updateInterval: 60
  });
</script>

I installed it that way on my WordPress blog and it works.

Would you upvote this post about Steem tools and follow me for more because this will encourage me to write more posts like this one?

Would you please help @jerrybanfield become a top 20 witness because you can help funding projects to build Steem as explained here? Vote for jerrybanfield as a witness or set jerrybanfield as a proxy to handle all witness votes at https://steemit.com/~witnesses. Read the 5 reasons why I'm voting for Jerry Banfield as a witness and how to vote in my post.

Michel Gerard

www.michelgerardonline.com

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Thank you for this post, I have bookmarked it as I am developing my website currently and this would be very useful for me in the future.

·

@sagarthukral, I am glad this is useful for you. Thank you for commenting.

Hey @gmichelbkk! Thank you! Seems I have to take my old widgets project a little bit more serious again. :D I didn't really plan to support it anymore but... well... maybe I'll reconsider. :D

Oh btw... You just need to make sure you use a different id when adding multiple widgets.

·

Hello, do you have to tool that allow users to post from wordpress and it will reflect on steemit?

·
·

Search for steempress

·

Thank you for reading the post and commenting. Yes, please, continue this project because it is going to be useful for a lot of people. I think the widgets are awesome and what you need is more promotion so people are aware they exist. Thank you for the tip of using a different id, I will try that.

·
·

I was thinking about implementing SteemConnect to enable commenting and voting. But therefore I would have to change the entire technical concept... :/ maybe I'll find a reasonable solution someday. :D

·
·
·

I tried the id thing, but not sure how to make it work. Should I use element: 'steemit-widgets-profile', element: 'steemit-widgets-profile2', for the footer on whole website and then use the different ids where I want them to show?

Loading...

thumbsupcolor.jpg
Excellent info I am resteeming!
followmesteampower.jpg

·

Thank you for resteeming. This will help other people discover this tool.

·

Awesome post for sure...

·
·

emoticons16.jpg

Thank you so much for your valuable post man! very much appreciated :)

·

I am glad you like it @gomovies. Thank you for commenting.

·

I am glad you like it, thank you @imran-aslam.

Michel this is awesome and just what I needed! I will resteem today and see about getting this on https://jerrybanfield.com/.

·

I am glad @jerrybanfield that this is useful for you. Steemians need to know about this tool more. Thank you for the resteem.

Thank you so much @gmichelbkk for explaining step by step easily. Now anyone can add steemit profile wedget on their site. This is pretty cool!

·

I am glad you like it @rezoanulvibes, thank you for your comment.

Can we add that to a website based on blogspot like mine : steemit.name ? If it yes, please tell me how to do it ?

·

I am not sure about these free blogs, but if you can add code to a page and the footer via a widget, then the process is the same as WordPress.

·
·

I did it after learning a bit, you can take a look, and I removed the widget of google +, now I am completly advertizing steemit. ☺

·
·
·

Great. What's the url again?

·
·
·
·
·
·
·
·
·

It looks good there. Thank you for testing that on blogspot!
Screen Shot 2018-03-21 at 3.52.51 PM.png

Just thought about this yesterday and today there's a post about it. Thanks you very much!

·

I am glad @xinvista that you saw my post at the right time.

Really useful piece of information. Thank you!

·

Thank you @reigns, I am glad you like it.

Thank you for sharing this! I like how customizable this widget is, it's exactly what I was looking for.

·

Thank you for your feedback @modev, I am glad you like this tool.

Currently buikding my blog an is greatful for this...i want to learn about api an why its needed

·

Thank you for commenting, it's great this is useful for you @naturalog.

Oh this is very helpful since I am actually working on creating my Blog on Wordpress. I will definitely follow this guideline to install the widget. Thanks!

·

I am glad this is useful for you @jessicapixie. Thank you for commenting.

Incredibly helpful, I was looking for this kind of integration from the very beginning of my Steemit journey and its oh so rewarding. Great add to my professional website here, I'll continue to watch its development and tweak it as I go along. Again, this is one of the most beneficial advents of Steemit I've ever found, so definitely incorporating this link in my database.

Thank you for sharing @gmichelbkk!!

·

Thank you very much @craigahamilton for your kind comment. I am glad it is useful for you.
You may want to read my second post about this:
https://steemit.com/steemit/@gmichelbkk/how-to-show-your-steemit-posts-on-your-website

·
·

Thank you so much for writing this up and sharing such valuable information. Consider yourself followed. I hope more experts of your caliber join Steemit and lend their wisdom to the growing user base.

Thank you for sharing this!

·
·
·

Thanks a lot @craigahamilton, feedback like yours motivates me to write more.

very usefull post sir,,,thanks a lot for your kind informations

Thank you. This was very useful information. I will make sure to refer to this when I make my profile widget.

·

Thank you for your kind feedback @gungho.

His would be that a computer made a plugin for Wordpress. So better for those who do not know code.

·

If you know how to install a plugin on WordPress, you can do this @jose-poveda. It's just a matter of copying and pasting some code you don't have to understand.

Thanks for the kind information, this info does help me because i am a new member on steemit.basically, i come steemit use for share my some crypto related knowledge and get beter info. i wait for your next information.
thanks @gmichelbkk

·

I am glad that you like the post @bdsdeb, thank you.

This post will be very useful on my blog. Thank you very much for sharing such a useful information.

·

I am glad it is @krisosa. Thank you for commenting.

As always, you are helpful and very detailed. I enjoy what you do for Steemit. Thank you!

·

Thank you for your kind feedback @reonlouw.

Today I started my journey on steemit , this post will help me alot , guys like me those are new to steemit will surely look into this , keep up the good work lad ✌

·

Thank you very much @shravanthakur. Congratulations on starting blogging on Steemit.

Hi @gmichelbkk I'm having problems with Dtube. Some videos won't load and are always buffering. Any ideas?

·

Not sure about that @antondee. You may want to try at another time, maybe the server is having issues.

·
·

Thanks for getting back to me @gmichelbkk, it has been over a week and same videos do not load. Keep up the good work anyhow!

Thank you Sir for this useful information. I will try it out.

·

I am glad that you like it, thank you for commenting @bukkymaj.

Thank you very much, this is a great way to expose our steemit accounts and platform on more other sites or platforms. I will try this and implement this at my other site. Thank's again, a nice feature..

·

Thank you for commenting @verhp11, and I am glad the post is useful for you.

Thanks for the information.

·

Thank you.

·
·

I will be expecting more sir. Thanks

Just what i have been looking for!

But i have a question; do you know any plugin that allow one to post to steemit through wordpress?

Thanks for the information.

You got 25.97% upvote | Courtesy of @gmichelbkk!
Delegate us Steem Power & get 97% daily rewards share!
20 SP, 50, 75, 100, 150, 200, 300, 500, 1000 or Fill in any amount of SP.
Click For details | Discord server

You got a 2.18% upvote from @postpromoter courtesy of @gmichelbkk!

Want to promote your posts too? Check out the Steem Bot Tracker website for more info. If you would like to support the development of @postpromoter and the bot tracker please vote for @yabapmatt for witness!

You got a 18.73% upvote from @allaz courtesy of @gmichelbkk!

Thanks for using Bid Voting Bot @allaz service and Steem Upvote Bot Tracker
I want to introduce you to my new friend @monsterbit in order to give additional thanks!
Do you know who is @monsterbit is? My friend, you can miss a lot. I highly recommend checking him with introduceyourself. He is going to hold interesting contests with cash prizes and promises to tell a lot of interesting stories!