I know this isn't really that important but I thought it would be fun if you could embed a spotify to your markdown.
I tried pasting this into the README.md-file but it didn't transform into a widget:
<iframe src="https://open.spotify.com/embed/track/1UgMLFmeVyphjePcN1TNpq" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
Can somebody tell me if it's possible to embed this using markdown?
It's currently not possible to use iframes inside of your README on GitHub. This question has to do with the same underlying issue you're having. In short, iframes are not on the list of allowed HTML tags. You can see which tags are allowed here: https://github.com/github/markup/issues/245#issuecomment-357613929
You can just put this line of code in your README file:
[](https://open.spotify.com/collection/tracks)
And it will display the Spotify songs in your README file
Related
I used to have my website hosted through Shopify, and when I linked to it in my LinkedIn job description the logo showed up. I've since moved my website to GitHub Pages, and now the logo is blank when I link to it in LinkedIn (or anywhere else for that matter). Is there something I can do to fix this, or is it just a con of GH Pages?
It always helps to include a link to the codebase for reference, but it looks like you're likely working with this repo on your GitHub profile.
It's possible that Shopify or a theme you were using before included these by default, but typically you have to specify the preview image in your site's metadata. The preview images for formatted links are pulled from an Open Graph image property, which you define in a meta tag in your HTML's <head> section (see the OG documentation here). So, in your head include file, you'd add a meta tag like this:
<meta property="og:image" content="https://graemeharrison.com/assets/img/logo.png" />
Then, ideally, you'll include this head file in each layout file so that it's included in each page's HTML.
A couple of things that worked for me:
Put your image in your 'public' directory near index.html, and in your meta tag retrieve it with content="http://yourdomain.com/yourimage.png". (https didn't work for me but http did)
Also, https://www.linkedin.com/post-inspector is a good tool to check your og image appears.
If you want to embed youtube dynamically then it is totally easy. You just replace the video id in the embed code.
<iframe width="420" height="315" src="http://www.youtube.com/embed/<?=$youtubeid;?>" frameborder="0" allowfullscreen></iframe>
I'm struggling to do the same thing with soundcloud. Is it possible? - the embed code is as follows:
<iframe src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F57162664&show_artwork=true"></iframe>
It seems to me like you'd need to know this api code to embed the track, and so you'd have to look this up each time.
The 'api code' is just tracks/ followed by the track id (or groups/ with a group id, etc), not too different from YouTube, it's just not as easily accessible as YouTube's, since the id isn't in the URL. You can get the id from looking at the share code on a track, but even easier is to use the oembed service to get the full embedding HTML needed (it also calculates the proper height of the iframe to include), and it only requires the 'permalink' url which you see on a track page.
An updated version of the widget coming in the next few weeks should also support the permalink urls out-of-the-box.
Looks like you have to use the API to dynamically get the embed code:
Here's the documentation:
http://developers.soundcloud.com/docs#playing
I am trying to find a way to embed a share/+1 link for Google+ in a Newsletter, much like the Facebook share and tweeter tweet links can be embedded in a newsletter, which can be achieved with the following two urls:
https://www.facebook.com/sharer.php?u=[URL]&t=[TEXT]
http://twitter.com/intent/tweet?source=sharethiscom&text=[TEXT]&url=[URL]
Is there a similar functionality available for Google Plus?
All I could find on my own, is the Google+ button, which unfortunately uses JavaScript and thus it cannot be used in an email newsletter. I would expect Google to provide a static url fallback, but I cannot find it anywhere.
https://plus.google.com/share?url=http%3A%2F%2Fexample.com
You can share the link on Google+ with the official Google+ share link.
Replace the url parameter with the URL encoded link you want to share.
This one works fine for me :
https://plus.google.com/share?url=your-page-url
The share link allows you to do this. It will work in an email, but it's not quite the same as the +1 button.
To use the share link, add a link element to your email that complies with the Google+ Buttons policy. Set the href attribute to https://plus.google.com/share?url={url encoded share target}
For example, linking to https://plus.google.com/share?url=http%3A%2F%2Fexample.com will allow you to share example.com on Google+: (yes, that is a working demo).
Check out the official docs for more info.
If you use this approach please be aware of the fact that it is not a direct replacement for the +1 button. The link shares the target URL on Google+, but it does not actually +1 the target page. Only the +1 button can +1 a page.
Solution for those who needs custom title, description and image. You should make following changes to target URL:
Step1. add itemscope itemtype="http://schema.org/LocalBusiness" into <html> tag. It will look like <html itemscope itemtype="http://schema.org/LocalBusiness">. More itemtypes here
Step2. Place the follwing meta tags into <head>, change content attributes according your needs:
<meta itemprop="name" content="{Custom title goes here}">
<meta itemprop="description" content="{Custom description goes here}">
<meta itemprop="image" content="{http://www.your_url.com/your_image.png}">
Step3. Add the following link to your newsletter or anywhere you want:
Share it
Tip. To check how google sees your page, you can use this tool http://www.google.com/webmasters/tools/richsnippets. Probably you'll be interested in section Extracted rich snippet data from the page
Good luck, Lauris
I'm using the following.. :)
https://m.google.com/app/plus/x/?v=compose&content=[TEXT]%20[URL]
I personally suggest Google Plus Interactive Posts button
https://developers.google.com/+/web/share/interactive
to use in your apps/websites.Here Google Plus allows many customizations to do according to the requirement. I have used it in my app. Its a better option than Share button.
Maybe this helps. It works (partially) for me.
http://www.stateofsearch.com/share-on-google-plus-any-website/
There has got to be a way to do this by hacking the +1 script.
If you are interested in just changing the apperance you should download and modify this to suit your requirements.
Then, add this to your css:
.Uu .KF {
background: url("your-replacement-image") no-repeat scroll -132px -21px transparent !important;
}
to override the Google icons. However, this is probably very unstable and subject to change.
GitHub wikis allow you to link to other pages in the wiki like so:
[[Wiki Page Name]]
However, I want to display different text than the wiki page name when making the link. Is there a way to do this? Am I linking to wiki pages all wrong?
Using the Markdown link syntax
[Link Text](WikiPage)
seems to work in the edit preview but not on the actual wiki page. At least for me the generated link is WikiPage instead of wiki/WikiPage and I get the famous GitHub 404.
However the MediaWiki syntax
[[Link Text|WikiPage]]
works for me, even for Markdown wiki pages.
GitHub by default uses Markdown syntax for the wikis so you can just do:
[Arbitrary Link Text](Wiki Page Name)
Check out Markdown and this blog post for more information about their wikis and the other markup syntaxes they support.
This solution has issues when you're on the home page because it creates relative URLs. Check out Sven's answer, below.
The internal-ref part is relative to your project. For wiki pages use:
[Page Name](wiki/Page-Name)
In the preview the link will be broken but when the page is saved it will work.
The most common use [Link Text](WikiPageURL)
The second way: [[Link Text|WikiPageURL]]
The third way, if you do not want to repeat and need to use the hyperlink several times: [Link Text] and at the end of the page use once [Link Text]:WikiPageURL
Check the wiki editor's help. It tells you:
To create a reference link, use two sets of square brackets. [my internal link][internal-ref] will link to the internal reference internal-ref.
Is it possible to implement the Facebook like and share functionality for "liking" the comments of other users on a website? Does every comment has to have a permalink?
I have asked the question on Facebook developers forum, and they have come back to me with this response. Basically, the functionality that is required is not available.
http://forum.developers.facebook.net/viewtopic.php?pid=316205#p316205
Intro:
You will need individual like buttons for every comment, and as #Fnatte says you can then reference them to the comment by giving it an ID like #com1,#com2etc...
The best way to achieve this is through a for loop (I imagine you are pulling from a DB) that will iterate through and add the relevant code for the like button and implement the URL based on the comment it is pulling,
The Code:
You have 2 options, <iframe>:
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&layout=button_count&show_faces=false&width=90&action=like&font=segoe+ui&colorscheme=dark&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>
This is VERY slow, especially if you have a lot of comments loading at the same time, it does mean you don't need to import their JS library though,
Then there is the FB JS SDK:
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://example.com" layout="button_count" show_faces="false" width="90" font="segoe ui" colorscheme="dark"></fb:like>
This I would argue is a more eficcient way of doing things, but it does require a bit more time and effort - but will be well worth it.
The script of course can be imported only once in the head and then used multiple times throughout the page (perfect for what you need).
The URL to like is based on both the URL in the address bar and the ID that you have assigned to the code (e.g. #comment1) so the URL you are liking looks like this: http://mypage.com/page#comment1
Further Reading:
http://developers.facebook.com/docs/reference/plugins/like/
http://developers.facebook.com/docs/reference/javascript/
http://developers.facebook.com/docs/plugins/
Good luck and I hope this helps!
DEMO & SOURCE http://so.devilmaycode.it/facebook-like-button-on-comments/
updated, hope this help
I have never done it myself but you should probably check out http://developers.facebook.com/docs/guides/web#plugins.
It looks like you would need a unique link for each comment.
You could try including a fragment identifier in every URL like:
http://domain.com/article1#comment1
http://domain.com/article1#comment2
Facebook has rolled out a new version of the comments plugin which supports advanced functionality such as "liking" and replying to other comments. In addition, replies to a comment made on Facebook.com are now pushed back to the comments plugin (hosted on another site.)
How to enable:
Add the migrated attribute:
<fb:comments xid="YOUR_XID" migrated="1"></fb:comments>
OR use the href attribute instead of xid for future comments boxes
<fb:comments href="YOUR_CANONICAL_URL"></fb:comments>
References:
New <fb:comments>
Legacy <fb:comments>