I would like to resize the facebook share button. The default one provided by facebook is ridiculously small, and I am having difficulty resizing it. I tried overwriting the class, and even adding an ID, but nothing that has achieved desired result.
I mean below is the facebook share button:
<div class="fb-share-button" data-layout="icon"></div>
any help would be greatly appreicated, and please note that it also has to look good on mobile, i just need more flexibility in customization.
The Facebook Share button does not directly allow you to modify the style of the button. However you are able to create your own share button which will allow you to customize this to reflect the feel of your website.
For example for you can utilize the Javascript SDK to spawn a share dialog like so:
FB.ui({
method: 'share',
href: 'https://developers.facebook.com/docs/',
}, function(response){});
You can also use a URL redirect and link this with your custom button.
https://www.facebook.com/dialog/share?app_id=145634995501895&display=popup&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer
Please reference the following documentation for further details on the implementation: https://developers.facebook.com/docs/sharing/reference/share-dialog
However please ensure you adhere to the Facebook Brand Guidelines outlined here https://www.facebookbrand.com/
Related
I'm trying to make a google form look like my own site. I found examples of how to do this on How to style Google Forms and google-custom-form (GitHub project), but I tried both of the examples they give and they seem to fail now.
I had a look at Class Form - Google Apps Script which seems to be like an API, but I can't get my head around the documentation. Does anyone have an example of it working. Or has found another way of getting this to work? It would be really handy to do as embedded forms look really out of sync with the rest of the site.
The API you're linking to is an apps script API. This is needed if you want to create dynamic forms (dynamic amount of questions, dynamic answers,...) but not for custom styling. An intro to appscript can be found on this page: https://developers.google.com/apps-script/
You could just create a form manually on https://www.google.com/forms/about/
You can change the styling and colors in the top-right of the page. When you are ready to embed the form on your own page you have to press "SEND", an select the embed icon <> at the top.
I've worked with this a ton, and still have issues with it. Been learning the new api v4 for sheets but still having trouble, it is still in beta too. For now I can recommend this solution though by heaversm on github.
https://github.com/heaversm/google-custom-form
The example fully works as long as you find the entry.xxxxxxx for each field and replace in the appropriate js. To avoid the embed issues, give your form submit on a click function that has the event as the input and then preventDefault on the event like so:
$('#submit-button').on('click', function(event){
event.preventDefault();
// continue code from heaversm
});
Hope this works for you. Cheers
So I've been searching the web and I can't find a good answer on how to have a featured image with a play button, once I click the play button it launches a mp3 player built on wordpress site and where i can change Or add. Much like this site -> indieshuffle.com.
Does anyone know how to do that or at least give me some material to start with even a theme would be amazing
Although its a very simple task, if you dont have enough knowledge of programming then it will be hard to achieve. And not many people will help you on stackoverflow without any existing code to show them.
Here's how i would have achieved it. First i would attach the featured image to the post (the default functionality). Then i would create a custom field to save the soundcloud id of the song. Then in your theme you should wrap the featured image with a div and have a play button on hover. Then use javascript/jquery to look for click events (ie. what should it do when someone clicks on the image). Then i would use the Soundcloud API and use the play function to play the desired song. Here is a code i got from the API docs.
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script>
SC.initialize({
client_id: 'YOUR_CLIENT_ID'
});
// stream track id 293
SC.stream("/tracks/293", function(sound){
sound.play();
});
</script>
Just take it slow, start from the beginning and go through the points i mentioned, it would be much easier to help if you start somewhere and ask a specific question.
You might already be familiar with the embed code, but if you just want to show the song in your post you can use the embed code in your post. Something like this https://soundcloud.com/pages/embed. There are also some wordpress plugins for soundcloud that will automatically embed the code if you give it the id of the song.
I would like to implement a Facebook Share button using ASP.NET MVC3, like following image.
I have installed Microsoft Web Helper in my MVC application, and I am able to create a Facebook Like button using #Facebook.LikeButton();; But how can I create a Facebook Share button?
The Share Button is no longer officially supported by Facebook. However, for now you can still achieve the old Share Button's functionality by using Facebook's "sharer.php" app.
Just apply a link in the following format to your button image or link text:
https://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.yourpage.com
In the long run though, your safer solution would be to use one of the still supported social plugins, like the "Like" button or the "Send" button.
The facebook share button isn't available in the facebook helper, only the following social plugins:
Like Button
Activity Feed
Recommendations
Like Box
Login Button
Facepile
Comments
Live Stream
http://facebookhelper.codeplex.com/documentation
By the way the share button is deprecated and will be not supported in the future, because the click through rates of the Like Button are better. More info at the bottom of this page:
https://developers.facebook.com/docs/reference/plugins/like/
I have inherited some code which uses uses the LinkedIn Company Profile API. At least that's what I think it is. Basically a script tag is rendered in the following format:
<script type="IN/CompanyProfile" data-id="9999" data-format="click"></script>
This together with .js file creates a link with the Linked-in logo which when clicked on reveals profile of company. Question is, can I customize the link. I want to add some text to the right of the linked in logo. I couldn't find any relevant documentation on it. I added a span tag with some text and attempted to wire up the click of the span, so that when clicked it clicks the linkedin icon. That doesn't seem to work-- which I found rather odd.
Any thoughts?
The Company Profile plugin builder is here:
https://developer.linkedin.com/plugins/company-profile-plugin
Customization of this plugin is limited to width (using data-width) at this time because of the complex layout. However, you could build something similar using the Javascript API if you need something more customized to your system.
This is another option that is more customizable, but has less interactivity:
https://www.linkedin.com/profile/profile-badges
I am developing a Facebook App and I want use the exact design (style) that facebook has, to show a post - picture, link, status etc. So for example I show a link to a post on the wall that has a picture in it and when the user wants to see details about it, a popup shows all info (picture, likes, comments etc) exactly how Facebook shows it if you would click the picture in your wall. My question is: am I allowed to copy the exact design of the pop up, or is there a way I can do this by just calling a function with the parameter being the post id?
Thank you.
Yea - you can recreate their UI. Checkout this answer I gave a little while back - it might be useful to you.
http://facebook.stackoverflow.com/a/8912265/558021
The only issue with recreating their UI (IMO) is to start altering their brands.