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.
Related
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/
I have a video which I want users to see in my webpage. I have uploaded that video on youtube also.
My current coding is
<iframe src="https://www.youtube.com/embed/ilbR0MiH6Ho"></iframe>
But this shows the video in the style(with same loaders, buttons, interface, etc..) it is being shown at youtube...
But I want it to be shown in other style like it is shown in some other sites like http://www.apple.com/your-verse/#video-your-verse It has a different style of viewing videos!!
That way, I also want to create my own frame to view my video(with a play button of my designing, my loading bar, my interface, etc..)
Can anyone out there help me with that?? Thanks in advance...
if you need your own 'player' or 'skin', you will have to use the available players like "JWPlayer" or "flowplayer" or create your own. Then you will have to host your videos elsewhere, where a streaming link has to be obtained.
Its not easy unless you have the technical skills required to create your own video player. But you can use the existing opensource players like I mentioned before.
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
Lets say I let the customer upload up to 5 pictures. I'm looking for a good way to let visitors see the images one by one.
I've seen some.. where there are thumbnails on the side/bottom (that looks like a vertical/horizontal film strip) and the default picture is the large one displayed. And viewers can click into others to show those pictures.
This could possibly be an AJAX solution. I just couldn't come up with the right keywords to Google this custom Web component. Perhaps it is "photo gallery". But I would be more interested to know what solutions developers here use for their site.
Perhaps lightbox is the keyword you're looking for: http://www.google.com/search?q=lightbox
Is something like this Galleria what you're after?
It's all implemented in Javascript so is simple to integrate.
There are several options but on first thought, I would reach for the fancybox jQuery plugin. The third example on their home page does exactly what you described. I've used this plugin a few times now and it's quite good.
Do you have any Drupal module (or other solution) to implement a feature similiar to Facebook's Share a Link?
To be precise:
you paste a link
site's preview is generated
title
short excerpt
and a thumbnail of one of the site's images
You'll need to do some pretty fancy stuff when snagging that thumbnail.
That's parsing the page and picking out thumbnails that might want to get used from the tags on the page.
It will need to do this via javascript after the link has been placed.
Facebook actually caches their thumbnails for page sharing once a day, so they choose not to go grab it at run time for the client every time.
There are certainly libraries (and maybe a jQuery plugin that would let you slurp a URL into memory then traverse it and present some one the fly images.
Check out the Tumblr Share tool. You might be able to reverse engineer from that.
As for Drupal modules this seems unlikely. Would love to hear it though.
You could also think about a third party screen shot service, but that's a pain too.