Addthis Twitter Follow Button Customize - javascript

I'm currently using Addthis for my social media share / follow buttons, the problem I'm facing is on the twitter follow button I don't want it to display the username (so the button isn't so wide) I just want the word follow and the counter, I'm displaying this follow button like so on my site,
Twitter Follow
<a class="addthis_button_twitter_follow_native" tw:screen_name="myaccount"></a>
And once this has loaded I took a look at the source code and noticed that it loads a <span> element with the id #1 and inside that is a <b> tag and that's where the username is so I need to remove #1 b but when I try to do this with css #1 b { display: none !important;} or with jQuery $('#1 b').remove() its not working, does anyone have any suggestions or other approaches to this, thanks in advance for any help!

Check Twitter api here...https://twitter.com/about/resources/buttons#tweet
You can customize your self there.

To integrate followers count just use,
data-show-count="true"
and for removing user name from button,
data-show-screen-name="false"
Now it only shows the follow button and count of followers and here is the full code,
Follow #twitterapi
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Related

Facebook SDK share with text and a variable

This is my first time using the Facebook SDK and I am finding it a rather large and difficult to navigate source.
I have my app ID and I am ready to go. I can get a share button to come up and open correctly (though, weirdly, I can not get the button to show in a Bootstrap modal footer, if you can solve that too, I'd be grateful). But now with the share I want to say something like:
"I scored " [the variable "score"] at [website]"."
Then they can push "share".
I have this div <div id="fb-root"></div> - where should this be placed?
I have taken the information and source code from here: https://developers.facebook.com/docs/plugins/share-button
In summary: I'd like the FB share button to be able to be seen only in the modal footer (I can't seem to get this to work at all) and to have a small quote of text with the user's score.

Want a Condition for This Script

Any Javascript expert could help me here.
i am a template developer and i use this script to show my footer link in every free template created by me. and when someone trying to remove footer link their site redirected to my site example.com...
But What
some users download my template and hide my footer link with this CSS property: visibility:hidden
script is here that i use in template bottom,
abc
And some users add visibility:hidden to footer link in template like this. check in here.
<a id="credit" href="http://www.example.com"><a target="_blank" href="http://www.example.com/">abc</a></a>
So, my point is here, that what should add in first script, so that if someone add visibility:hidden and then it should redirected to my official site example.com
if ($('#myContent').css('visibility') === 'hidden')
window.location('http://wherever');
This?
Edit: Of course, #t.niese is right and this is really an exercise in futility.
What if you detect style change event on your element?
MutationObservers - Is this useful for you?
MutationEvents - also please take look at this
You could also try to obfuscate your code and maybe use javascript singleton function pattern.

Linking paginated articles to sidebar

My google fu is currently letting me down so I thought I'd ask here for some help..
I have a page that has a single article on it (url.com/article/article-headline). When you scroll down the page using jQuery it loads the next article and changes the url (url.com/article/next-article-headline).
My issue is, I have a left hand sidebar which has a list of all the articles. What I'd like to happen is to have the current article highlighted. So when you scroll down the page and the next article loads the next sidebar article title is highlighted etc etc.
If you need an example of what I mean you can see it in action on time.com
http://time.com/4010146/smartphones-dinner/ (scroll down the page and watch the URL and sidebar)
I'm really struggling to find what it's called in order to do a proper search. I guess it's something similar to scrollspy but I'm not sure. Are there any plugins that exist for this?
You need to add data-attributes to your sidebar and the article section at the main content. With the help of which you could determine the article title.
Using jQuery then add a class named "active" which would determine the current article is active and style the "active" class later just for the sidebar.
Example: .sidebar-article.active { color: #f00; }
IF you need a solution you need to also provide appropriate HTML structure and jQuery code with the help of fiddle. So that rest of the code snippet we could provide and also not harm your current code base.

changing active class in twitter bootstrap to the current page that user clicks on in the navigation bar

I am sure the answer to this question has been answered many times. In fact, I've been reading tons of threads regarding this question, but I still have no clue how to go about doing this. If you can help me with a very simple way of implementing the code, that would be awesome. I am a complete newbie at this, and have very little, if not, zero, knowledge of javascript.
I have a simple fixed navigation bar (of about 5 links) on the top of the site I'm currently building, using twitter bootstrap. This is a one-page scrollable website.
In twitter bootstrap, there is a class on the first link. This class is "active". It's there by default.
I'm assuming this is the key to highlighting the links when a user clicks on one of the links in the navbar, ie. when the user scrolls to a certain section on the 1-page website, the corresponding navigation link gets highlighted.
I think I need to add some javascript to get this working. Or maybe I can get this working without javascript?
What do I do? Please help...
If you can get an example up on jsfiddle, that would be great too.
What I need help with specifically:
1) I need to incorporate smooth-scrolling on the website (which I can kinda do, using something I've searched for online, but would prefer to have a complete solution to this including the points below).
2) When user scrolls down or up my 1-page website, the navigation links changes color, according to the section they're in.
3) When user clicks on one of these navigation links, the link remains highlighted while the user reads that section of my website.
4) If I need to use javascript, do I write the javascript at the bottom of my HTML code, above the body tag? Or should I create a new .js file?
5) I need to stress that I'm a complete newbie, and that I'm using the current version of twitter bootstrap.
Ok.
download http://flesler.blogspot.com/
download http://github.com/davist11/jQuery-One-Page-Nav
Call js
jQuery('#top-nav').onePageNav({
scrollSpeed: 1200,
currentClass: 'active',
changeHash: true,
filter: ':not(.external)' // used for external navigation links if any <a class="external" href=""></a>
});
Add id="top-nav" to your nav

Accesing post title and URL from Blogger gadget

I'm trying to build a Blogger gadget for posts sharing using Diaspora!
I've started with Diaspora Sharing Service usinh HTML and JavaScript (you can take a look at my work in progress) and found that URL and TITLE are empty
Neither accessing url using post.url or window.location.href can I obtain a valid value.
Any help will be appreciated.
Maybe you could provide more information? It's not clear to me what exactly you're asking, so it might not be clear to others, too.
As the author of DSS I have to point out that I have some time ago ramped it down. Instead anyone wanting a similar service should use the Diaspora* Advanced Sharer which is based on DSS.
As for the question on how to get it working with Blogger, D*AS has instructions for this;
Blogger blogs
This method will include a Diaspora* share button next to Google +1 button. It is necessary to enable the sharing buttons.
Enter your dashboard and choose your blog.
In section Template, click on Edit HTML. If a warning appears, click Continue.
Check Expand widget templates, press Ctrl+F and write sharebuttons.
Find the line <b:includable id='shareButtons' var='post'>. Just after that, copy the following code:
<a expr:href='"http://sharetodiaspora.github.com/?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Share on Diaspora'>
<img src='http://joindiaspora.com/favicon.ico' style='width:16px; height:16px; padding:0; border:0; vertical-align:middle;'/>
</a>
Ps. Found this question from my Apache error logs :P

Categories