Hi folks,
I’m trying to add code to our crowd funding site to our header – preferably below our Social Media Widget. Id would be so awesome if links to our campaign were at the top of every page.
I think the code is javascript:
<div class="fr-widget" data-type="badge" data-variant="wide" data-width="340" data-url="http://fnd.us/c/6sgn6"></div>
There’s also a “loader code” (although I’m not sure what that is):
<script>(function() { var d = document, fr = d.createElement('script'); fr.type = 'text/javascript'; fr.async = true; fr.src = ((d.location.protocol.indexOf('https') == 0)? 'https://s-' : 'http://') + 'static.fundrazr.com/widgets/loader.js'; var s = d.getElementsByTagName('script')[0]; s.parentNode.insertBefore(fr, s);})();</script> When I add the first code in Widgets>Header in the customize theme menu, the area is simply blank. I’ve tried using the “text” and the “Visual Editor” widgets to input the code, but to no avail. Something is happening because the resulting blank widget pushes the social media widget to the left. However, the Crowd Funding widget is simply nowhere to be seen.
Finally, if the above code created a space too large for the header, I’m wondering if this smaller code will be better:
<div class="fr-widget" data-type="badge" data-variant="small" data-width="90" data-url="http://fnd.us/c/6sgn6"></div>
Can anyone help me implement this into our header?
Thanks!
PS – I have a premium version but can’t find my order number.
I. Am. A. Noob.
Hi MWB
The first snippet is HTML, the second is Javascript. If you can perhaps link me to the documentation for this I’ll help getting it in the header area.
Thanks Andrew. The link to the site is below. You’ll find the code in the “embed” link just under the main picture and video (next to where the social media links are located). I don’t see any instructions, per se, but hopefully that’s still helpful.
http://fnd.us/c/6sgn6
Thanks for the info.
Try this plugin: https://wordpress.org/plugins/header-and-footer-scripts/ and use it to insert this snippet:
<script>(function() { var d = document, fr = d.createElement('script'); fr.type = 'text/javascript'; fr.async = true; fr.src = ((d.location.protocol.indexOf('https') == 0)? 'https://s-' : 'http://') + 'static.fundrazr.com/widgets/loader.js'; var s = d.getElementsByTagName('script')[0]; s.parentNode.insertBefore(fr, s);})();</script>Then insert the following into a Text widget in the header widget area:
Thanks! I want to try this out, but I’m not sure of your first step:
Where do I insert this:
<script>(function() { var d = document, fr = d.createElement('script'); fr.type = 'text/javascript'; fr.async = true; fr.src = ((d.location.protocol.indexOf('https') == 0)? 'https://s-' : 'http://') + 'static.fundrazr.com/widgets/loader.js'; var s = d.getElementsByTagName('script')[0]; s.parentNode.insertBefore(fr, s);})();</script>Do I open the PHP for the plugin and slam it in there?
You’ll need to use a plugin like this: https://wordpress.org/plugins/header-and-footer-scripts/. Via that plugin you can insert the script line into your header.
Hi Andrew,
You’re being super helpful – thanks! Please bare with me, as this is all a little new to me. However, I still don’t quite get what I need to do.
Do I need to insert that plugin in to the CUSTOMIZE>HEADER>WIDGETS section, or insert that code into the PLUGINS>HEADER & FOOTER>edit, then paste the code into the text box?
I do apologize is this is easy for you, but a few more explanations of the steps would be amazing.
Thanks for the patience.
I suppose I should say I’ve also downloaded and installed the plugin, but from here I’m a little grey on the next step.
The plugin, Header and Footer scripts, will give you an interface, much like Appearance > Custom CSS, where you can insert your script.
So:
1. Install this plugin: https://wordpress.org/plugins/header-and-footer-scripts/.
2. Within the above plugins interface (check the plugins FAQ/docs) insert your script:
<script>(function() { var d = document, fr = d.createElement('script'); fr.type = 'text/javascript'; fr.async = true; fr.src = ((d.location.protocol.indexOf('https') == 0)? 'https://s-' : 'http://') + 'static.fundrazr.com/widgets/loader.js'; var s = d.getElementsByTagName('script')[0]; s.parentNode.insertBefore(fr, s);})();</script>Got it thanks so much. I just didn’t see the plugin interface which was tucked away in the settings menu.
It’s up and it looks great. Thanks so much for all of you help!
You can check out the result here:
http://www.musicwithoutbarriers.com
Awesome, glad to hear that did the trick.