Search code examples
javascriptbookmarklet

Bookmarklet to share articles

I am trying to create a bookmarklet for my website to share articles automatically on my plattform. The problem is it does not submit the article.

enter image description here

<div style="margin-left: 15px;"><span class="bookmarklet"><span class="fa fa-bookmark"></span> Get the
    <br>
    <a title="Drag this link to your bookmark bar. Click the bookmark when you want to submit an article." data-original-title="" class="has-tooltip" onclick="return false;" data-toggle="tooltip" data-placement="bottom" data-title="Drag this link to your bookmark bar. Click the bookmark when you want to submit an article." href="javascript:location.href='http://www.fineconomy.com/submit-articles/?link='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title)" style="cursor:move;text-decoration:none;">FinEco Bookmarklet</a>
    </span>
</div>

I created a test user:

User Name: test

Pwd: test12345

Any suggestions what I am doing wrong?

I appreciate your replies!

UPDATE 1

I added the following javascript to the bottom of the page.

;(function(win, $) {
if (window.location.pathname.indexOf('submit-articles') > -1) { 
    $(".maincontent").addClass('content-push-sidebar');
 } 
})(window, window.jQuery);

Furthermore, I updated the bookmarklet:

<span class="bookmarklet"><span class="fa fa-bookmark"></span> Get the<br>
<a title="Drag this link to your bookmark bar. Click the bookmark when you want to submit an article." data-original-title="" class="has-tooltip" onclick="return false;" data-toggle="tooltip" data-placement="bottom" data-title="Drag this link to your bookmark bar. Click the bookmark when you want to submit an article." href="javascript:location.href='http://www.fineconomy.com/submit-articles/?link='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title)" style="cursor:move;text-decoration:none;">FinEco Bookmarklet</a></span>

My, problem is that I cannot add topics to the field.

enter image description here

When I close the submit-article window the field with the topics pops up:

enter image description here

Any suggestions why the field is hidden?

Solution

  • Restating the question to make sure I understand:

    You want a bookmarklet that, when clicked, will take a user to fineconomy and pre-fill an article submission form with the url and title of whatever webpage the user happened to be on.

    Upon arriving at fineconomy, the snippet you added gets the form to appear by checking to see if the page url (on fineconomy) contains "submit-articles" and, if it does, essentially adds a class to the main content div to make the form appear.

    Because you check to see if you are on the http://fineconomy.com/submit-articles/ page, I assume you are working in some sort of templating system that only lets you add scripts to some kind of global footer--perhaps wordpress, if the wp-theme references.

    Anyway, I think the reason the topics field is hidden is that there is this css declaration:

    /* NEW CODE FOR V1.1 */

/** SNIP **/

.selectize-input{
    display:none;
}

    The topics field is a .selectize-input field. I'm not sure why the style is there, but it's preventing the field from displaying. I don't know enough about your system to say whether or not that declaration belongs there.

    If it does belong there, I suppose you'll have to augment the javascript snippet on the page to display the component, as well. Something like this:

    ;(function(win, $) {
if (window.location.pathname.indexOf('submit-articles') > -1) { 
    $(".maincontent").addClass('content-push-sidebar');
    $(".selectize-input").show();
 } 
})(window, window.jQuery);

    Although, you say the field appears when the form gets dismissed, which can happen if something is trying to toggle its visibility $(".selectize-input").toggle();. This would suggest that the submission form is usually displayed via some kind of method call, and, if this is the case, it would really be advisable to use this call, rather than adding the content-push-sidebar class in the snippet above.

    If possible, I'd also check if there's a way to put the snippet on the submit-page only, negating the need to check the current url for "submit-article". It would generally make things easier to maintain, less error prone, and more efficient.