How to add "unlike" button in web page? - asp.net

I am working on Windows 8 App where I need to show a web page with facebook "Like/Unlike" options. Below is code which I added for Like.I need to add Unlike option too. Can some one explain me how to get this done ?
#section AdditionalHeaderContent {
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
}
#section ContentFooter
{
<div id="fb-root">
<fb:like ref="#Url.RequestContext.HttpContext.Request.Url.ToString().EnsureTrailing("/")" show_faces="true" width="450"></fb:like>
</div>
}
How can I show "unlike" button?
Thanks.

The Facebook like button also is your Facebook unlike button. The Facebook button knows if you already liked the page.
So when you click on it again you are "unlike-ing" it again.
*update * *(so you do not have to check the comments)*
This button uses Javascript that has been hosted by facebook, you can not edit that.
----- What you can do ----
If it is possible to make a custom separate Like and "Unlike" button this would be the way to do it.
Use the c# Facebook SDK to code things for Facebook yourself.
( http://csharpsdk.org/ )
You can look up the Facebook API here.
( https://developers.facebook.com/docs/reference/apis/ )

Related

AddThis Share : LinkedIn always open in new window

We're using AddThis Social Share functionality with our Sitecore/MVC application. The problem we're facing is that the LinkedIn share always opens in new window. On Inspect, we can see the target=_blank in code, which is not being added in our code.
Any help?
Thanks,
Chandana
The behavior of each share button is as per the website to which the page is being shared. If you test each button (say Facebook, G+, Twitter, LinkedIn, etc.) you will notice that they all work differently. It's not AddThis choice. This is because each website has its own API and that's the way that website decided it would work with their system. LinkedIn happens to open a separate window... Pinterest first opens a popup within your page and then another window after you selected the image you wanted to share. G+ and Facebook open a new tab. And the popups/windows all look quite different, but the users should recognize each respective brand as a result...
I suspect that this is a problem with the AddThis Social Share functionality. To share on LinkedIn, all you need is the following URL format...
https://www.linkedin.com/sharing/share-offsite/?url={url}
Then you can setup your <a href="..."> element however you like, with target="_blank" or not.
Source: Official LinkedIn Sharing Documentation.
Can try out below JavaScript code, which will overwrite addthis functionality, and make linkedIn as popup,
setInterval make sure click event attached to dynamically generated anchor tag
$(document).ready(function () {
var clickinterval = setInterval(setclickevent, 500);
function setclickevent() {
if ($('.at-svc-linkedin').length > 0) {
$('.at-svc-linkedin').on('click', function () {
window.open('https://www.linkedin.com/sharing/share-offsite/?url=' + fixedEncodeURIComponent(window.location.href), 'popup', 'width=600,height=600');
e.preventDefault();
return false;
});
clearInterval(clickinterval);
}
}
function fixedEncodeURIComponent(str) {
return encodeURIComponent(str).replace(/[!'()*]/g, function (c) {
return '%' + c.charCodeAt(0).toString(16);
});
}
});

Issues with LinkedIn follow Button

I want to use linkedIn follow button for evey user like User provide his profile url and we create a follow button with the help of that url . I have get the follow button code from LinkedIn :
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script type="IN/FollowCompany" data-id="test" data-counter="right"></script>
we get the company / username from url and replace data-id with that . But this code doesn't show any follow button at front end. Is there any html code I have to use for that (But linkedIn doesn't provide that code). So Please How I can show follow button at front end.
You're not using an actual id for company in the script: data-id="test".
You need to use a real id.
Select yours from the dropdown in the tool you used to create the button:
you don't need any HTML code for that , just placed the js code where you want to show follow button . you can get better idea from here

YouTube button for the website

I went to https://developers.google.com/youtube/youtube_subscribe_button#Configuration_Options to create YouTube Subscribe button, but for some reason instead of buttons I could choose from I see gray boxes and there is no code shown. Please help
Thank you!
The basic code, test it on your web page :
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channel="GoogleDevelopers" data-layout="default" data-count="default"></div>

how to get google translate for section with dropdown list of languages working?

I'm trying to use google translate for translations of user comments. I'm using the official wizard (http://translate.google.com/translate_tools) to generate the java script and html code:
<script>
function googleSectionalElementInit() {
new google.translate.SectionalElement({
sectionalNodeClassName: 'goog-trans-section',
controlNodeClassName: 'goog-trans-control',
background: '#f4fa58'
}, 'google_sectional_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=auto"></script>
<div class="goog-trans-section">
<div class="goog-trans-control">
</div>
some text in some language
</div>
I don't want the entire page to be translated, but only the comments. Unfortunately, the code generated for section translation doesn't come with a dropdown box for language selection. Does somebody know how to implement this? I tried to add includedLanguages: 'en,fr,de,ru', to the java script code, but it didn't help.
The super simple thing is just use the steps below.
1. add the following code where you want to show the translate dropdown.
<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
add class="notranslate" to body tag
add class="translate" to the section which you want to be translated by google translate.
It seems the sectional translation widget behaves differently to how I was expecting (and maybe differently to how you were expecting too). The "entire webpage" widget gives you a dropdown and lets the user choose which language they want to display the page in.
The "section of the webpage" widget appears to be intended to deal with sites which have individual sections in different languages where you want the user to be able to translate those sections into your primary page language. This becomes clear when you click the "Preview your page" link on the official wizard.
If you look at the generated markup you will see that you mark up sections of the page something like this:
<div class="goog-trans-section" lang="zh-CN">
...content in Chinese...
</div>
The script then automatically appends a "Translate" link which allows you to translate this text back into English.
To achieve what I wanted (and what I guess you were trying to do too) I needed to stick to the "entire webpage" snippet but add a class of notranslate to anything that I didn't want to be translated.

How can I show Contact Form Using Pop up window

Please tell me how I can implement Model Popup window on Contact Form
You can use jQuery Modal Plugins
Here is a nice article to show modal in ASP.NET
Smum County Modal Form for ASP.NET
Which contact form ? If its your custom form, use this function to show it as modal window:
http://msdn.microsoft.com/en-us/library/ms536759(v=vs.85).aspx
Easiest would probably be the jQuery popup plugin.. I've used it with some success.
<script type="text/javascript">
function openContactForm(){
var win = window.open('contactus.aspx','Contact Us','width=200,height=100');
}
</script>
Contact Us
for more options see this page.

Resources